Add a caption to the photo pop-up with CSS3
Caution
This article was published more than a year ago, there may have been developments.
Please take this into account.
In today's tutorial we see how set the images of our site so that it appears to hover a caption at the bottom of the photo with fade-in effect / fade-out.
This technique makes use of some of the features implemented in the CSS3, the latest version. Unfortunately, not all browsers are still conformed to this specification, know that depending on the browser might not work. Newer browsers that support CSS3 are Firefox 4, Safari 5, Mobile Safari and Opera 10. Explore purtroppo do not support (apparently not even the next version: IE9), but however we will try not to forget IE users.
One of the new features implemented in the third version of CSS that is beginning to attract my attention are the transitions. The CSS transitions permettono di “animate” some elements, without writing a single line of JavaScript. It can happen that your browser does not support the transitions, the result will be equally achieved without animations, but instantly passing from one state to the next preserving the usability.
To get an idea of what we are to realize we mark the demo page.
I declare immediately that in this tutorial we will use some of the new HTML5 tags come “figure” and “figcaption“. If we're all ready.
1. I mark-up basilari
Let's start with the base code:
<!DOCTYPE html>
<html lang ="it">
<head>
<title>Captions on images with CSS3 | Demo | TheJoe.it</title>
<when http-equiv ="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
</body>
</html>
This part is known to all. We create “head” and “body“, declare the language used and the encoding characters.
2. Article
At this point add the item that will contain the images.
<article> <h1>Lorem ipsum</h1> <h2>This is boring.</h2> <h3>Nullam of Convallis</h3> <h4>Foreword</h4> <p>It is important, post a comment. Pellentesque imperdiet, augue vitae hendrerit rhoncus, eros consectetur tellus urna, lake's license exam is the information platform. Mauris ac Arcu in condimentum feugiat elite to mass ac. No need for industrial fishing. Cras Adipiscing porttitor free ut imperdiet. Suspendisse ultrices Augu convey vulputate ac orcs. He now works in fear good wishes to not be published by a variety of economic downturn. Proin non ipsum you ask, sed tincidunt odio. The CW's great, volutpat veil elite curriculum condimentum. Everyone from hatred Clients Win any football league. In the News. Classroom, lacus tincidunt ultricies sagittis, ultrices leo sapien eros, eget posuere nisl nibh ac nisi. In molestie luctus products, lacinia vitae risus in ultrices. But as a consumer, I do not drink poisoned News. Nothing facilisi. Maecenas mollis, Sapient skin sodales euismod, tellus leo adipiscing nisi, EU regional fears about life. </p> <footer>Taken from <a href="http://www.lipsum.com/">Lorem Ipsum generator</a>.</footer> </article>
I used a pair of HTML5 tag in this part of code: “article” to contain the article, and “footer” for Text at bottom of page. This adds a precise structure to our article, and makes it more semantically understandable, also for graphics.
3. Add photos
Now we can add our images. The insert between the title and the text.
<figure style="width: 500px; height: 375px; float: left; margin-right: 20px;">
<img src="img / cielo.jpg" alt ="The sky" />
<figcaption>
<h3>The sky.</h3>
<p>A view upward from the ground.</p>
</figcaption>
</figure>
For images we used two other elements HTML5: “figure” and “figcaption“. This allows us to associate an image with caption enclosing elements “img” and “figcaption” in a single parent: “figure“.
4. A dust’ Style
Now we are ready to add a bit of CSS.
/* Margins and Colors */
body {
margin: 30px;
font-family: "Georgia", serif;
line-height: 1.8in;
color: #333;
}
/* Item dimensions */
article {
width: 800px;
padding: 50px;
margin: 0 auto;
display: block;
font-size: 1.2in;
}
article h2 {
line-height: 1.5in;
}
/* Style for the footer */
footer {
font-style: italic;
font-size: .9in;
}
5. The style for images
Let the style element “figure“, that already contains “figcaption” and “img“.
/* Style for images */
figure {
position: relative;
display: block;
border: 1px solid #333;
margin: 5px 0 10px 0;
}
6. Caption style
Here comes the fun. The caption should be over the image to be read, but in the bottom of the same, and must have a sfondo not opaque, but translucent so you can still see the image below. It must also be initially hidden, so that it can appear only on mouse over the image. Here's how:
/* Style for captions, hiding them by default */
figcaption {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
font-size: .7in;
color: #fff;
background-color: rgba(0,0,0,.7);
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-or-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
Let us look more closely at the CSS:
- Place the caption
Locate the element in absolutefigure. - Impostare width, font size and color
A width of the 100% ensures that the background of the caption is the same width of the parent element. We also give the caption size and text color different. - Set the background translucent and hide the caption
We use the color formatrgba()to specify a black background with opacity 70%. Then we set the overall opacity of the caption to zero, and hide the caption. - Set the transition effect
This is the heart of this tutorial, the effect “transition”:transition: opacity .5s ease-in-outtells the browser to animate theopacityof this element in half a second.
Now we set the “transition“, for to make it appear we must add the pseudo class “:hover” all'elemento “figure“.
/* Shows caption on mouseover */
figure:hover figcaption {
opacity: 1;
}
We end up giving the whole thing a bit’ of style to content the caption.
/* Add padding and margin to the caption */
figcaption * {
padding: 0 10px;
margin: 0;
}
figcaption *:first-child {
padding-top: 5px;
}
figcaption *:last-child {
padding-bottom: 5px;
}
/* Impostiamo i custom font degli headers e caption */
figcaption, h1, h2, h3, h4 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
7. Support for Internet Explorer
We're almost done. Anyway, as already mentioned, IE does not support “transitions”. And if you do not eat bastasse, IE8 and earlier do not support even “opacity” or the color format “rgba()”.
Although there is not much to do with the “transitions” (if they do not rely on JavaScript), we can still use some instructions specific CSS for IE, that at least the captions will appear on mouseover.
figcaption {
filter: alpha(opacity=0);
}
figure:hover figcaption {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = # aa000000, aa000000 endColorstr = #);
}
We're not done with IE. IE8 and earlier do not recognize the elements HTML5 come “article“, “figure” and “figcaption“. This may not be a problem, if only IE does not allow to apply styles to elements unknown to him.
Fortunately the solution is simple. And it's’ sufficient to create the required elements using a little’ di JavaScript, the method “document.createElement()“. Let's put this code between the Conditional Comments so that only IE8 and earlier will be able to see it.
<!--
Add support for HTML5 elements IE <= 8
-->
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement('article');
document.createElement('figure');
document.createElement('figcaption');
</script>
<![endif]-->
Now the captions also work in IE8 and lower, not have the impact fade-in and fade-out, but at least can be read.
1 Comment
voucher · 13 January 2011 at 11:10 AM
cute picture! 🙂