How to write a caption under an image?

by

Figure and Figcaption tags:

<figure>
    <img src="https://stackoverflow.com/questions/10128950/image.jpg" alt="missing" />
    <figcaption>Caption goes here</figcaption>
</figure>

Gotta love HTML5.

See sample

#container {
    text-align: center;
}
a, figure {
    display: inline-block;
}
figcaption {
    margin: 10px 0 0 0;
    font-variant: small-caps;
    font-family: Arial;
    font-weight: bold;
    color: #bb3333;
}
figure {
    padding: 5px;
}
img:hover {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}
img {
    transition: transform 0.2s;
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    -o-transition: -o-transform 0.2s;
}
<div id="container">
    <a href="#">
        <figure>
            <img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
            <figcaption>First image</figcaption>
        </figure>
    </a>
    <a href="#">
        <figure>
             <img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
            <figcaption>Second image</figcaption>
        </figure>
    </a>
</div>

More Related Contents:

  1. How do you easily horizontally center a using CSS? [duplicate]
  2. Floating elements within a div, floats outside of div. Why?
  3. CSS Floating Divs At Variable Heights [duplicate]
  4. Footer at bottom of page or content, whichever is lower
  5. Is there a way to make a child DIV’s width wider than the parent DIV using CSS?
  6. Is float for layout bad? What should be used in its place?
  7. How to add a scrollbar to an HTML5 table?
  8. How to create equal height columns in pure CSS [duplicate]
  9. How do I right align div elements?
  10. override css for html5 form validation/required popup
  11. CSS values using HTML5 data attribute [duplicate]
  12. What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
  13. How does object-fit work with canvas element?
  14. How to make a element expand or contract to its parent container?
  15. scale HTML5 Video and break aspect ratio to fill whole site
  16. Disable zoom on a div, but allow zoom on the page (an alternate div)
  17. How would you make two s overlap?
  18. layer on top of PDF
  19. element not working in Internet Explorer 11
  20. Split Div Into 2 Columns Using CSS
  21. How to get Floating DIVs inside fixed-width DIV to continue horizontally?
  22. why is my content showing outside the div?
  23. How to get these two divs side-by-side?
  24. Why use an HTML5 semantic tag instead of div? [duplicate]
  25. How to display and hide a div with CSS?
  26. How to make responsive table [closed]
  27. Styling HTML and BODY selector to height: 100%; vs using 100vh
  28. Why adds extra top margin?
  29. Is there a way to style HTML5’s range control?
  30. Difference between and with text-align:center;?

Leave a Comment