html tutorial - How to change image on hover with CSS - html5 - html code - html form
Answer: Use the CSS background-image Property
In the :hover pseudo category to alter the image on mouse hover You can use the CSS background-image property together, like this:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover in CSS</title>
<style type="text/css">
.box {
width: 150px;
height: 215px;
background: url("images/box-back.jpg") no-repeat;
display: inline-block;
}
.box:hover {
background: url("images/box-front.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>You can mix the pictures into image sprite for smooth hover impact. However, if you would like to attain this impact victimization the tag you'll be able to use the CSS positioning technique, like this:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Swap on Hover with CSS</title>
<style type="text/css">
.box {
width: 150px;
height: 215px;
position: relative;
display: inline-block;
}
.box .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.box:hover .img-top {
display: inline;
}
</style>
</head>
<body>
<div class="box">
<img src="images/box-back.jpg" alt="Box Back">
<img src="images/box-front.jpg" class="img-top" alt="Box Front">
</div>
</body>
</html>