Image With Overlapping Caption
This html/css combination creates a caption overlapping the picture. There is other styling added to the picture to make it display in an attractive way/ The key is using figure, and figcaption. Then set the figcaption to a negative number to bring the caption up overlaying the picture.
HTML
<figure>
<img src="images/sunset.jpg"
alt="Sunset in Florida">
<figcaption>Sunset in Florida</figcaption>
</figure>
CSS
figure {
border: thin silver solid;
display: flex;
flex-flow: column;
min-width: 300px;
width: 70%;
margin: auto;
border-radius:4px;
}
img {
width:100%;
border-radius:4px;
}
figcaption {
color: #fff;
text-shadow: 2px 2px #000;
font: italic smaller sans-serif;
padding: 3px;
text-align: center;
margin-top:-60px;
font-size:130%;
}
Example:
