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

the images on my site were tiny and insignificant.

Screen Shot 2013-02-17 at 8.21.26 PM

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

Screen Shot 2013-02-17 at 8.23.40 PM

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”>

position: relative;
z-index: 0;

background-color: transparent;
z-index: 50;

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
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 */



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

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.

6 Responses to “Make your images pop-out! [With just css3 and html5]”

  1. I like the idea behind this post, but I feel that the formatting is off. The sheer length of the post (not text length, but overall length) is overwhelming, and I feel that this is due to the code snippets included. Maybe tightening/cleaning them up a bit would make the post more concise and easy to digest. Also, the images for before and after could have been spaced out more, as the beginning, the added code, and then the desired effect.
    The information here is very helpful, and provides an interesting visual effect for someones website, but to someone looking at it from afar, it may be a lot to process at once!
    -Zack Hall

  2. I liked the idea of this post because I am looking to do something like that to my photo page. However, I agree that the formatting of this post could have been cleaned up and shortened a bit. I was a bit overwhelmed by the length of the post and the coloring changing from step to step.

  3. This is an extremely thorough post but the code is somewhat hard to follow along with. I like the idea of pictures popping up but I feel like there would be a lot of guessing and checking just how big the photo should be when it pops up. Also the ‘understanding html’ section is kind of confusing and each section of coding could be formatted a little better.

  4. This post is not only helpful, but is well thought out. It directly explains what you need to do and is easy to follow. It is aesthetically pleasing. I really liked the topic more than anything. it is a cool way to organize your pictures and make a nice gallery (something I have been trying to improve). Overall a really great post in every way. The only knock that I would have on it is, even though it is easy to follow the HTML section with the code is a little confusing and could use a little more explanation.

  5. While most of the blog posts of the week set out with no clear motivation or goal in mind, I like this post because it sets a specific goal and achieves it by the end of the post. This post includes a level of detail not seen in most of the other posts and allows the user to adequately replicate the results.

  6. This is definitely the best post of the week. I disagree that the colors are distracting: they clarify what code is what and make it easier to see what it supposed to be copied and pasted. The explanation is very thorough, and it doesn’t go over my head like a lot of posts — she even explains what

  7. and other chunks of the code mean! I think this post does the best job at both teaching you how to do something, and explaining how you’re doing it.

    — Melissa

Comments are closed.

%d bloggers like this: