Treehouse: Grow your CSS skills. Land your dream job.

Display caption after image enlarged on mouseover?

  • MBM
    # May 25, 2012 at 8:57 pm

    I’ve modified css that enlarges a thumbnail on mouseover. I’ve used figcaption to caption the thumbnails but how do I caption the image after it has been enlarged?

    The css :

    background:url(../images/Wooden_Flooring_HD.png) #000 center top no-repeat;
    font-family: 'Ubuntu Condensed', sans-serif;

    #gallery {
    margin-left: 20px;
    margin-right: auto;

    #gallery ul{
    /* This position the ul content in the middle of the gallery*/

    #gallery ul li {
    /* In order to create the proper effect with hover we should use display inline-table
    This will display the big picture right next to its thumbnail
    list-style:none; display:inline-table;
    border: 1px solid #ffffff;
    padding: 6px 6px 6px 6px;

    /* This is the pic to display when the hover action occur over the li that contains the thumbnail */
    #gallery ul li .pic{
    /* Animation with transition in Safari and Chrome */
    -webkit-transition: all 0.6s ease-in-out;
    /* Animation with transition in Firefox (No supported Yet) */
    -moz-transition-timing-function: 0.6s ease-in-out;
    /* Animation with transition in Opera (No supported Yet)*/
    -o-transition: all 0.6s ease-in-out;
    /* The the opacity to 0 to create the fadeOut effect*/
    border:1px solid black;
    /* box shadow effect in Safari and Chrome*/
    -webkit-box-shadow:#272229 2px 2px 10px;
    /* box shadow effect in Firefox*/
    -moz-box-shadow:#272229 2px 2px 10px;
    /* box shadow effect in IE*/
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
    /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
    box-shadow:#272229 2px 2px 10px;

    #gallery ul li .mini:hover{

    /* This create the desired effect of showing the imagen when we mouseover the thumbnail*/
    #gallery ul li:hover .pic {
    /* width and height is how much the picture is going to growth with the effect */
    border: 1px solid #ffffff;
    padding: 6px 6px 6px 6px;
    top: 160px;
    left: 400px; /*position where enlarged image should offset horizontally */

    figcaption {
    text-align: center;
    display: block;
    font-size: 22px;

    The HTML :

    # May 26, 2012 at 12:24 pm

    First off, I would suggest using smaller background and thumbnail images… it was painful for me to watch them slowly load. The all of the images are 2 to 3Mb in size and don’t need to be a “png” type file, the “jpg” type will work just as well and be much smaller.

    As for adding captions, change the “.pic” to a div wrapping a copy of both the img and figcaption. Then set the image dimension to be 100% width and height (Demo):


    New CSS

    #gallery ul li .pic img {
    width: 100%;
    height: 100%;

    Modified CSS (only this line was changed)

    #gallery ul li:hover .pic {
    height: auto;
    # May 26, 2012 at 1:23 pm

    Thank you. That worked a treat. The website will be optimised for 1080P HD displays and that’s why I am using large images but I’ve added thumbnails to speed it up, a little.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.