How to smoothly transition CSS background images using jQuery?

How to smoothly transition CSS background images using jQuery?

Last Updated : 12 May, 2021

In this article, we will learn to implement a smooth transition of background images using jQuery and CSS.

Approach:

First, we add a transparent background image using the background-image property in CSS in the style tag.
```
background-image: url(white.jpg);
```
For the transition background image, we use the transition property in CSS and add a transition to the background image in the style tag.
```
transition: background-image 3s;
```
In the script section, we create an image object and add the source of the image that needs to be transitioned. On image load, we call a function that adds background-image using the css() method in JQuery.

JavaScript Code snippet:

 var image = new Image();
// Image for transition
image.src = "geek.png";
image.onload = function () {
  $(".element").css("background-image", 
                    "url('" + image.src + "')");
};

Example:Below is the full implementation of the above approach.

HTML

<!DOCTYPE html>
<html>
  <head>
    <!-- JQuery CDN -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <style>
      body {
        width: 100%;
        height: 100%;
      }
      .element {
        background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20210507170406/white.jpg);
        width: 60%;
        height: 100%;
        padding: 200px;
        background-repeat: no-repeat;
        transition: background-image 3s;
      }
    </style>
  </head>

  <body>
    <div class="element"></div>

    <script>
      var image = new Image();

      // Image for transition
      image.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20210507170600/gfg1-300x67.png";
      image.onload = function () {
        $(".element").css("background-image", 
                          "url('" + image.src + "')");
      };
    </script>
  </body>
</html>

Output:

Smooth transition

How to smoothly transition CSS background images using jQuery?

N

nikhilchhipa9

Improve

Article Tags :

Similar Reads

How to Set background Image using jQuery css() Method ?

This article will show you how to set the background image using jQuery. To set the background image, we are using the jQuery css() method. jQuery css() MethodThis method sets/returns one or more style properties for the specified elements. Syntax: Return a CSS property:$(selector).css("propertyname

How to change the background image using jQuery ?

To change the background image using jQuery, you can use the jQuery CSS() method. For this, the whole property value is specified using the url() functional notation. Approach: Suppose we have an image URL stored in a variable and then use css() method to change the value of background image. Below

How to change the position of background image using jQuery ?

In this article, we will see how to change the position of the background image using jQuery. To change the position of the background image, we will use css() method with float property.Â The css() method is used to change the style property of the selected element. The float property is used to cha

How to Change Background Images on Scroll using CSS?

Background images are crucial in web development, significantly enhancing the user experience. Using background images on a webpage can effectively showcase a brand or convey specific messages. Here, we will explore how to change background images on scroll using CSS. ApproachThe HTML includes a spa

How to Add filter to the background image using CSS?

Adding filters to background images using CSS allows you to apply visual effects like blur, grayscale, brightness adjustment, and more without modifying the actual image file. CSS provides a set of filter functions that can be applied to elements with background images. This approach enhances design