Why does hover effect jump and not displaying image properly?

Question

I have the following HTML block.

 /* Set height of the grid so .sidenav can be 100% (adjust if needed) */
 .row.content {
   height: 1500px;
 }

 /* Set gray background color and 100% height */


 /* Set black background color, white text and some padding */
 footer {
   background-color: #555;
   color: white;
   padding: 15px;
 }

 .center-banner {
   height: 145px;
   background-repeat: no-repeat;
 }

 .work-box-container .work-box {
   background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
 }

 .work-box-container:hover .work-box {
   background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
 }

 /* On small screens, set height to 'auto' for sidenav and grid */
 @media screen and (max-width: 767px) {
   .sidenav {
     height: auto;
     padding: 15px;
   }

   .row.content {
     height: auto;
   }
 }

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
    <div class="container-fluid center-banner">
      <div class="row content">
        <div class="">
          <div class="work-box-container ">
            <div class="work-box center-banner">
              &nbsp;
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="container-fluid">
      <p>Footer Text</p>
    </footer>
  </body>

</html>

Hover effect is not working properly on first load.

I have checked here, but couldn't make it work.

use transition-delay: https://jsfiddle.net/Manju06/7djus6h0/2/ — Manjuboyz, May 04 '20 at 06:39

score 2 · Answer 1 · answered May 04 '20 at 06:52

use transition-delay on your hover, so that it will kind of animate the hover feature which looks smooth transition.

/* Set height of the grid so .sidenav can be 100% (adjust if needed) */

.row.content {
  height: 1500px;
}


/* Set gray background color and 100% height */


/* Set black background color, white text and some padding */

footer {
  background-color: #555;
  color: white;
  padding: 15px;
}

.center-banner {
  height: 145px;
  background-repeat: no-repeat;
}

.work-box-container .work-box {
  background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
}

.work-box-container:hover .work-box {
  background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
  transition-delay: 0.3s;
}


/* On small screens, set height to 'auto' for sidenav and grid */

@media screen and (max-width: 767px) {
  .sidenav {
    height: auto;
    padding: 15px;
  }
  .row.content {
    height: auto;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="container-fluid center-banner">
    <div class="row content">
      <div class="">
        <div class="work-box-container ">
          <div class="work-box center-banner">
            &nbsp;
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer class="container-fluid">
    <p>Footer Text</p>
  </footer>
</body>

</html>

score 2 · Answer 2 · answered May 04 '20 at 06:52

I got it to stop jumping by editing work-box-container and work-box like so

.work-box-container{
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png)
}

.work-box {visibility:hidden}

.work-box-container:hover  .work-box {
visibility:visible;
background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png)
}

See now:

 /* Set height of the grid so .sidenav can be 100% (adjust if needed) */
 .row.content {
   height: 1500px;
 }

 /* Set gray background color and 100% height */


 /* Set black background color, white text and some padding */
 footer {
   background-color: #555;
   color: white;
   padding: 15px;
 }

 .center-banner {
   height: 145px;
   background-repeat: no-repeat;
 }

.work-box-container{
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png)
}

.work-box {visibility:hidden}

.work-box-container:hover  .work-box {
visibility:visible;
background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png)
}


 /* On small screens, set height to 'auto' for sidenav and grid */
 @media screen and (max-width: 767px) {
   .sidenav {
     height: auto;
     padding: 15px;
   }

   .row.content {
     height: auto;
   }
 }

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
    <div class="container-fluid center-banner">
      <div class="row content">
        <div class="">
          <div class="work-box-container ">
            <div class="work-box center-banner">
              &nbsp;
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="container-fluid">
      <p>Footer Text</p>
    </footer>
  </body>

</html>

score 2 · Answer 3 · edited May 14 '20 at 15:06

Because the first time you hover the image it needs to get loaded. This takes some time, hence the effect.

You can solve this in a couple of ways:

One way is to use some sort of preloading

Another way (in my opinion, the preferred way) would be to just use one image and just change it:

/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
 .row.content {
   height: 1500px;
 }

 /* Set gray background color and 100% height */


 /* Set black background color, white text and some padding */
 footer {
   background-color: #555;
   color: white;
   padding: 15px;
 }

 .center-banner {
   height: 145px;
   background-repeat: no-repeat;
 }

 .work-box-container .work-box {
   background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
 }

 .work-box-container:hover .work-box {
   opacity: .7; /*NOTE: only opacity changed here, no second image needed*/
 }

 /* On small screens, set height to 'auto' for sidenav and grid */
 @media screen and (max-width: 767px) {
   .sidenav {
     height: auto;
     padding: 15px;
   }

   .row.content {
     height: auto;
   }
 }

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
    <div class="container-fluid center-banner">
      <div class="row content">
        <div class="">
          <div class="work-box-container ">
            <div class="work-box center-banner">
              &nbsp;
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="container-fluid">
      <p>Footer Text</p>
    </footer>
  </body>

</html>

score 1 · Accepted Answer · answered May 04 '20 at 07:08

If u want smooth transition,Try this:-

-The best way in css is to PRELOAD the image to avoid the glitch on first load.

/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
 .row.content {
   height: 1500px;
   
 }

 /* Set gray background color and 100% height */


 /* Set black background color, white text and some padding */
 footer {
   background-color: #555;
   color: white;
   padding: 15px;
 }

 .center-banner {
   height: 145px;
   background-repeat: no-repeat;

 }

 .work-box-container .work-box {
   background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
   transition:all 0.3s;
  
 }

 .work-box-container:hover .work-box{
   background-image: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
 

 }

body:after{
 display:none;
 content: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
}

 /* On small screens, set height to 'auto' for sidenav and grid */
 @media screen and (max-width: 767px) {
   .sidenav {
     height: auto;
     padding: 15px;
     
   }

   .row.content {
     height: auto;
   
   }
 }

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
    <div class="container-fluid center-banner">
      <div class="row content">
        <div class="">
          <div class="work-box-container ">
            <div class="work-box center-banner">
              &nbsp;
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="container-fluid">
      <p>Footer Text</p>
    </footer>
  </body>

</html>

score 1 · Answer 5 · answered May 04 '20 at 08:02

Best way to accomplish this is to use CSS sprite image technique. I have accomplished using it. Please adjust your image height and background-position to your need.

.work-box {
  background: transparent url(https://i.ibb.co/LN767Nr/sprite.png) -0 -0 no-repeat;
  height: 70px;
  width: 1334px;
}

.work-box:hover {
  background: transparent url(https://i.ibb.co/LN767Nr/sprite.png) -0 -70px no-repeat;
  height: 70px;
  width: 1334px;
}

<div class="work-box-container ">
  <div class="work-box">
  </div>
</div>

I have made youtube video too. If you like to watch. [Fix!! Background Image Flickering while hovering on first load. HTML/CSS] (https://www.youtube.com/watch?v=MjuAVfQImGE) — sunjeep, May 09 '20 at 06:35

Why does hover effect jump and not displaying image properly?

5 Answers5