Skip to main content

Archive

Show more

Swap Image On Hover | HTML, CSS And jQuery

by Rustcode
swap-image-on-hover-html-css-jquery

Swap Image On Hover Using HTML, CSS And JQuery

The “swap image on hover” effect is commonly used in eCommerce websites because we want to see different views and colors of the product. Similarly, in this animation, we will take two images of the product and they will change on hover.

If we briefly describe this animation, we can say that with the help of Jquery and Css we are replacing one image with another. This effect will only be triggered when the mouse is moved over the image. And as soon as you move the mouse, it will return to the previous one.

If you want to know other effects that can be applied to the image, you should definitely visit this website "Effects on Image Playlist"

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Swap Image On Hover</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<!DOCTYPE html>
<html>
<head>
<title>Swap Image On Hover</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="style.css" rel="stylesheet" type="text/css"/>
  <script src="script.js" type="text/javascript"></script>
</head>

<body>

  <div class="container">
    <img src="image1.jpg" data-img="image2.jpg" class="swim" />
  </div>

</body>
</html>



03. CSS

body{
  background: #eee;
  display: flex;
  height: calc(100vh - 480px);
  align-items: center;
  justify-content: center;
}
.container{
  cursor: pointer;
  position: relative;
}
.container img{
  position: absolute;
  height: 480px;
  width: 350px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px 0px;
}
.container > img:first-child{
  opacity: 0;
  transition: all .8s;
  z-index: 1;
}

.container > img:last-child{
  opacity: 1;
  transition: all .8s;
  z-index: 1;
}

.container:hover > img:first-child{
  opacity: 1;
  transition: all .8s;
}

.container:hover > img:last-child{
  opacity: 0;
  transition: all .8s;
}



04. JAVASCRIPT

$(document).ready(function(){
  $('.swim').each(function(){
    var dataImage = $(this).data("img");
    var dataClass = $(this).attr("class");
    $(this).after('<img src="' + dataImage + '" class= "' + dataClass + '"/>');
  });
});


05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




06. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment