Блог

Главная - Вопросы по программированию - Как я могу создать градиент, который появляется, если вы наводите курсор на кнопку, но у кнопки должно быть все то же фоновое изображение

Как я могу создать градиент, который появляется, если вы наводите курсор на кнопку, но у кнопки должно быть все то же фоновое изображение

#css

#css

Вопрос:

Я хотел бы иметь кнопку в css с фоновым изображением, и если вы наведете на нее курсор, вы получите градиент. (см. Рисунок)

Изображение

Ответ №1:

Есть несколько способов добиться этого.

Одним из способов было бы использовать a button с фоновым изображением и прикрепить к кнопке псевдоэлемент, который имеет непрозрачность при наведении курсора на кнопку. 

 button {
  display: block;
  position: relative;
  height: 300px;
  width: 500px;
  outline: none;
  border: 0;
}

button::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(125,126,125,0.5) 0%,rgba(14,14,14,0.5) 100%);
  transition: opacity 250ms ease-in-out;
}

button:hover::before {
  opacity: 1;
}  
 <button style="background-image: url(http://placehold.it/500x300)" alt=""></button>