CODEWITHSUNDEEP
htmlcss
Neb9
Neb9

Reputation: 53

CSS/HTML image swap not working

I am trying to make an image swap but it is not working. gpu.jpg is showing and dissapering when I hover over it, but it flickers invisible and visible. But gpu_replace.jpg does not display at all, what am I doing wrong? bellow is my code:

HTML

<div id="contents">
    <h2><center>What are the components of a graphics card and what do they do?</h2>
    <h3><center>Bellow a GTX 980 PCB.</h3>
    <div style="position: relative; left: 0; top: 0; bottom: 100px;">
        <img src="pic\980_pcb.jpg" style="width:908.2px;height:398.05px position: relative; top: 0; left: 0;"/>
        <span class="imgswap">
            <img src="pic\gpu.jpg" style="position: absolute; top: 115px; left: 273.5px;"/>
        </span>
    </div>
</div>

CSS

span.imgswap {
    background-image: url("pic/gpu_replace.jpg");
    background-repeat: no-repeat; display:block;
}
span.imgswap:hover img {visibility:hidden;}

Upvotes: -1

Views: 313

Answers (2)

Leo
Leo

Reputation: 13858

span by default is not block element, so in your code span.imgswap has a computed height of 0. This is why you can't see "gpu_replace.jpg", even though it has a visible child!

When you hover "gpu.jpg", its parent node span.imgswap is also hovered, so span.imgswap:hover img {visibility:hidden;} makes "gpu.jpg" invisible, and then... it's invisible so it's not hovered --> its parent is not hovered --> span.imgswap:hover img {visibility:hidden;} is not applied --> "gpu.jpg" apprears again --> .... That's why "gpu.jpg" flashes.

Upvotes: 0

Shirish Patel
Shirish Patel

Reputation: 874

This solution might help you.

HTML

<span class="imgswap"> </span>

CSS

span.imgswap{
 background: url(http://stackoverflow.com/users/flair/4021429.png) no-repeat;
 height: 58px;
 width: 208px;
 display: block;
}
span.imgswap:hover{
 background: url(http://stackoverflow.com/users/flair/4021429.png?theme=hotdog) no-repeat;
}

Upvotes: 1

Related Questions