Display different image on hover with CSS. Have you ever wanted to display a different small image on a button with a background and opacity so that the original image is still visible. I had to use the hover effect for my client.  So here’s what I made and i am sharing with you guys. Any problems just comment below.

Display different image on hover with CSS

The style for the button consists of the following classes:

.main-btn {
 width: 410px;
 height: 295px;
 overflow: hidden;
}
.main-btn a{
 display: block; /* important */
 width: 410px;
 height: 295px;
}
.first-link {
 display: block; /* important */
 width: 410px;
 height: 295px;
}
.main-btn:hover .second-link {
 display: block; /* important */
 width: 410px;
 height: 295px;
 margin-top: -295px;
}
.second-link {
 display: block; /* important */
 width: 410px;
 height: 295px;
 position: relative;
}
.second-link .PostHoverText{
 display: block; /* important */
 width: 250px;
 height: 295px;
 color: #F00;
 font-weight: bold;
 position: absolute;
 top: 0px;
 z-index: 2;
 text-transform: uppercase;
 line-height: 300px;
 margin-left: 80px;
}
.second-link .PostHoverBkgd {
 display: block;
 width: 410px;
 height: 295px;
 position: absolute;
 background-color: #FFF;
 opacity: 0.74;
 top: 0px;
}

The code for the button consists of the following code:

<div class="main-btn">

<a class="first-link" href="#"><img src="http://www.linden-travel-group.co.uk/antigua-holidays/Cocobay%20Resort-5.jpg" width="410" height="295" /></a>

<a class="second-link" href="#">
<span class="PostHoverText">HOVERING TEXT</span> 
<span class="PostHoverBkgd"></span>
</a>

</div>

less-css-9

To check the demo click this link : DEMO

Download the zip with all the containing files here: [wpdm_file id=1]

Enjoy!