Enlarge the picture when hovering

Screen Shot 2013-09-24 at 8.38.31 PM

Screen Shot 2013-09-24 at 8.39.01 PM

When you hover over the thumbnail picture, an enlarged picture will pop up. I think this feature is really cool when we have multiple pictures in the website. First the thumbnails can display as many of them as possible, to give an overview. Then if the views want more detailed information, they can get a larger look by hovering over it, rather than having to  click on the picture. Also the design is very clean.

First is to place the images in an unordered list in the .html file:

  • <ul>
  • <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>

Then style the list items in the .css file:

  • ul.enlarge{
  • list-style-type:none;
  • }
  • ul.enlarge li{
  • display:inline-block;
  • position: relative;
  • z-index: 0;
  • margin:10px 40px 0 20px;
  • }

Then hide the large image:

  • ul.enlarge span{
  • position:absolute;
  • left: -9999px;
  • }

Then style the thumbnail images:

  • 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;
  • }

Then bring the large image back onto the screen as a pop-up when the thumbnail is hovered

  • ul.enlarge li:hover{
    z-index: 50;
    cursor:pointer;
  • }
  • ul.enlarge li:hover span{
    top: -300px;
    left: -20px;
    }
  • ul.enlarge li:hover:nth-child(2) span{
    left: -100px;
    }
    ul.enlarge li:hover:nth-child(3) span{
    left: -200px;
    }

Then style the popup images:

  • ul.enlarge span img{
  • padding: 2px;
  • background: #ccc;
  • }
  • ul.enlarge span{
  • padding: 10px;
  • background:#eae9d4;
  • -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;
  • font-family: ‘Droid Sans’, sans-serif;
  • font-size:.9em;
  • text-align: center;
  • color: #495a62;
  • }
Advertisements

One response to “Enlarge the picture when hovering

  1. It is a very useful CSS skill, you learned it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s