Grains Of Sand Web Design, CSS Demos & HTML5 Templates by tupence

CSS3 Demos | CSS Hover Gallery

Use CSS to create a clean and simple image gallery with thumbnails on one side and a larger image appearing either at the side, below or above when a thumbnail is hovered over.

What We're Aiming For

This demo has the thumbnails on the left and larger image appearing on the right. The full code section has the code for thumbnails on the left, right, above and below the larger image.

Hover over a thumbnail to see the gallery in action

Images are all from Stock.xchng -- Bike, ever changing, Night Ride, Bicycle and Bicycle leaning against a door in Goa, India

Step One
Add the images, placing them inside an unordered list contained in a div with the id 'gallery'. Note, I'm just using three images in this step to make the code less complicated.

HTML
  • <div id="gallery"> <!--contain the gallery inside a div and give it an id to allow for styling-->
  • <ul> <!--place the images in an unordered list-->
  • <!--First Image-->
  • <li> <!--each thumbnail and full sized image are placed within the same list item-->
  • <a href="#"><!-- the images are also placed inside a hyperlink, this enables people navigating without a mouse to tab through them. Use # as a dummy destination for the link-->
  • <img class="thumb" src="name01-sml.jpg" width="130" height="100" alt="brief description" /> <!-- the thumbnail images - note the class 'thumb' to allow them to be styled seperately to other images-->
  • <img class="fullsized" src="name01.jpg" width="550" height="400" alt="brief description " /> <!-- the full sized images - note the class 'fullsized' to allow them to be hidden and styled-->
  • </a>
  • </li>
  • <!--Second Image-->
    <li><a href="#"><img class="thumb" src="name02-sml.jpg" width="130" height="100" alt="" /> <img class="fullsized" src="name02.jpg" width="550" height="400" alt="" /></a></li>
  • <!--Third Image-->
    <li><a href="#"><img class="thumb" src="name03-sml.jpg" width="130" height="100" alt="" /> <img class="fullsized" src="name03.jpg" width="550" height="400" alt="" /></a></li>
  • </ul>
  • </div>
CSS FOR THIS STEP
  • /***Reset the default margins, padding and borders to make the styling we add more consistent between browsers***/
    html, body, div, a, img, ul, li{ /*you can add any other elements you use to this list*/
    margin:0;
    padding:0;
    border:0;
    }
Result

Step Two
Hide the large images and style the thumbnails

HTML
  • same as step one
CSS FOR THIS STEP
  • /***FIRST HIDE THE FULL SIZED IMAGE USING display:none***/
  • #gallery a img.fullsized{
  • display: none;
  • }
  • /***NEXT STYLE THE GALLERY***/
    #gallery{
  • position: relative; /*see the support section below for more info*/
  • width: 900px; /*allow enough room for at least one thumbnail and the full sized image*/
  • height: 450px; /*at least the height of the largest full sized image plus any padding and margins*/
  • margin: 10px;
  • overflow: auto; /*adds vertical scrollbars if the number of thumbnails overflow the height of the box*/
  • background-image: url(gallery01bg.jpg); /*this is the image saying 'click on a thumbnail'*/
  • background-position: 480px 50%; /*x and y position of the background image*/
  • background-repeat: no-repeat;
  • background-color: #bbb;
  • /*the background code can be written in shorthand -- background: url(gallery01bg.jpg) 480px 50% no-repeat #bbb */
  • }
  • /***STYLE THE THUMBNAIL IMAGES***/
    #gallery ul{
  • float: left; /*places the images in a line*/
  • list-style-type: none; /*removes the bullet point*/
  • width: 300px; /*I wanted two thumbnail columns, so this is the width of two thumbnails with some padding. If you adjust this, be sure to take into account the size of your full sized images and the width of the gallery*/
  • }
  • #gallery li{
  • float: left; /*places the thumbnails in columns, up to the width specified in #gallary ul above*/
  • width: 150px; /*the width of the thumbnails plus a little padding - you could use the exact width of the thumbnail and then add padding if you choose*/
  • }
  • #gallery a {
  • display: block; /*links and images are inline elements, changing either the link or the image to block lets us add any padding and margins we require*/
  • text-decoration: none; /*remove the underline*/
  • width: 130px; /*width of the thumbnail*/
  • height: 100px; /*height of the thumbnail*/
  • cursor: pointer;
  • padding: 10px 20px;
  • }
  • #gallery a img.thumb { /*add a drop shadow to the thumbnails*/
  • -webkit-box-shadow: 1px 2px 4px #444;
  • -moz-box-shadow: 1px 2px 4px #444;
  • box-shadow: 1px 2px 4px #444;
  • }
Result

