Анимация картинки

Question

Друзья, подскажите, почему у меня не видно картинки? Суть такова, что при наводке мышкой на картинку, она увеличивается и появляется другая, но все происходит кроме появление другой.

.luna{
 position: absolute;
 width: 300px;
 top: 1300px;
 left: 85px;
 display: block;
 border: 2px solid white;
 opacity: 0.8;
 transition: 1s;
 }

 .luna:hover{
 background: url(luna2.png);
 transform: scale(1.2);
 z-index: 99999;
 }
 

<div><img src="1luna.png" loading="lazy" class="luna"></div>

Answer 1

Вы пытаетесь через свойство hover передать классу .luna фон для картинки, поэтому у вас сама картинка и не меняется. Могу предложить вам в блоке с классом image, сделать еще один блок в котором будет находится сама картинка. Стиль css:

.image div {
   position: absolute;
   background-image: url(1luna.png);
   width: 300px;
   height: 150px;
   top: 1300px;
   left: 85px;
   display: block;
   border: 2px solid white;
   opacity: 0.8;
   transition: 1s;
}

.image div:hover{
   background-image: url(luna2.png);
   transform: scale(1.2);
   z-index: 99999;
}

Разметка:

<div class="image">
   <div></div>
</div>

БЛОГ НА HUSL

Анимация картинки

Ответы (1 шт):