Grains of Sand -CSS3 Demos and HTML5 Templates

Grains of Sand CSS3 Demos - Image Popup

Using CSS positioning and some CSS3 styling we can show a full sized popup of a thumbnail image when the thumbnail is hovered over.

What We're Aiming For
hover over the images to see the effect

  • DeckchairsDeckchairs
    Deckchairs on Blackpool beach
  • Blackpool sunsetBlackpool sunset
    Sunset over the Irish Sea at Blackpool
  • Blackpool pierBlackpool pier
    Rolling waves off Blackpool North Pier

Images from Stock.XCHNG

Step One
Place the images in an unordered list and style the list items

HTML - note, this is the same for each step
  • <!--THE IMAGES ARE PLACED IN AN UNORDERED LIST-->
  • <ul class="enlarge"> <!--We give the list a class so that we can style it seperately from other unordered lists-->
  • <!--First Image-->
  • <li>
  • <img src="assets/image-enlarge01-sml.jpg" width="150px" height="100px" alt="Deckchairs" /> <!--thumbnail image-->
  • <span> <!--span contains the popup image-->
  • <img src="assets/image-enlarge01.jpg" alt="Deckchairs" /> <!--popup image-->
  • <br />Deckchairs on Blackpool beach <!--caption appears under the popup image-->
  • </span>
  • </li>
  • <!--Second Image-->
  • <li>
  • <img src="assets/image-enlarge02-sml.jpg" width="150px" height="100px" alt="Blackpool sunset " /> <!--thumbnail image-->
  • <span> <!--span contains the popup image-->
  • <img src="assets/image-enlarge02.jpg" alt="Blackpool sunset" /> <!--popup image-->
  • <br />Sunset over the Irish Sea at Blackpool <!--caption appears under the popup image-->
  • </span>
  • </li>
  • <!--Third Image-->
  • <li>
  • <img src="assets/image-enlarge03-sml.jpg" width="150px" height="100px" alt="Blackpool North Pier " /> <!--thumbnail image-->
  • <span> <!--span contains the popup image-->
  • <img src="assets/image-enlarge03.jpg" alt="Blackpool North Pier " /> <!--popup image-->
  • <br />Rolling waves off Blackpool North Pier <!--caption appears under the popup image-->
  • </span>
  • </li>
  • </ul>
CSS FOR THIS STEP
  • /***Style the unordered list with the class 'enlarge'***/
  • ul.enlarge{
  • list-style-type:none; /*remove the bullet point*/
  • }
  • ul.enlarge li{
  • display:inline-block; /*places the images in a line*/
  • position: relative; /*allows precise positioning of the popup image when used with position:absolute - see support section */
  • z-index: 0; /*resets the stack order of the list items - we'll increase in step 4. See support section for more info*/
  • margin:10px 40px 0 20px; /*space between the images*/
  • }

Result

  • DeckchairsDeckchairs
    Deckchairs on Blackpool beach
  • Blackpool sunsetBlackpool sunset
    Sunset over the Irish Sea at Blackpool
  • Blackpool pierBlackpool pier
    Rolling waves off Blackpool North Pier

Step Two
Hide the large image

CSS FOR THIS STEP
  • /***In the HTML in step one we placed the large image inside a <span>, now we move it off the page until it's required***/
  • ul.enlarge span{
  • position:absolute; /*see support section for more info on positioning*/
  • left: -9999px; /*moves the span off the page, effectively hidding it from view*/
  • }

Result

  • DeckchairsDeckchairs
    Deckchairs on Blackpool beach
  • Blackpool sunsetBlackpool sunset
    Sunset over the Irish Sea at Blackpool
  • Blackpool pierBlackpool pier
    Rolling waves off Blackpool North Pier

Step Three
Style the thumbnail images

CSS FOR THIS STEP
  • /***Note: This styling will apply to both the thumbnail and popup image, unless you override these styles in step five***/
  • ul.enlarge img{
  • /*give the thumbnails a frame*/
  • background-color:#eae9d4; /*frame colour*/
  • padding: 6px; /*frame size*/
  • /*add a drop shadow to the frame*/
  • -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
  • -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
  • box-shadow: 0 0 6px rgba(132, 132, 132, .75);
  • /*and give the corners a small curve*/
  • -webkit-border-radius: 4px;
  • -moz-border-radius: 4px;
  • border-radius: 4px;
  • }

Result

  • DeckchairsDeckchairs
    Deckchairs on Blackpool beach
  • Blackpool sunsetBlackpool sunset
    Sunset over the Irish Sea at Blackpool
  • Blackpool pierBlackpool pier
    Rolling waves off Blackpool North Pier

Step Four
Bring the large image back onto the screen as a pop-up when the thumbnail is hovered

