Change background image when hover not working

Question

I need to change background image on normal image hover. (Please don't suggest me to put this into normal background image)

I tried this way using z-index values but it's not working. Here is the fillde It needs to preload image so user don't see image loading at all.

img{
  width: 120px;
  position: relative;
    z-index: -1;
}

img:hover{
     background-image: url('https://i.ibb.co/bsQL6SK/media13-3-blue.png');
      background-position: center;
  background-repeat: no-repeat; 
  background-size: cover;
}

<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">

I'm curious what makes you think a background image will show through a image? It doesn't matter what you make the z-index. It's a ... wait for it ... background image. By definition it's behind the content, which happens to be an ... image. That's what "background" means. — gforce301, Jan 21 '20 at 07:19

score 5 · Answer 1 · answered Jan 21 '20 at 07:18

5

I checked both images and it appears that you need a bluescale image on hover. IF that's the case, you can use filter:

img {
  width: 120px;
}

img:hover {
  filter: sepia(100%) hue-rotate(190deg) saturate(500%);
}

Here's a demo: https://jsfiddle.net/lotusgodkk/x2ywL6he/5/

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

answered Jan 21 '20 at 07:18

K K

17,794
4
30
39

Blue means, I have a color code. So I need to use that one. – Janath Jan 21 '20 at 07:20
@Janath You can play around with the hue-rotate, saturate values to match the blue you need. – K K Jan 21 '20 at 07:20
Yes my mistake! I need exactly same color. #05adef – Janath Jan 21 '20 at 07:26
@Janath here's a guide to convert the color: https://stackoverflow.com/questions/29037023/how-to-calculate-required-hue-rotate-to-generate-specific-colour – K K Jan 21 '20 at 08:51

Dejan.S · Accepted Answer · 2020-01-21T08:15:19.373

1

For a pure css solution you would have to wrap your image in a div and have the background image on the before/after element. Something like this. I added a background color just to make it more clear what is happening. The solution also depends on what you really want, to me it's a bit unclear.

.container {
  width: 120px;
  position: relative;
  display: inline-block;
}

.container:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background-image: url('https://cdn.motor1.com/images/mgl/Rzxom/s3/lamborghini-sian-lead.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}

.container:hover:after {
  display: block;
}

.container img {
  width: 100%;
  height: 100%;
}

<div class="container">
  <img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">
</div>

EDIT

As you can see the fox news logo is that small but your image is larger, I added the green background to make it more clear (was transparent before). What you need to do is to edit so the logo is full size. Does it make sense?

edited Jan 21 '20 at 08:15

answered Jan 21 '20 at 07:26

Dejan.S

18,571
22
69
112

This is great! But background image is in wrong size? – Janath Jan 21 '20 at 07:28
let me check @Janath – Dejan.S Jan 21 '20 at 07:28
@Janath the code above is correct, your image is like two images, one with transparent background and one with the image in the center smaller. So if you change that it will work as expected. The same goes for your first image, the logo itself if not 120px. I changed the image to showcase it. – Dejan.S Jan 21 '20 at 07:38
Understood. Can't we hide the first image? – Janath Jan 21 '20 at 07:49
@Janath no, let me show you. You need to edit your images. – Dejan.S Jan 21 '20 at 08:13
Actually you were correct! Made those two images same height and width. Thanks a lot. – Janath Jan 22 '20 at 04:35

Amir Hossein · Answer 3 · 2020-01-21T07:27:33.393

you can use jquery hover event and change the image URL and change your z-index to 0 till user can hover it

<html>
<head>
 <title>title</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">
</body>
<style>
img{
  width: 120px;
  position: relative;
    z-index: 0;
}

img:hover{
     background-image: img[back];
      background-position: center;
  background-repeat: no-repeat; 
  background-size: cover;
}
</style>
<script>
$('img').hover(function (e) {
 if(e.type == 'mouseenter'){
  $(this).attr('src', 'https://i.ibb.co/bsQL6SK/media13-3-blue.png');
    }else{
        $(this).attr('src', 'https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png');
    }
});
</script>
</html>

score 0 · Answer 4 · answered Jan 21 '20 at 07:22

html

<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" onmouseover="this.src='https://i.ibb.co/bsQL6SK/media13-3-blue.png'" onmouseout="this.src='https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png'" alt="">

css

img{
  width: 120px;
}

working demo

let me know if you still face issue.

score 0 · Answer 5 · answered Jan 21 '20 at 07:25

You can achieve it by using onmouseover and onmouseout.

img{
  width: 120px;
  position: relative;
}

<img src='https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png' onmouseover="this.src='https://i.ibb.co/bsQL6SK/media13-3-blue.png';" onmouseout="this.src='https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png';" />

score 0 · Answer 6 · answered Jan 21 '20 at 07:26

You can use two image tags, hide one by default and toggle display of these on hover. Something like this?

const c = document.querySelector("#container");
const img1 = document.querySelector("#container .off-hover");
const img2 = document.querySelector("#container .on-hover");

c.addEventListener("mouseover", function(){
  img1.style.display = "none";
  img2.style.display = "inline-block";
})

c.addEventListener("mouseout", function(){
  img1.style.display = "inline-block";
  img2.style.display = "none";
})

img{
  width: 120px;
  position: relative;
}

.on-hover {
  display: none;
}

<div id="container">
  <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="off-hover" alt="">
  <img src="https://cdn2.downdetector.com/static/uploads/logo/Google-new_19.png" class="on-hover">
</div>

Can't do that way bcz im using wordpress – Janath Jan 21 '20 at 07:27 — Janath, Jan 21 '20 at 07:27

score 0 · Answer 7 · answered Jan 21 '20 at 07:29

I slightly do not get what you meant by (Please don't suggest me to put this into normal background image), pardon me if I misunderstood and do the exact thing you wanted to ignore.

Without using JavaScript and just with plain CSS I can see two approaches( I am a beginner)

Using both the image as background images in CSS and showing/hiding accordingly, but this is not what you wanted.
Using both the images in HTML with img tag, you can wrap it with tag or even a div.

But make sure both the image have same dimension

img{
  width: 200px;
  
}


a img:last-child {
  width: 200px;
  display: none;  
}
a:hover img:last-child {
  width: 200px;
  display: block;  
}
a:hover img:first-child {
  width: 200px;
  display: none;  
}

<a>
  <img  src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">
  <img  src="https://i.ibb.co/bsQL6SK/media13-3-blue.png" alt="">
  
</a>

Change background image when hover not working

7 Answers7