How to change the image on mouse hover immediately using css

Question

Hi i am having black and white images on my website on mouse hover need to change the image immediately.But it is taking time to change the image for the first time later on it is changing the images immediately.

Code:

 <div id="content">
    <img src="<?php echo base_url();?>theme/images/expertise/1.png" class="images1" onmouseover="this.src='<?php echo base_url();?>theme/images/1.png'" onmouseout="this.src='<?php echo base_url();?>theme/images/expertise/1.png'" />
    <img src="<?php echo base_url();?>theme/images/expertise/2.png" class="images2" onmouseover="this.src='<?php echo base_url();?>theme/images/2.png'" onmouseout="this.src='<?php echo base_url();?>theme/images/expertise/2.png'"/>
</div>

Css

#content {
  margin-top: 21px;
  margin-bottom: 57px;
 }
.images1,.images2 {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
 }
 .images1:hover,
 .images1:focus,
 .images1:active,
 .images2:hover,
 .images2:focus,
 .images2:active
  {
    -webkit-transform: scale(1.1);
     transform: scale(1.1);
   }

What's the image size? Is it too heavy to load and thats why taking lot of time? — Milan Chheda, May 17 '17 at 11:13
You need to prefetch the hover image. See: http://stackoverflow.com/questions/3646036/javascript-preloading-images — ハセン, May 17 '17 at 11:16
You need to preload images before hover effect if you want to avoid waiting. — Itsmeromka, May 17 '17 at 11:16
@ハセン there is no solutions in the link which you shared — user8001297, May 17 '17 at 11:18
Yes there is. You call this function in javascript and pass it the url of your hover images so they are preloaded. — ハセン, May 17 '17 at 11:19

score 0 · Answer 1 · edited May 23 '17 at 10:31

0

The easiest way is to create an image holding both pictures in one file. then you use a div with the desired size and the image as background.

you define the position so, that the first picture is visible and the other not.

if you hover, you change the position, so the other picture gets shown.

Here is a relatively similar question: CSS hover image position change

edited May 23 '17 at 10:31

Community

1
1

answered May 17 '17 at 11:31

helle

11,183
9
56
83

score 0 · Answer 2 · answered May 17 '17 at 11:34

You will have to adjust the URL's, but let me know if this works for you.

.images1,.images2 {
    display: block;
    vertical-align: middle;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transition: transform .3s ease;
    will-change: transform;
    margin-bottom: 20px;
 }
 .images1:hover,
 .images1:focus,
 .images1:active,
 .images2:hover,
 .images2:focus,
 .images2:active
  {
     transform: scale(1.1);
  }

<div id="content">
    <img src="http://placehold.it/350x100/ffffff" class="images1" onmouseover="this.src='http://placehold.it/350x100/003500'" onmouseout="this.src='http://placehold.it/350x100/ffffff'" />
    <img src="http://placehold.it/350x100/ffffff" class="images2" onmouseover="this.src='http://placehold.it/350x100/003500'" onmouseout="this.src='http://placehold.it/350x100/ffffff'"/>
</div>

No it is displaying the same only as previous – user8001297 May 17 '17 at 11:43 — user8001297, May 17 '17 at 11:43

score 0 · Accepted Answer · answered May 18 '17 at 09:17

Added the preloader script in header.php file it worked

<script type="text/javascript">
 function preload(arrayOfImages) {
var ImageContainer ="<div style='display:none;'>";
$(arrayOfImages).each(function(){
 ImageContainer += "<img src='"+this+"''>";
});

ImageContainer +="</div>";
$(".ourexpertise").append(ImageContainer);

}
// Usage:
var arrayOfImages =[
'http://www.example.com/theme/images/1.png',
'http://www.example.com/theme/images/2.png',
'http://www.example.com/theme/images/3.png'
 ];
 $(document).ready(function(){
preload(arrayOfImages);
});
</script>

How to change the image on mouse hover immediately using css

3 Answers3