Hide image when hovering over a parent element

Question

I am currently trying to give an image an opacity: 0 whenever I hover over the div in which it is located. Currently, the opacity is only applied to the image when I hover over the actual image, not when I hover over the parent div. My current code:

HTML

<div class="Test" style="background-color:#D12121;padding-top:10px;padding-bottom:5px;">
    <div class="fadeSponsorsSmall">
        <img src="img/icon/small/white/sponsors.png">
        <p style="color:white;"><b>Gastenboek</b></p>
    </div>
</div>

CSS

.fadeSponsorsSmall {
    background-image: url('../img/icon/small/black/sponsors.png');
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-position: 22px 0px;
}
.fadeSponsorsSmall img:hover {
    opacity: 0;
}

I need to make the image have an opacity of 0 whenever I hover over either the image or anything with a class of .test .

Answer 1

You just need something simple like this:

fiddle

HTML

<div class="test">Hover over me!
    <img src="http://placekitten.com/g/200/300">
</div>

CSS

.test:hover img {
    opacity: 0;
}

Since the <img> is inside of the <div> you just need to apply the :hover pseudo class to the div and apply the style to the image, hence .test:hover img { ... } .

Answer 2

You can try this

.Test:hover .fadeSponsorsSmall{
    opacity: 0;
}

Then when you hover over the div with the class of Test, the opacity of the div with the class of fadeSponsorsSmall will be 0.

You could also remove div with the class of fadeSponsorsSmall, give the photo an id and target that instead.

Answer 3

Just change your CSS with this one

.fadeSponsorsSmall:hover img
{
    opacity: 0;
}

Answer 4

Try using

.Test:hover {
    opacity: 0;
}

Answer 5

Just add this to your CSS

.Test:hover
{
    opacity: 0;
}