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.


    <img src="images/sunset.jpg"
         alt="Sunset in Florida">
    <figcaption>Sunset in Florida</figcaption>


figure {
    border: thin silver solid;
    display: flex;
    flex-flow: column;
    min-width: 300px;
    width: 70%;
    margin: auto;

img {

figcaption {
    color: #fff;
    text-shadow: 2px 2px #000;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;


Sunset in Florida
Sunset in Florida
Copyright © Website Development | Disclaimer | Privacy Policy | Terms of Use