Step Three
Style the full sized images and display them when the appropriate thumbnail is hovered over or in focus

HTML
  • same as step one
CSS FOR THIS STEP
  • /***NEXT STYLE THE FULL SIZED IMAGES***/
  • #gallery a img.fullsized {
  • position: absolute; /*see support section below for more info*/
  • right: 20px; /*places the image 20px from the right edge of the containing element (in this case #gallery ul)*/
  • top: 10px; /*places the image 10px from the top edge of the containing element ( #gallery ul)*/
  • width: 550px; /*width of the largest full sized image*/
  • height: 400px; /*height of the largest of the full sized images*/
  • /*add a drop shadow to the images*/
  • -webkit-box-shadow: 1px 3px 8px #444;
  • -moz-box-shadow: 1px 3px 8px #444;
  • box-shadow: 2px 3px 8px #444;
  • }
  • /***FINALLY DISPLAY A FULL SIZED IMAGE WHEN ITS THUMBNAIL IS HOVERED***/
    #gallery a:hover img.fullsized, #gallery a:focus img.fullsized {
  • display: block; /*as the image was hiden using disaply:none, changing this will show the image (using display:block allows us to position the image)*/
  • }
Result
  • Bicycle leaning against a blue and yellow wallBicycle leaning against a blue and yellow wall
  • Bicycle in a dark alleyBicycle in a dark alley
  • Bicycle, lake and mountainsBicycle, lake and mountains
  • Bicycle against an old doorBicycle against an old door
  • Bicycle in a dark alleyBicycle in a dark alley
  • Bicycle leaning against a blue and yellow wallBicycle leaning against a blue and yellow wall

Full Code For You To Copy And Paste

HTML

This is the same, regardless of the position of the thumbnails and large images

  • <div id="gallery">
    <ul>
    <li><a href="#"><img class="thumb" src="assets/gallery01a-sml.jpg" width="130" height="100" alt="Bicycle leaning against a blue and yellow wall" /><img class="fullsized" src="assets/gallery01a.jpg" width="550" height="400" alt="Bicycle leaning against a blue and yellow wall" /></a></li>
    <li><a href="#"><img class="thumb" src="assets/gallery01b-sml.jpg" width="130" height="100" alt="Bicycle in a dark alley" /><img class="fullsized" src="assets/gallery01b.jpg" width="550" height="400" alt="Bicycle in a dark alley" /></a></li>
    <li><a href="#"><img class="thumb" src="assets/gallery01c-sml.jpg" width="130" height="100" alt="Bicycle, lake and mountains" /><img class="fullsized" src="assets/gallery01c.jpg" width="550" height="400" alt="Bicycle, lake and mountains" /></a></li>
    <li><a href="#"><img class="thumb" src="assets/gallery01d-sml.jpg" width="130" height="100" alt="Bicycle against an old door" /><img class="fullsized" src="assets/gallery01d.jpg" width="550" height="400" alt="Bicycle against an old door" /></a></li>
    <li><a href="#"><img class="thumb" src="assets/gallery01b-sml.jpg" width="130" height="100" alt="Bicycle in a dark alley" /><img class="fullsized" src="assets/gallery01b.jpg" width="550" height="400" alt="Bicycle in a dark alley" /></a></li>
    <li><a href="#"><img class="thumb" src="assets/gallery01a-sml.jpg" width="130" height="100" alt="Bicycle leaning against a blue and yellow wall" /><img class="fullsized" src="assets/gallery01a.jpg" width="550" height="400" alt="Bicycle leaning against a blue and yellow wall" /></a></li>-
    </ul>
    </div>
CSS

Thumbnails on the left, large images on the right

  • html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li, header, fieldset, pre, code{
    margin:0;
    padding:0;
    border:0;
    }
    #gallery{
    position:relative;
    width:900px;
    height:450px;
    background-image:url(assets/gallery01bg.jpg);
    background-position: 480px 50%;
    background-repeat: no-repeat;
    background-color: #bbb;
    margin:10px;
    font-size:90%;
    overflow:auto;
    }
    #gallery ul{
    float:left;
    list-style-type:none;
    width:300px;
    margin-top:10px;
    }
    #gallery li{
    float:left;
    width:150px;
    }
    #gallery a {
    display:block;
    padding:10px 20px;
    text-decoration:none;
    width:130px;
    height:100px;
    cursor:pointer;
    }
    #gallery a img.thumb {
    -webkit-box-shadow: 1px 2px 4px #444;
    -moz-box-shadow: 1px 2px 4px #444;
    box-shadow: 1px 2px 4px #444;
    }
    #gallery a img.fullsized {
    display:none;
    position:absolute;
    right:20px;
    top:10px;
    margin:10px auto;
    width:550px;
    height:400px;
    -webkit-box-shadow: 1px 3px 8px #444;
    -moz-box-shadow: 1px 3px 8px #444;
    box-shadow: 2px 3px 8px #444;
    }
    #gallery a:hover img.fullsized, #gallery a:focus img.fullsized {
    display:block;
    }

