PURE HTML CSS Image Hover Effect
HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="s1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
</div>
</body>
</html>CSS Code
<style>
@keyframes dd{
from{
width:100px; height:100px;
z-index:10;
}
to{
width:200px; height:200px;
z-index:10;
}
}
@keyframes dd1{
from{
width:100px; height:100px;top:0;
left:100px;
z-index:10;
}
to{
width:200px; height:200px;
z-index:10;left:0;top:0;
}
}
@keyframes dd2{
from{
width:100px; height:100px;top:100px;
left:0;
z-index:10;
}
to{
width:200px; height:200px;left:0;top:0;
z-index:10;
}
}
@keyframes dd3{
from{
width:100px; height:100px;top:100px;
left:100px;
z-index:10;
}
to{
width:200px; height:200px;
z-index:10;left:0;top:0;
}
}
.s1{
width:200px;
height:200px;
position:relative;
}
.a1{
width:100px;
height:100px;
position:absolute;
background-image:url("image1.jpg");
top:0;
left:0;
background-size:100%;
}
.a1:hover{
width:200px;
height:200px;
animation:dd 1s;
}
.a2:hover{
width:200px;
height:200px;
animation:dd1 1s;
left:0;
top:0;
}
.a3:hover{
width:200px;
height:200px;
animation:dd2 1s;
left:0;
top:0;
}
.a4:hover{
width:200px;
height:200px;
animation:dd3 1s;
left:0;
top:0;
}
.a2{
width:100px;
height:100px;
position:absolute;
background-image:url("image2.jpg");
top:0;
left:100px;
background-size:100%;
}
.a3{
width:100px;
height:100px;
position:absolute;
background-image:url("image1.jpg");
top:100px;
left:0;
background-size:100%;
}
.a4{
width:100px;
height:100px;
position:absolute;
background-image:url("image4.jpg");
top:100px;
background-size:100%;
left:100px;
}
