It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
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.
<!-- 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>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!