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.
With HTML, CSS – you can simplify many of your web design works. Here’s another one to create simple Image caption with html and css.
Level: Beginner
.image{
border:5px solid #FFFFFF;
box-shadow:5px 5px 2px #333333;
width:300px;
height:190px;
padding:5px;
float:left;
margin-right:10px;
}
.image span{
font-family:Georgia;
font-size:14px;
font-weight:bold;
color:white;
text-align:center;
text-transform:uppercase;
}
Caption TextThis is simple yet powerful image caption for your html web design projects.