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?