The blink that you see now can probably be eliminated by preloading the image.
{display:none} isn’t necessarily an ideal choice. In this case, I believe it is fine because if anything goes wrong with the CSS, the user will likely see both images; nevertheless, there are several other ways of swapping the images to get the :hover effect, that you can file in your developer’s notebook.
One can position the “hidden” image off to the side instead of using {display:none}.
.imgbox {
min-height:100px;
position:relative;
text-align:center;
}
.imgbox img {
display:block;
width:100%;
height:auto;
}
.imgbox img:first-of-type {
position:static;
}
.imgbox img:last-of-type {
position:absolute;
left:-9999em;
}
.imgbox:hover img:first-of-type,
.imgbox.active img:first-of-type {
position:absolute;
left:-9999em;
}
.imgbox:hover img:last-of-type,
.imgbox.active img:last-of-type {
position:static;
}
or One can temporarily overlay the primary image with the :hover image using absolute positioning on the temp image.
.imgbox {
min-height:100px;
position:relative;
text-align:center;
}
.imgbox img {
display:block;
width:100%;
height:auto;
}
.imgbox img:last-of-type {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
z-index:-1;
}
.imgbox:hover img:last-of-type,
.imgbox.active img:last-of-type {
z-index:1;
}
or One can place the primary image in the foreground and the :hover image in the background. To show the :hover image, set the opacity of the foreground image to “0”.
.imgbox {
min-height:100px;
position:relative;
text-align:center;
background:url("images/headerlogo20.png") no-repeat 0 0;
background-size:cover;
}
.imgbox img {
display:block;
width:100%;
height:auto;
}
.imgbox:hover img,
.imgbox.active img {
opacity:0;
}
<div class="imgbox"> <!-- add/remove class "active" to imgbox to toggle imgs -->
<img src="images/headerlogo10.png" width="500" height="338" alt="First Rate Logistics"> <!-- 500x338 -->
</div>
They all work.
If they have time, @SamA74 or @PaulOB might be willing to offer additional opinions, pro or con.
While it’s very unlikely to happen, if the images mysteriously became unavailable, the <h1> title would be visible on the user’s screen, whereas if it were pulled offscreen, it would not be.
This is a recently active thread. You may find it helpful. (just tossing it in)
Image Grid with Interactive Content on Hover