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?

    http://46.252.196.94/Misc/css3/index.html

    The css :

    body{
    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*/
    margin-left:-30px;
    }


    #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;
    background-color:#ffffff;
    padding: 6px 6px 6px 6px;
    margin-left:20px;
    margin-top:100px;
    }


    /* 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*/
    opacity:0;
    visibility:hidden;
    position:fixed;
    margin-top:10px;
    margin-left:-200px;
    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{
    cursor:pointer;
    }

    /* 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 */
    width:70%;
    height:70%;
    opacity:1;
    visibility:visible;
    position:absolute;
    border: 1px solid #ffffff;
    background-color:#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):

    HTML

    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;
    }
    MBM
    # 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.

*May or may not contain any actual "CSS" or "Tricks".