Trouble with changing background image on hover

Question

Trouble with changing background image on hover

Is there a way to change the background image when hovering over a normal image without altering the original background image?

I attempted to achieve this using z-index values, but unfortunately it did not work as expected. You can view my attempt on this fiddle. It is important that the new image preloads so that users do not experience any delay in loading.

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="">

javascript jquery html css

Answer 1

Answer №1

After reviewing both images, it seems that a bluescale image is needed for hover effect. If this is the case, you can achieve this by using the following CSS:

img {
  width: 120px;
}

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

Feel free to check out this demo: https://jsfiddle.net/lotusgodkk/x2ywL6he/5/

For more information, refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Answer 2

After reviewing both images, it seems that a bluescale image is needed for hover effect. If this is the case, you can achieve this by using the following CSS:

img {
  width: 120px;
}

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

Feel free to check out this demo: https://jsfiddle.net/lotusgodkk/x2ywL6he/5/

For more information, refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Answer 3

Answer №2

If you're seeking a purely css-based solution, one approach is to wrap your image in a div and set the background image on the before/after element. Here's a sample code snippet demonstrating this technique. I included a background color for clarity on how it works. Keep in mind that the effectiveness of this solution may vary depending on your specific requirements.

.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
https://i.sstatic.net/LvXzO.png

Upon closer inspection, you'll notice that the fox news logo appears smaller compared to your larger image. The addition of the green background helps highlight this disparity. To resolve this discrepancy, adjust the sizing so the logo fills the allocated space. Does this explanation make sense?

Answer 4

If you're seeking a purely css-based solution, one approach is to wrap your image in a div and set the background image on the before/after element. Here's a sample code snippet demonstrating this technique. I included a background color for clarity on how it works. Keep in mind that the effectiveness of this solution may vary depending on your specific requirements.

.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
https://i.sstatic.net/LvXzO.png

Upon closer inspection, you'll notice that the fox news logo appears smaller compared to your larger image. The addition of the green background helps highlight this disparity. To resolve this discrepancy, adjust the sizing so the logo fills the allocated space. Does this explanation make sense?

Answer 5

Answer №3

Website Design

<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 Styling

img{
  width: 120px;
}

Live Demo Example

If you encounter any further problems, please let me know.

Answer 6

Website Design

<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 Styling

img{
  width: 120px;
}

Live Demo Example

If you encounter any further problems, please let me know.

Answer 7

Answer №4

To achieve this effect, you can utilize the onmouseover and onmouseout events.

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';" />

Answer 8

To achieve this effect, you can utilize the onmouseover and onmouseout events.

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';" />

Answer 9

Answer №5

To achieve the desired effect, you can utilize two image tags and implement a hover toggle function. This way, one image is displayed by default while the other appears only on hover. Here's an example code snippet:

const container = document.querySelector("#image-container");
const imgDefault = document.querySelector("#image-container .default");
const imgHover = document.querySelector("#image-container .hover");

container.addEventListener("mouseover", function(){
  imgDefault.style.display = "none";
  imgHover.style.display = "inline-block";
})

container.addEventListener("mouseout", function(){
  imgDefault.style.display = "inline-block";
  imgHover.style.display = "none";
})

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

.hover {
  display: none;
}

<div id="image-container">
  <img src="https://www.example.com/image-default.png" class="default" alt="">
  <img src="https://www.example.com/image-hover.png" class="hover">
</div>

Answer 10

To achieve the desired effect, you can utilize two image tags and implement a hover toggle function. This way, one image is displayed by default while the other appears only on hover. Here's an example code snippet:

const container = document.querySelector("#image-container");
const imgDefault = document.querySelector("#image-container .default");
const imgHover = document.querySelector("#image-container .hover");

container.addEventListener("mouseover", function(){
  imgDefault.style.display = "none";
  imgHover.style.display = "inline-block";
})

container.addEventListener("mouseout", function(){
  imgDefault.style.display = "inline-block";
  imgHover.style.display = "none";
})

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

.hover {
  display: none;
}

<div id="image-container">
  <img src="https://www.example.com/image-default.png" class="default" alt="">
  <img src="https://www.example.com/image-hover.png" class="hover">
</div>

Answer 11

Answer №6

Utilize the jQuery hover event to dynamically change the image URL and adjust the z-index to 0 while the user hovers over 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>

Answer 12

Utilize the jQuery hover event to dynamically change the image URL and adjust the z-index to 0 while the user hovers over 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>

Answer 13

Answer №7

I am a bit unclear on what you meant by (Please refrain from suggesting that I use a normal background image), please excuse me if I misunderstood and unintentionally did the opposite of what you were requesting.

As a beginner, I can think of two approaches using just plain CSS without JavaScript:

Utilizing both images as background images in CSS and toggling their visibility accordingly, although this may not align with your preferences.
Embedding both images in HTML using the img tag, where you can wrap them within an anchor tag or even a div container.

Ensure that both images have the same dimensions.

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>

Answer 14

I am a bit unclear on what you meant by (Please refrain from suggesting that I use a normal background image), please excuse me if I misunderstood and unintentionally did the opposite of what you were requesting.

As a beginner, I can think of two approaches using just plain CSS without JavaScript:

Utilizing both images as background images in CSS and toggling their visibility accordingly, although this may not align with your preferences.
Embedding both images in HTML using the img tag, where you can wrap them within an anchor tag or even a div container.

Ensure that both images have the same dimensions.

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>

Trouble with changing background image on hover

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Using the EJS if-else statement to iterate through an array of items

Steps to capture cell click events in a Kendo grid

What is the optimal number of keywords to include in the META keywords tag?

what is the best method to schedule tasks at a specific time in node-schedule?

What is the significance of the .jpg?t= in the URL?

Refresh the page on the same tab after making an AJAX request

Issue with Highcharts: The useHTML flag is not functioning properly when trying to render labels

Combining 2 objects with changing properties using jQuery

Error: Attempted to bootstrap Angular multiple times

Is there a method available for troubleshooting unsuccessful AJAX requests? Why might my request be failing?

The function chrome.cookies.get is returning undefined or causing an error to be thrown

The process of adding information to a table through ajax is not functioning properly

I would like to verify the individual listed in the table to confirm their attendance

Exploring the various approaches for accessing nodes in JavaScript and jQuery

Algorithm for detecting collisions in Javascript

Submitting a specific form when a change occurs in CodeIgniter

How can I stop an element from shifting when hovering over a border?

Issues have been reported with the SVG filter URL functionality in Angular 4

Restart jQuery animation upon modal closure

What is the method to retrieve the base host in AngularJS?