Skip to content

Instantly share code, notes, and snippets.

@Marfa

Marfa/figcaption.css

Last active December 11, 2015 12:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Marfa/4602601 to your computer and use it in GitHub Desktop.
Save Marfa/4602601 to your computer and use it in GitHub Desktop.
Download ZIP
Demo styles
Raw
figcaption.css
/* Demo styles */
body{font:.8em Georgia,"Times New Roman",Serif;background:#fff;color:#777;}
/* Styles for dotted border */
figure{/* Allows to fit figcaption to figure horizontally */display:table;
margin-bottom:15px;border:1px dashed #ddd}
/* Change color of border on hover */
figure:hover{border:1px dashed black}
/* Styles for solid border */
figure.solid{display:table;margin-bottom:15px;border:1px solid #ddd}
/* Change color of border on hover */
figure.solid:hover{border:1px solid black}
/* Styles for beauty border */
figure.beauty{display:table;margin-bottom:15px;border:15px solid rgba(0, 0, 0, 0.53);-moz-border-radius:25px 25px / 25px 25px;border-radius:25px 25px / 25px 25px}
/* Figcaption Style */
figcaption{/* Allows to fit figcaption to figure vertically */display:table-caption;
/* Caption position: top/right/bottom/left */caption-side:bottom;
background-color:grey;color:white;margin-top:5px;text-indent:1em}
Raw
figcaption.html
<body>
<!-- Dotted border figure -->
<figure><img src="http://lorempixel.com/output/technics-q-c-400-400-8.jpg"><figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec est vel quam aliquet matt</figcaption></figure>
<!-- Solid border figure -->
<figure class="solid"><img src="http://lorempixel.com/output/technics-q-c-400-400-8.jpg"><figcaption>Lorem ipsum dolor sit amet</figcaption></figure>
<figure class="beauty"><img src="http://lorempixel.com/output/technics-q-c-400-400-8.jpg"><figcaption>Lorem ipsum dolor sit amet</figcaption></figure>
</body>
@Marfa
Copy link
Author

Marfa commented Jan 23, 2013

This code makes figcaption fits to figure horizontally and vertically + border hover effects

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment