Elegant CSS background image fade effect

Question

Elegant CSS background image fade effect

Having a small JS script that functions properly, but encountering an issue when quickly hovering over buttons causing the smooth transition effect to not work as desired. This abrupt change in image is quite unappealing.

Any help would be greatly appreciated.

var buttons = document.querySelectorAll("#section2_list li");
  var div_img = document.getElementById('div_img');
    
  buttons[0].addEventListener("mouseover", function() {
    div_img.style.backgroundImage = "url(https://picsum.photos/id/237/200/100)";          
  });
    
  buttons[1].addEventListener("mouseover", function() {
    div_img.style.backgroundImage = "url(https://picsum.photos/id/238/200/100)";          
  });

#div_img {
  width:  200px;
  height: 100px;
  transition: all 0.9s ease ;
 }

<ul id="section2_list">
  <li>one</li>
  <li>two</li>
</ul>

<div id="div_img">
</div>

javascript css css-animations css-transitions

Answer 1

Answer №1

The direct transition of the background-image property is not feasible since background-image isn't considered an animatable property.

However, you can overlay two images and animate the opacity of the top image to achieve the desired result:

var buttons     = document.querySelectorAll("#section2_list li");
var img_default = document.getElementById('img_default');
    
buttons[0].addEventListener("mouseover", function() {
  img_default.style.opacity = 0;
});
    
buttons[1].addEventListener("mouseover", function() {
  img_default.style.opacity = 1;
});

#div_img {
  width:  200px;
  height: 100px;
}

#div_img img {
  position: absolute;
}

 #img_default {
   transition: all 0.9s ease ;
 }

<ul id="section2_list">
  <li>one</li>
  <li>two</li>
</ul>

<div id="div_img">
  <img src="https://picsum.photos/id/237/200/100" />
  <img id="img_default" src="https://picsum.photos/id/238/200/100" />
</div>

Answer 2

The direct transition of the background-image property is not feasible since background-image isn't considered an animatable property.

However, you can overlay two images and animate the opacity of the top image to achieve the desired result:

var buttons     = document.querySelectorAll("#section2_list li");
var img_default = document.getElementById('img_default');
    
buttons[0].addEventListener("mouseover", function() {
  img_default.style.opacity = 0;
});
    
buttons[1].addEventListener("mouseover", function() {
  img_default.style.opacity = 1;
});

#div_img {
  width:  200px;
  height: 100px;
}

#div_img img {
  position: absolute;
}

 #img_default {
   transition: all 0.9s ease ;
 }

<ul id="section2_list">
  <li>one</li>
  <li>two</li>
</ul>

<div id="div_img">
  <img src="https://picsum.photos/id/237/200/100" />
  <img id="img_default" src="https://picsum.photos/id/238/200/100" />
</div>

Elegant CSS background image fade effect

Answer №1

Similar questions

The <div> tag fails to comply with the Display: inline CSS property

Can you verify the standard behavior when importing index.js using create-react-app?

Clicking the ASP button does not trigger the onclick event when a web user control is included on the webpage

Eliminate any unnecessary or hidden spacing on the left side of the options within an HTML select

Creating stunning light effects with camera flash using three.js

Components loading in Angular result in lat long being undefined in google map integration

Modifying JavaScript prototypes on the fly can lead to troublesome issues

Update the content of the page without reloading images

The Angular multi select tree feature seems to be malfunctioning

The margin-top property in CSS is not functioning as intended for a specific pixel value when applied to

Switching between components in Vue.js

Exploring the use of functions in the setup method of Vue 3

Saving a collection of React.js components in JavaScript to a specific location or storage for future use

Encountered an Error with My Protractor Script - Object Expected

Make sure to execute the fire directive only when ng-repeat has completed

Elevate your website with Bootstrap 4's compact floating icon menu

Implementing pagination in React: A step-by-step guide

Is there a way to show a progress bar that functions as the background for a table row

Tips for ensuring the security of your code in node.js

Is there a way to make Phpstorm identify and acknowledge the usage of NextJS pages?