Image Caption
Almost all famous news websites always display images with a caption box that is aligned at the bottom of the same image. These image captions provide extra information about the images displayed on the web pages. You can quickly add these types caption over image in your images using CSS and HTML.
Caption on bottom side of image
The following CSS code display caption text below the image.
Source Code
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.imageHolder {
position: relative;
width: 285px;
height: 175px;
}
.imageHolder .caption {
position: absolute;
width: 283px;
height: 50px;
bottom: 0px;
left: 0px;
color: #ffffff;
background: green;
text-align:center;
font-weight:bold;
opacity:0.7;
}
</style>
</head>
<body>
<div class="imageHolder">
<img src="img/caption4.jpg" alt="" />
<div class="caption"><br>Caption goes here</div>
</div>
</body>
</html>
Caption on top side of the image
The following CSS code shows the caption overlay on the top side of the image
Source Code
<style type="text/css">
.imageHolder {
position: relative;
width: 285px;
height: 175px;
}
.imageHolder .caption {
position: absolute;
width: 283px;
height: 50px;
top: 0px;
left: 0px;
color: black;
background: lime;
text-align:center;
font-weight:bold;
opacity:0.7;
}
</style>
You can use the example-1 HTML tag with the above CSS code.
Position text over an image
Source Code
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.imageHolder {
position: relative;
width: 285px;
height: 175px;
}
.imageHolder .caption {
position: absolute;
width: 283px;
height: 50px;
top: 40%;
left: 0px;
color: #ffffff;
background: green;
text-align:center;
font-weight:bold;
opacity:0.7;
}
</style>
</head>
<body>
<div class="imageHolder">
<img src="img/caption4.jpg" alt="" />
<div class="caption"><br>Caption goes here</div>
</div>
</body>
</html>
Caption on Right side of the image
Source Code
.imageHolder {
position: relative;
width: 285px;
height: 175px;
}
.imageHolder .caption {
position: absolute;
width: 70px;
height: 175px;
top: 0px;
right: 0px;
color: #ffffff;
background: green;
text-align:center;
font-weight:bold;
opacity:0.7;
}
You can use the example-1 HTML tag with the above CSS code.
Caption on Left side of the image
Source Code
<style type="text/css">
.imageHolder {
position: relative;
width: 285px;
height: 175px;
}
.imageHolder .caption {
position: absolute;
width: 70px;
height: 177px;
top: 0px;
left: 0px;
color: black;
background: lime;
text-align:center;
font-weight:bold;
opacity:0.7;
}
</style>
You can use the example-1 HTML tag with the above CSS code.
Caption display only on text width
Source Code
<style type="text/css">
.imageHolder {
position: relative;
width: 285px;
height: 175px;
}
.imageHolder .caption {
position: absolute;
height: 50px;
bottom: 0px;
left: 0px;
color: #ffffff;
background: green;
text-align:center;
font-weight:bold;
opacity:0.7;
}
</style>
You can use the example-1 HTML tag with the above CSS code.
Image caption hover effects
The following code shows how to display caption while mouse hover the image.
Move your mouse over the image.
Source Code
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.imageHolder {
position: relative;
width: 285px;
height: 175px;
}
.imageHolder .caption {
opacity: 0;
position: absolute;
height:50px;
width: 283px;
bottom: 0px;
left: 0px;
padding: 2px 0px;
color: black;
background: lime;
text-align: center;
font-weight:bold;
}
.imageHolder:hover .caption {
opacity: 0.7;
}
</style>
</head>
<body>
<div class="imageHolder">
<img src="img/caption4.jpg" alt="" />
<div class="caption"><br>Caption goes here</div>
</div>
</body>
</html>
Full image overlay caption
Move your mouse over the image
Source Code
<style type="text/css">
.imageHolder {
position: relative;
width: 285px;
height: 175px;
}
.imageHolder .caption {
opacity: 0;
position: absolute;
height:175px;
width: 283px;
top: 0px;
left: 0px;
padding: 2px 0px;
color: black;
background: lime;
text-align: center;
font-weight:bold;
}
.imageHolder:hover .caption {
opacity: 0.7;
}
</style>
You can use the above example HTML code with this CSS code
Image caption with Link
The following CSS code display an image caption with a link inside the caption area.
Source Code
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.imageHolder {
position: relative;
width: 285px;
height: 175px;
}
.imageHolder .caption {
position: absolute;
width: 283px;
height: 50px;
bottom: 0px;
left: 0px;
color: #ffffff;
background: green;
text-align:center;
font-weight:bold;
opacity:0.7;
}
</style>
</head>
<body>
<div class="imageHolder">
<img src="img/caption4.jpg" alt="" />
<a href="http://www.corelangs.com" class="caption"><br>You Link here</a>
</div>
</body>
</html>