Как показать div при наведении на изображение?

Question

У меня есть некоторый код, как это ....

<div class="col-lg-8 col-xs-12 col-sm-7 col-md-8 " style="vertical-align:top;"> 
    <img src="images/url.jpg" class="banner_img" /> 
    <div class="banner_caption"> 
    <h3>Banner caption here</h3> 
    </div> 
</div> 

и CSS, как это ...

.banner_caption{ 
    background-color:rgba(0,0,0,0.3); 
    width:100%; 
    padding:5px; 
    position:absolute; 
    bottom:-60px; 
    display:none; 
    left:0; 
    color:#fff; 
    transition-delay:1s; 
    transition:all 1s; 
} 

.banner_img:hover .banner_caption{ 
    bottom:0px; 
    display:block; 
} 

banner_caption DIV должен появиться, когда я парить на изображение ... но я неспособный сделать это ... у кого есть идеи решить это?

Answer 1

Просто дайте это:

.banner_img:hover + .banner_caption 

плюс (+) называется селектором родственный.

.banner_img:hover + .banner_caption{ 
    bottom: 0; 
    display: block; 
} 

Причина, почему ваш не работает это:

• .banner_img:hover .banner_caption: .banner_caption находится внутри .banner_img.
• .banner_img:hover + .banner_caption: .banner_caption находится рядом с .banner_img.

Таким образом, вам нужно использовать второй выше.