Question regarding hovering

HTML & CSS
1

Hi

So, I have an img inside a <div>, and inside the <div> is also a <span> caption. The caption is absolute positioned so that it appears under the img when hovering that area. The thing is I want the caption to show when hovering over the IMG.

My code looks like this atm:

<div>
<img />
<span></span>
</div>

div{
position: relative;
display: block;
height: 200px;
width: 200px;
}

img{
height: 200px;
width: 200px;
}

span{
width: 100%;
height: auto;
position: absolute;
top: 200px;
left: 0;
opacity: 0;
background: #000;
}

span:hover{
opacity: 0.7;
}

This makes the caption appear, but only when i hover under the IMG where the span is positioned. I want it to appear when hovering the IMG.

I tried:

img:hover span{
opacity: 0.7;
}

But that didnt work.

Anyone know how I can do?

2

Hi there,

Change:

span:hover{
  opacity: 0.7;
}

to:

div:hover span{
  opacity: 0.7;
}

That should do what you want.