Make your images pop-out! [With just css3 and html5]

Want to make your image pop?!

Well if so this is the right blog to be there. Before I visited

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/#thumb

the images on my site were tiny and insignificant.

But after using the code that Dynamicdrive.com provide they could do this!

This was all done without using Jquery! This is purely just CSS and HTML. Okay, Let’s get started.

Step 1:

Make sure you already have some sort of image gallery set up, mine worked with a vertical one. I haven’t tried it with a horizontal gallery , so I would stay vertical.

Step 2: CSS code

Copy and paste this code into your CSS. This code is for the images that will pop out when you hover over your original photos

/** Pop out hover **/ <– I labeled it this so I would know where my code was for the hover images.

<style type=”text/css”>

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:#eee;
padding:5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 55px;
left: 175px; /*position where enlarged image should offset horizontally */

}

</style>

Step 3: Your HTML code.

<li><a class=”thumbnail” href=”#”><img src=”ddr.jpg” alt= “DDR ” width=”150″ height=”100″ /><span><img src=”ddr.jpg”/><br /></span></a>
</li>

<li><a class=”thumbnail” href=”#”><img src=”hookah.jpg” alt=”Hookah” width=”150″ height=”100″ /><span><img src=”hookah.jpg” />
<br /></span></a>
</li>
<li><a class=”thumbnail” href=”#”><img src=”nintendo.jpg” alt=”Nintendo” width=”150″ height=”100″ /><span><img src=”nintendo.jpg”/>
<br /></span></a>
</li>

Notice that I only have code for three pictures. If you want more than keep the format for the extra photos. I put each picture in the class thumbnail which is how it is labeled in the CSS. This way the pop out affect will know what to apply it too.

Step 4: Understanding your HTML code

A. You must understand that ” <li><a class=”thumbnail”  href=”#”><img src=”nintendo.jpg” alt=”Nintendo” width=”150″ height=”100″ /> ” is saying that you have a list item <li>  with a picture that if clicked could lead to another page href=”#” . Hint: if you replace the # symbol with a link or file when you click your original  picture , it will navigate elsewhere.  Where it says img src=”nintendo.jpg” where your original photo will go. Of course the width and height just determines the size of your photo. However, know that it is always best to resize your photo with a photoeditor rather than dream weaver.

B. The next part of the code <span><img src=”nintendo.jpg”/><br /></span></a></li> tells you what picture will be shown after you hover over your photo. If you want the same photo than put it in the same file after it says img src. But if you want to be fancy you can always make a new picture come up.

Step 5: Small notes for your CSS

At the very bottom of you CSS you will find

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 55px;
left: 175px; /*position where enlarged image should offset horizontally */

Note: where it says

top: 55px;
left: 175px; /*position where enlarged image should offset horizontally */

Like the comment says this is the place you will change around to decide how far your pop up image is from your original image.

Congrats you are all done! Just preview your site in a browser and all should be well.

Nikki Abban

~ by catchmeonfifth on February 17, 2013.