Sliding Image Effect on Mouse Hover
Written by 30 March 2021
The following code contains a beautiful style for an image hover mode. Using these special styles will make your website more beautiful and increase the number of visitors to your website. In this style, two images overlap and are placed on each other. Normally an image that is placed at top is visible. But when the mouse pointer hovers it, a narrow and vertical rectangle appears and shows the other image where the mouse is located. Moving the mouse on this image causes the back image to appear and fade which creates a lot of beauty.
Code Snippet:
<!-- this script is provided by http://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Pacifico);
body {
background: #111b25;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
color: #fff;
padding: 0;
margin: 0;
}
h1 {
font-family: "Pacifico";
}
.info {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
a {
color: beige;
}
.w {
margin: 0 auto;
white-space: nowrap;
max-width: 1200px;
width: 100%;
height: 600px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
background: rgba(66, 66, 66, 0.5) url("https://www.htmlbestcodes.com/files/slider-c1.jpg") repeat fixed;
background-position: 50% 100%;
background-size: cover;
position: relative;
z-index: 5;
font-size: 0;
}
.i {
width: 40px;
height: 100%;
display: inline-block;
position: relative;
z-index: 4;
padding: 2px;
transition: all 1.3s ease-in-out;
background: rgba(66, 66, 66, 0.5) url("https://www.htmlbestcodes.com/files/silder-c2.jpg") repeat fixed;
background-size: cover;
background-position: 50% 100%;
border-radius: 0%;
}
.i:hover {
transition: all 0s linear;
opacity: 0;
}
.h {
display: block;
position: absolute;
z-index: 2;
width: 100%;
text-align: center;
top: 35px;
font-size: 40px;
color: beige;
text-shadow: 0 5px 17px rgba(87, 87, 80, 0.85);
}
</style>
<div class="w">
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="h">
<h1>HTML Best Codes</h1>
</div>
</div><a target='_blank' href='http://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!