Sliding Image Effect on Mouse Hover

Written by @kerixa 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 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='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Nikhil 999+, bishalthakur
advertisement 2