hover появляется и исчезает

Question

Прямо сейчас у меня есть изображение, у которого есть другое изображение, абсолютно позиционированное поверх первого. Оба изображения находятся внутри тега.

Я пытаюсь получить его так, чтобы при наведении курсора на любую часть первого изображения оба изображения начинались с непрозрачности .5 до полного, а второе изображение от 0 до непрозрачности.

Я смог сделать работу наведения для изображения, но второе изображение активирует его непрозрачность, когда я нахожу прямо на нем, вместо того, чтобы выделять оба, когда я нахожусь на любом из них.

<div class="of-volume image-column"> 
        <a href="http://www.greatlengthshair.co.uk/hair-extensions/"> 
         <img src="img/artistry-1-bg.jpg" alt="artisans of volume link" class="image-link"> 
         <img src="img/artistry-1-icon.png" alt="" class="artisan-icon"> 
        </a> 
       </div> 

/*////////////////////////////////////// 
    IMAGE NAV 
//////////////////////////////////////*/ 

.image-column { 
    background-color: black; 
    float: left; 
    width: 33.3333%; 
    position: relative; 
    margin-bottom: -3px; 
} 

.image-column a { 
    opacity: .5; 
} 

.image-column a:hover { 
    opacity: 1; 
} 

.artisan-icon { 
    position: absolute; 
    margin-right: auto; 
    margin-left: auto; 
    right: 0; 
    left: 0; 
    bottom: 25px; 
} 

Answer 1

Я положил обе абсолютные изображения внутри относительного DIV, тогда установите селектор :hover на этом контейнере.

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
} 
 

 
#container { 
 
    position:relative; 
 
    width:100%; 
 
    height:200px; 
 
} 
 

 
img { 
 
    position:absolute; 
 
    top: 0px; 
 
    left:0px; 
 
    width:100%; 
 
    height:200px; 
 
    -webkit-transition: opacity 1s; /* Safari */ 
 
    transition: opacity 1s; 
 
} 
 

 
#pic1 { 
 
    opacity:0.0; 
 

 
} 
 

 
#pic2 { 
 
    opacity:0.5; 
 
} 
 

 
#container:hover #pic1, #container:hover #pic2 { 
 
    opacity: 1; 
 
}

<div id=container> 
 
<img id=pic1 class=picture src="http://i.imgur.com/tMVGqP6.jpg" alt=img> 
 
<img id=pic2 class=picture src="http://i.imgur.com/Goy7oBy.gif" alt=img> 
 
</div>

Answer 2

Вы перепутали большинство своих правил CSS. Просто приложите желаемые эффекты в правильное состояние парения:

.image-link { opacity: 0.5; } 
.artisan-icon { opacity: 0; } 
a:hover .image-link { opacity: 1; } 
a:hover .artistan-icon { opacity: 1; }