HTML
<!DOCTYPE html>
<html>
<head>
<title>Direction Aware Hover Effects</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="box snake">
<img src="1.jpg">
<div class="overlay"><h2>Fire</h2></div>
</div>
<div class="box snake">
<img src="2.jpg">
<div class="overlay"><h2>Ice</h2></div>
</div>
<div class="box snake">
<img src="3.jpg">
<div class="overlay"><h2>Map</h2></div>
</div>
<div class="box snake">
<img src="4.jpg">
<div class="overlay"><h2>Moutains</h2></div>
</div>
<div class="box snake">
<img src="5.jpg">
<div class="overlay"><h2>Camera</h2></div>
</div>
<div class="box snake">
<img src="6.jpg">
<div class="overlay"><h2>Trees</h2></div>
</div>
<div class="box snake">
<img src="7.jpg">
<div class="overlay"><h2>Kite</h2></div>
</div>
<div class="box snake">
<img src="8.jpg">
<div class="overlay"><h2>City</h2></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://www.jqueryscript.net/gallery/Direction-aware-Gallery-Hover-Effect-jQuery-SnakeGallery.html"></script>
<script type="text/javascript">
$(".snake").snakeify({
speed: 300
});
</script>
</body>
</html>
CSS
body
{
margin: 0;
padding: 0;
background: #000;
}
.container
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 1020px;
}
.container .box
{
display: inline-block;
position: relative;
list-style: none;
width: 250px;
height: 250px;
}
.container .box img
{
width: 100%;
}
.container .box.snake
{
position: relative;
overflow: hidden;
}
.overlay
{
position: absolute;
text-align: center;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
}
.overlay h2
{
position: absolute;
margin: 0;
padding: 0;
top: 50%;
transform: translateY(-50%);
color: #fff;
text-transform: uppercase;
width: 100%;
font-family: sans-serif;
}
