Image hover caption sliding effect

Some time ago, I wrote an article about the Image caption hover effect. where I covered the basics about the Image caption hover effect. here, In this article, we are going to explore the — Image hover caption sliding effect. and I’m going to show, how to create the different kinds of Image hover sliding caption effects.

Image hover caption effects are a very nice way to represent the content over the images. and these days we can see many developers implement these effects in their websites.

Before digging the code, Let me explain the basic theme about the Image hover caption sliding effect, whenever the visitor hovers over the image, we see the sliding content moving over the image.

Let’s start coding

1. First, consider a parent div element with id:wrapper and Inside that consider a 8 child div elements with class:image-container.
2. Inside each child div element, consider an image and one more sub-child div element and each sub-child div element has two different classes, in which one class being the same for all sub-child div elements and other class being different for all sub-child div elements.
3. Now style the parent div element, by setting width:1080px; and margin:50px auto;. so that the content lies in the middle of the browser.

   #wrapper{
     width: 1080px;
     margin: 50px auto;
   }
   

4. Now style the all child div elements, by setting its width:250px;, height:200px;, float:left; and position:relative; so that we get the control over sub-child div elements.

   .image-container{
     width: 250px;
     height: 200px;
     position: relative;
     cursor: pointer;
     float: left;
     margin: 10px;
   }
   

5. Now style the image, by setting its width and height equal to 100% and position:absolute; so that it lies within the parent div element.

   .image-container img{
     width: 100%;
     height: 100%;
     position: absolute;
   }
   

6. Now style the sub-child div elements, here I’m going to style the first class that is class:image-caption which is same for all sub-child div elements and another class is different for all sub-child div elements. which is used for sliding caption effect.

   .image-container .image-caption {
     width: 100%;
     height: 100%;
     position: absolute;
     background: rgba(0, 0, 0, 0.6);
     font-family: cursive;
     text-align: center;
   }
   

For achieving the sliding caption effect, we have to target the sub-child div elements, second class. As I mentioned above each sub-child div element has two different classes, in which one class being the same for all sub-child div elements and other class being different for all sub-child div elements.

Left sliding caption effect

1. To achieve the Left sliding caption effect, style the sub-child div element’s second class that is class:caption-1, Now set the sliding caption to left: -260px; from its initial position and then whenever we hover over the .image-container it should return back to its initial position, to achieve that set the left:0; and use the transition effect for the sliding caption.

   .image-container .caption-1 {
     left: -260px;
     transition: all 0.5s;
   }
   
   .image-container:hover .caption-1 {
     left: 0;
     transition: all 0.5s;
   }
   

Top sliding caption effect

1. To achieve the Top sliding caption effect, style the sub-child div element’s second class that is class:caption-2, Now set the sliding caption to top:-210px; from its initial position and then whenever we hover over the .image-container it should return to its initial position. to achieve that set the top:0; and use the transition effect for the sliding caption.

   .image-container .caption-2 {
     top: -210px;
     transition: all 0.5s;
   }
   
   .image-container:hover .caption-2 {
     top: 0;
     transition: all 0.5s;
   }
   

bottom sliding caption effect

1. To achieve the Bottom sliding caption effect, style the sub-child div element’s second class that is class:caption-3, Now set the sliding caption to bottom: -210px; from its initial position and then whenever we hover over the .image-container it should return to its initial position. to achieve that set the bottom:0; and use the transition effect for the sliding caption.

   .image-container .caption-3 {
     bottom: -210px;
     transition: all 0.5s;
   }
   
   .image-container:hover .caption-3 {
     bottom: 0;
     transition: all 0.5s;
   }
   

Right sliding caption effect

1. To achieve the Right sliding caption effect, style the sub-child div element’s second class that is class:caption-4, Now set the sliding caption to right: -260px; from its initial position and then whenever we hover over the .image-container it should return to its initial position. to achieve that set the right:0; and use the transition effect for the sliding caption.

   .image-container .caption-4 {
     right: -260px;
     transition: all 0.5s;
   }
   
   .image-container:hover .caption-4 {
     right: 0;
     transition: all 0.5s;
   }
   

Top-left sliding caption effect

1. To achieve the Top-left sliding caption effect, style the sub-child div element’s second class that is class:caption-5, Now set the sliding caption to top: -210px; left: -260px; from its initial position and then whenever we hover over the .image-container it should return to its initial position. to achieve that set the top: 0; left: 0; and use the transition effect for the sliding caption.

   .image-container .caption-5 {
     left: -260px;
     top: -210px;
     transition: all 0.5s;
   }
   
   .image-container:hover .caption-5 {
     left: 0;
     top: 0;
     transition: all 0.5s;
   }
   

Top-right sliding caption effect

1. To achieve the Top-right sliding caption effect, style the sub-child div element’s second class that is class:caption-6, Now set the sliding caption to top: -210px; right: -260px; from its initial position and then whenever we hover over the .image-container it should return to its initial position. to achieve that set the top: 0; right: 0; and use the transition effect for the sliding caption.

   .image-container .caption-6 {
     right: -260px;
     top: -210px;
     transition: all 0.5s;
   }
   
   .image-container:hover .caption-6 {
     right: 0;
     top: 0;
     transition: all 0.5s;
   }
   

Bottom-left sliding caption effect

1. To achieve the Bottom-left sliding caption effect, style the sub-child div element’s second class that is class:caption-7, Now set the sliding caption to bottom: -210px; left: -260px; from its initial position and then whenever we hover over the .image-container it should return to its initial position. to achieve that set the bottom: 0; left: 0; and use the transition effect for the sliding caption.

   .image-container .caption-7 {
     left: -260px;
     bottom: -210px;
     transition: all 0.5s;
   }
   
   .image-container:hover .caption-7 {
     left: 0;
     bottom: 0;
     transition: all 0.5s;
   }
   

Bottom-right sliding caption effect

1. To achieve the Bottom-right sliding caption effect, style the sub-child div element’s second class that is class:caption-8, Now set the sliding caption to bottom: -210px; right: -260px; from its initial position and then whenever we hover over the .image-container it should return to its initial position. to achieve that set the bottom: 0; right: 0; and use the transition effect for the sliding caption.

   .image-container .caption-8 {
     right: -260px;
     bottom: -210px;
     transition: all 0.5s;
   }
   
   .image-container:hover .caption-8 {
     right: 0;
     bottom: 0;
     transition: all 0.5s;
   }
   

This is how the sliding caption effect works without overflow:hidden; property, so set the overflow:hidden; to .image-container. so that it hides the content which is flowing out of the image-continer.

.image-container{
   over-flow: hidden;
}

See the Pen image hover caption sliding effect by rajeshdn (@cool_lazyboy) on CodePen.0

• Author
• Recent Posts

Rajesh DN

Rajesh Dn is a UI developer at TCS. he likes exploring new technologies and likes hanging with friends and surfing youtube in his spare time.

Latest posts by Rajesh DN (see all)

• CSS Speech bubbles - July 20, 2020
• Simple Button Hover effect – Border Hover effect - October 9, 2017
• Glowing Social icons hover effect - September 11, 2017