Thumbnails on the right, large images on the left

  • html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li, header, fieldset, pre, code{
    margin:0;
    padding:0;
    border:0;
    }
    #gallery{
    position:relative;
    width:900px;
    height:450px;
    background-image:url(images/gallery01bg.png);
    background-position: 100px 50%;
    background-repeat: no-repeat;
    background-color: #bbb;
    margin:10px;
    font-size:90%;
    overflow:auto;
    }
    #gallery ul{
    float:right;
    list-style-type:none;
    width:300px;
    margin-top:10px;
    margin-right:20px;
    }
    #gallery li{
    float:left;
    width:150px;
    }
    #gallery a {
    display:block;
    padding:10px 20px;
    text-decoration:none;
    width:130px;
    height:100px;
    cursor:pointer;
    }
    #gallery a img.thumb {
    -webkit-box-shadow: 1px 2px 4px #444;
    -moz-box-shadow: 1px 2px 4px #444;
    box-shadow: 1px 2px 4px #444;
    }
    #gallery a img.fullsized {
    display:none;
    position:absolute;
    left:20px;
    top:10px;
    margin:10px auto;
    width:550px;
    height:400px;
    -webkit-box-shadow: 1px 3px 8px #444;
    -moz-box-shadow: 1px 3px 8px #444;
    box-shadow: 2px 3px 8px #444;
    }
    #gallery a:hover img.fullsized, #gallery a:focus img.fullsized {
    display:block;
    }

Thumbnails underneath the large images

  • html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li, header, fieldset, pre, code{
    margin:0;
    padding:0;
    border:0;
    }
    #gallery{
    position:relative;
    width:640px;
    height:750px;
    background-image:url(images/gallery01bg.png);
    background-position: 50% 200px;
    background-repeat: no-repeat;
    background-color: #bbb;
    margin:10px;
    font-size:90%;
    overflow:auto;
    }
    #gallery ul{
    list-style-type:none;
    margin-top:440px;
    margin-right:20px;
    }
    #gallery li{
    float:left;
    width:150px;
    }
    #gallery a {
    display:block;
    padding:10px 20px;
    text-decoration:none;
    width:130px;
    height:100px;
    cursor:pointer;
    }
    #gallery a img.thumb {
    -webkit-box-shadow: 1px 2px 4px #444;
    -moz-box-shadow: 1px 2px 4px #444;
    box-shadow: 1px 2px 4px #444;
    }
    #gallery a img.fullsized {
    display:none;
    position:absolute;
    left:45px;
    top:10px;
    margin:10px auto;
    width:550px;
    height:400px;
    -webkit-box-shadow: 1px 3px 8px #444;
    -moz-box-shadow: 1px 3px 8px #444;
    box-shadow: 2px 3px 8px #444;
    }
    #gallery a:hover img.fullsized, #gallery a:focus img.fullsized {
    display:block;
    }

Thumbnails above the large images

  • html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li, header, fieldset, pre, code{
    margin:0;
    padding:0;
    border:0;
    }
    #gallery{
    position:relative;
    width:640px;
    height:750px;
    background-image:url(images/gallery01bg.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #bbb;
    margin:10px;
    font-size:90%;
    overflow:auto;
    }
    #gallery ul{
    list-style-type:none;
    margin-top:20px;
    margin-right:20px;
    }
    #gallery li{
    float:left;
    width:150px;
    }
    #gallery a {
    display:block;
    padding:10px 20px;
    text-decoration:none;
    width:130px;
    height:100px;
    cursor:pointer;
    }
    #gallery a img.thumb {
    -webkit-box-shadow: 1px 2px 4px #444;
    -moz-box-shadow: 1px 2px 4px #444;
    box-shadow: 1px 2px 4px #444;
    }
    #gallery a img.fullsized {
    display:none;
    position:absolute;
    left:45px;
    top:280px;
    margin:10px auto;
    width:550px;
    height:400px;
    -webkit-box-shadow: 1px 3px 8px #444;
    -moz-box-shadow: 1px 3px 8px #444;
    box-shadow: 2px 3px 8px #444;
    }
    #gallery a:hover img.fullsized, #gallery a:focus img.fullsized {
    display:block;
    }

Support Section

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.

Browser Support

The demo works in all the latest browsers, including IE9.
IE8 and IE7 will require CSS3Pie to make box-shadow work but other than that they display as expected.

More CSS3 Demos This Way