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 https://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='https://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

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
advertisement 2