tupence - CSS Demos

CSS3 Demos - Enlarge Image On Mouse Hover

Use CSS to show an full size popup of a thumbnail image

Demo

• 
  Benalmadena harbour in Andalucia
• 
  Fountain in Benalmadena, Andalucia
• 
  Hotels around the harbour in Benalmadena, Andalucia

Hover for a medium sized popup of the picture, click for the full sized picture.

Code

HTML

• <ul class="enlarge">
  <li>
  <a href="pic-lrg.jpg"> <!--large image, shown when thumbnail clicked-->
  <img src="pic-sml.jpg" width="180px" height="102px" alt="text"><!--thumbnail image-->
  <span>
  <img src="pic-tb.jpg" alt="text"> <!--medium image, shown when mouse hovers over thumbnail-->
  <br>Image description <!--text shown under medium image when it pops up-->
  </span>
  </a>
  </li>
  </ul>
  

CSS

• /*First position & style the thumbnail images using an unordered list*/
  ul.enlarge{
  list-style-type: none;
  }
  ul.enlarge li {
  float: left; /*places the images inline*/
  position: relative;
  z-index: 0;
  margin: 10px 10px 0 10px;
  }
  ul.enlarge img{ /*Thumbnail image*/
  background-color: #f0efda;
  padding: 6px;
  box-shadow: 0 0 6px rgba(132, 132, 132, .75);
  border-radius: 4px;
  }
• /*Next style and hide the medium sized image */
  ul.enlarge span{
  position: absolute;
  padding: 8px;
  background: #f0efda;
  box-shadow: 0 0 10px rgba(132, 132, 132, .75);
  border-radius: 4px;
  left: -9999px; /*move the image off the page*/
  }
• /* Finally bring the medium image back onto the page when the thumbnail is hovered*/
  ul.enlarge li:hover{
  z-index: 50;
  }
  ul.enlarge li:hover span{
  top: -320px;
  left: 0; /*horizontal position, brings the image back onto the page*/
  }
• /*See the foot of the page for browser specific prefixes for box-shadow, border-radius*/

Support & Prefixes

The technique works in the latest versions of Opera, Firefox, Chrome, Safari and Internet Explorer 8 and 9. Older versions may require the following prefixes to work correctly. Internet Explorer 8 requires CSS3Pie for border-radius and box-shadow (earlier versions of Internet Explorer do not work correctly).

Border radius is supported by all the latest browsers, including IE9. To support older versions there are prefixes...
Mozilla browsers (Firefox): -moz-border-radius:
Webkit browsers (Chrome, Safari): -webkit-border-radius:
Presto browsers (Opera): -o-border-radius:
IE8 and earlier will require CSS3pie

Box shadow is supported by all the latest browsers, including IE9. To support older versions there are prefixes...
Mozilla browsers (Firefox): -moz-box-shadow:
Webkit browsers (Chrome, Safari): -webkit-box-shadow:
Presto browsers (Opera): -o-box-shadow:
IE8 and earlier will require CSS3pie

More CSS3 Demos This Way