Помогите с CSS

Question

Помогите с CSS

Рустем Ахмедов Ученик (161), на голосовании 8 месяцев назад

Когда навожу мышку на кнопку картинка появляется резко, как сделать этот процесс плавным?

.button1 {
border: solid #333333 3px;
padding: 5px;
border-radius: 15px;
background-color: #333333;
color: #ffffff;
font-size: 23px;
position: absolute;
text-align: center;
}
.button1:hover {
color:#333333;
background-image: url(foncard/foncard6.jpg);
transition: 1s;

Дополнен 9 месяцев назад

*текст меняет цвет плавно*

Answer 1

background-image нельзя анимировать.
Делай обертку дополнительную, и меняй opacity

Answer 2

Данил Сторожев Ученик (224) 9 месяцев назад

Тебя кто по клавиатуре покатал

Answer 3

 .button1 { 
  border: solid #333333 3px; 
  padding: 5px; 
  border-radius: 15px; 
  background-color: #333333; 
  color: #ffffff; 
  font-size: 23px;    
  position: relative; 
  overflow: hidden;  
} 
 
.button1-image { 
  width: 100%; 
  height: 100%; 
  background-image: url(foncard/foncard6.jpg); 
  position: absolute; 
  top: 0; 
  left: 0; 
  opacity: 0; 
  transition: opacity 0.5s; 
} 
 
.button1:hover .button1-image { 
  opacity: 1; 
}

Answer 4

Богдан Свинья Знаток (347) 9 месяцев назад

не прогай на css