user1404437 user1404437 - 3 months ago 10
CSS Question

Problems with hover CSS

I would like to show an img when i hover over another but nothing is happening. Any advice on what i can do to change the code

**HTML**
<div id="container-collection">

<img class="clothes1" src="Images/smallest/JPEG/IMG_3148.jpg">

<img class="closeup1" src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg">

</div>

**CSS**

img.closeup1{
display: none;
}

img.closeup1:hover clothes1 {
display: block;
}

Answer

As @minitech said, you need to properly combine the controlled element selector with the :hover owner.

I'd go for something like this:

HTML

<div id="container-collection">
    <div class="clothes1-wrap">
        <img class="clothes1" src="Images/smallest/JPEG/IMG_3148.jpg">
        <img class="closeup1" src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg">
    </div>
</div>

CSS

.closeup1 {
    display: none;
}

.clothes1-wrap:hover .closeup1 {
    display: block;
}

For me, this looks a little bit cleaner, plus you can add elements between imgs.