CSS FOR THIS STEP
  • ul.enlarge li:hover{
    z-index: 50; /*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/
    cursor:pointer; /*changes the cursor to a hand*/
  • }
  • /***We bring the large image back onto the page by reducing left from -9999px (set in step 2) to figures below***/
    ul.enlarge li:hover span{ /*positions the <span> when the <li> (which contains the thumbnail) is hovered*/
    top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
    left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
    }
  • /***To make it look neater we used :nth-child to set a different left distance for each image***/
    ul.enlarge li:hover:nth-child(2) span{
    left: -100px;
    }
    ul.enlarge li:hover:nth-child(3) span{
    left: -200px;
    }

Result
hover over the images to see the effect

  • DeckchairsDeckchairs
    Deckchairs on Blackpool beach
  • Blackpool sunsetBlackpool sunset
    Sunset over the Irish Sea at Blackpool
  • Blackpool pierBlackpool pier
    Rolling waves off Blackpool North Pier

Step Five
Style the popup images

CSS FOR THIS STEP
  • /***Override the styling of images set in step 3 to make the frame smaller and the background darker***/
  • ul.enlarge span img{
  • padding: 2px; /*size of the frame*/
  • background: #ccc; /*colour of the frame*/
  • }
  • /***Style the <span> containing the framed images and the caption***/
  • ul.enlarge span{
  • /**Style the frame**/
  • padding: 10px; /*size of the frame*/
  • background:#eae9d4; /*colour of the frame*/
  • /*add a drop shadow to the frame*/
  • -webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
  • -moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
  • box-shadow: 0 0 20px rgba(0,0,0, .75);
  • /*give the corners a curve*/
  • -webkit-border-radius: 8px;
  • -moz-border-radius: 8px;
  • border-radius:8px;
  • /**Style the caption**/
  • font-family: 'Droid Sans', sans-serif; /*Droid Sans is available from Google fonts*/
  • font-size:.9em;
  • text-align: center;
  • color: #495a62;
  • }

Result
hover over the images to see the effect

  • DechairsDeckchairs
    Deckchairs on Blackpool beach
  • Blackpool sunsetBlackpool sunset
    Sunset over the Irish Sea at Blackpool
  • Blackpool pierBlackpool pier
    Rolling waves off Blackpool North Pier

Full Code For You To Copy And Paste

HTML
  • <ul class="enlarge">
  • <li><img src="assets/image-enlarge01-sml.jpg" width="150px" height="100px" alt="Dechairs" /><span><img src="assets/image-enlarge01.jpg" alt="Deckchairs" /><br />Deckchairs on Blackpool beach</span></li>
  • <li><img src="assets/image-enlarge02-sml.jpg" width="150px" height="100px" alt="Blackpool sunset" /><span><img src="assets/image-enlarge02.jpg" alt="Blackpool sunset" /><br />Sunset over the Irish Sea at Blackpool</span></li>
  • <li><img src="assets/image-enlarge03-sml.jpg" width="150px" height="100px" alt="Blackpool pier" /><span><img src="assets/image-enlarge03.jpg" alt="Blackpool pier" /><br />Rolling waves off Blackpool North Pier</span></li>
  • </ul>
CSS
  • ul.enlarge{
    list-style-type:none; /*remove the bullet point*/
    margin-left:0;
    }
  • ul.enlarge li{
    display:inline-block; /*places the images in a line*/
    position: relative;
    z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
    margin:10px 40px 0 20px;
    }
  • ul.enlarge img{
    background-color:#eae9d4;
    padding: 6px;
    -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }
  • ul.enlarge span{
    position:absolute;
    left: -9999px;
    background-color:#eae9d4;
    padding: 10px;
    font-family: 'Droid Sans', sans-serif;
    font-size:.9em;
    text-align: center;
    color: #495a62;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
    -moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
    box-shadow: 0 0 20px rgba(0,0,0, .75);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius:8px;
    }
  • ul.enlarge li:hover{
    z-index: 50;
    cursor:pointer;
    }
  • ul.enlarge span img{
    padding:2px;
    background:#ccc;
    }
  • ul.enlarge li:hover span{
    top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
    left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
    }
  • ul.enlarge li:hover:nth-child(2) span{
    left: -100px;
    }
  • ul.enlarge li:hover:nth-child(3) span{
    left: -200px;
    }
  • /**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
    ul.enlarge img, ul.enlarge span{
    behavior: url(pie/PIE.htc);
    }

Support

Postioning

The demo uses postition:absolute together with position:relative, so here's a brief explanation...
position:relative -- lets you position an object relative to its normal position, using top, bottom, left and right
position:absolute -- removes an object from the normal flow and positions it exactly where you say on the page
position:relative with position:absolute -- lets you position a child element inside its parent. If you don't first use position:relative on the parent element, the absolutely positioned child will move outside the parent.

See a further explanation and example of using relative and absolute positioning together.

z-index

z-index specifies the stack order of an element within the document. Elements with a higher z-index will appear infront of those with a lower z-index.
Note that it only works on positioned objects.

Explanations Of The CSS3 Used

More CSS3 Demos This Way

Made with semantic HTML5 and CSS3

Designed by tupence © 2012

IE6 and earlier may not display as intended, but the site will still work.