<html>
<head>
<title> Zoom image </title>
<style>
.pic{
width: 100px;
height : 100px;
}
.zoompic{
position : absolute;
width : 0px;
-webkit-transition:width 0.3s linear 0s;
transition:width 0.3s linear 0s;
z-index:10;
}
.pic:hover + .zoompic{
width : 300px;
}
</style>
</head>
<body>
<img class="pic" src="apple.png">
<img class="zoompic" src="apple.png">
<img class="pic" src="micro.png">
<img class="zoompic" src="micro.png">
</body>
</html>
How to make Image Zoom in HTML Using CSS
Reviewed by Viththiyakaran
on
9:52 PM
Rating:
Reviewed by Viththiyakaran
on
9:52 PM
Rating:
No comments: