When you upload an image to a server, it has properties like URL, title, caption, alt text and description. However, you can only see the image and caption on the published website. Generally, webmasters focus to showcase the image and forget the importance of caption. In this article we will show you how to create CSS image caption effects to showcase your image captions in an attractive manner.
Learn WordPress: Check out 500+ free WordPress tutorials.
CSS Image Captions Effect
The widgets will look like below.
Image Caption - Slide Down Style
Image Caption - Horizontal Split Style
Image Caption - Vertical Split Style
Image Caption - Slide Up Style
4 Different Styles
As you can see in the demo, there are four different effects you can create the image caption.
- Slide down
- Horizontal split
- Vertical split
- Slide up
HTML for Image Caption Effects
Let us first explain the HTML part with slide down effect, so that it will be easy to understand the CSS part. Below is the HTML for slide down effect.
<div class="common slidedown"> <img src="https://img.webnots.com/2016/01/sample-image.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div>
It has the following CSS classes:
- common – this is the general style set applicable for all four effects.
- slidedown – this is the style set for creating slide down effect. For other three effects we have used split-horiz, split-vert and slideup CSS classes. You can just replace this class to get the different effect.
- pic-caption – this is the class defines the effect related to image caption.
Note: Image size 300×300 px is used so that there are no additional adjustments required on mobile devices.
CSS for Image Caption Effects
In the above HTML code we have used “imagecaption.css” file to import all required CSS from an external file. Below is the CSS for slide down effect and you can download the complete CSS and HTML files by clicking on the below button.
/* General Style */
.common{
margin: 0;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden;
}
.common::before, .common::after{
content: '';
width: 100%;
height: 100%;
background: black;
position: absolute;
opacity: 0.3;
top: 0;
left 0;
-moz-transform: translate3d(0, -100%, 0);
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.pic-caption {
position: absolute;
text-align: center;
background: lightyellow;
z-index: 999;
width: 100%;
max-height: 100%;
overflow: hidden;
top: 50%;
-webkit-transform: translate3d(-100%, -50%, 0);
transform: translate3d(-100%, -50%, 0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
line-height: 30px;
font-size: 16px;
}
.pic-caption a{
text-decoration: none;
}
img {
display: block;
}
/* Slidedown Caption */
.slidedown:hover::before{
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slidedown:hover .pic-caption{
opacity: 1;
-moz-transform: translate3d(0, -50%, 0);
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
- Under general style section, we have created inline blocks for the showing each block of image.
- Pseudo elements (::before and ::after) are used to create the slider effect on the image.
- You can see the caption only on hover and is invisible when the page loads.
- The “pic-caption” class assigns lightyellow color for caption and loads the caption 50% from the top of the image position.
- CSS transition and transform helps to slide the caption from left to right of the image.
- The section under “Slide down caption” helps to show the slider and then the caption using CSS transform and transition properties.
Usage on Your Webpage
Download the zip file “Image Caption Effects.zip” containing the complete HTML and CSS codes for all four styles of image caption effects.
The zip archive has two files “imagecaption.css” and “Imagecaption.html”.
- Upload the CSS file in the same folder of your HTML or provide the complete link to the CSS file in HTML code.
- You can also insert the CSS within the head section of the HTML using <style>…</style> tags.
- Embed the HTML code between the body tags of your webpage.
- You can only use the HTML div section relevant for the particular effect.
The complete HTML for all four styles should look like below:
<!DOCTYPE html> <html> <head> <title>CSS Image Caption Effects</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="imagecaption.css"> </head> <body> <div class="common slidedown"> <img src="https://img.webnots.com/2016/01/sample-image.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div> <div class="common split-horiz"> <img src="https://img.webnots.com/2016/01/sample-image.jpg" width="300" height="300" alt="Image Caption Split Horizontal"> <div class="pic-caption">Horizontl Split Style Caption.</div> </div> <div class="common split-vert"> <img src="https://img.webnots.com/2016/01/sample-image.jpg" width="300" height="300" alt="Image Caption Split Vertical"> <div class="pic-caption">Vertical Split Style Caption</div> </div> <div class="common slideup"> <img src="https://img.webnots.com/2016/01/sample-image.jpg" width="300" height="300" alt="Image Caption Slideup"> <div class="pic-caption">Image Slide Up Caption</div> </div> </body> </html>
Leave a Reply
Your email is safe with us.