Skip to main content

Split Image On Hover | Rustcode

Split-Image-On-Hover-html-and-css

"Split image on hover" is an effect on the image and you can apply this effect to product cards, profile cards, blog cards. This effect can be generated with the help of the SplittingJs Plugin. You can check out splitting effect on images using the splitting plugin. But we create this effect with the help of css properties.

In this animation, after hovering over the image, it will be split into four vertical slides and all the slides will fade one by one as you can see in the image. After removing the mouse from the image, all slides became restore.



You can learn other "effects on image" from our website. Apart from this, you can learn other animations related to web development.



01. HTML STRUCTURE

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

<body>

	main content.

</body>
</html>


02. HTML

We are also including an image in the blog card design. You can download that image from here.

<body>
  <div class="container">
    <div class="image">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="content">
      <h3>Split Image On Hover</h3>
    </div>
  </div>
</body>



03. CSS

body{
  margin: 0px;
  padding: 0px;
  background: #EE6352;
}
.container{
  width: 300px;
  height: 500px;
  position: relative;
  top: 66px;
  left: 10%;
  background-image: url(image.jpg);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.8);
}
.container:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  background: rgba(0, 0, 0, 0.8);
}
.container .image{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
}
.container .image span{
  width: 25%;
  height: 100%;
  background-image: url(image.jpg);
  transition: .6s ease-in-out;
}
.container .image span:nth-child(1){
  background-position: 0;
  transition-delay: 0s;
}
.container .image span:nth-child(2){
  background-position: 33.33%;
  transition-delay: 0.1s;
}
.container .image span:nth-child(3){
  background-position: 66.66%;
  transition-delay: 0.2s;
}
.container .image span:nth-child(4){
  background-position: 99.99%;
  transition-delay: 0.3s;
}
.container:hover .image > span{
  transform: translateY(-100%);
}
.content{
  justify-content: center;
  align-items: center;
  display: flex;
  color: white;
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  transform: translateY(100%);
}
.container:hover .content{
  transform: translateY(0%);
  transition: 1s;
  transition-delay: 0.1s;
}



04. 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.



05. SOURCE CODE

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





RELATED POST:

Comments