TheJoe.it Into the (open) source

12Jan/111

Add a caption to the photo pop-up with CSS3

preview

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 little '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 above image to be read, but in the bottom of the same, and must have a sfondo not opaque, but translucent so you can continue to see the picture 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:

  1. Place the caption
    Posizioniamo in an absolute way the element figure.
  2. 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.
  3. Set the background translucent and hide the caption
    We use the color format rgba() to specify a black background with opacity 70%. Then we set the overall opacity of the caption to zero, and hide the caption.
  4. Set the transition effect
    This is the heart of this tutorial, the effect "transition": transition: opacity .5s ease-in-out tells the browser to animate the opacity of this element in half a second.

Now we set the "transition", for to make it appear we must add the pseudo class ":hover" element "figure".

/* Shows caption on mouseover */
      figure:hover figcaption {
        opacity: 1;
      }

We end up giving the whole thing a little '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. E 'enough to create the required elements using a little' 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.

About

I keep this blog as a hobby by 2009. I am passionate about graphic, technology, software Open Source. Among my articles will be easy to find music, and some personal thoughts, but I prefer the direct line of the blog mainly to technology. For more information contact me.

Comments (1) Trackbacks (0)
  1. cute picture! :)


Leave a comment

No trackbacks yet.