Tuesday, April 9, 2013

Quick & Dirty Enlarge on Click with CSS

Okay I couldn't find a resource on this but a couple people have asked me how you could do a lightbox sort of effect without installing widgets/javascript/etc...that is, pure html/css. I think this should work.

Idea #1: Use hover attributes:
You can assign an image a div style, such as #galleryImages. Here, you could give them borders and a specific size/padding to make a really nice gallery effect when each image is displayed with this style.
(like this:
#galleryImages{
border:solid 1px #000; 
width: 15%; 
padding: 1% 1% 1% 1%;}).
To assign the image the style, use <img src="URL HERE" id="#DIVIDHERE">.

From this point, you could utilize #galleryImages:hover to set the width to a larger size when the image is hovered on. That is, the code could look like #galleryImages:hover{width: 100%}. Since the image already has the id of galleryImages, it would inherit any hover, active, visited, etc. properties you give it.

Idea #2 Open on a blank page using hyperlinks
You can also wrap the image thumbnails in a hyperlink that open the images into a new page/tab (or, if you prefer, the existing page, but then the user has to use the back button...).
Set up your code so that it looks like <a href="URL TO FULL SIZE IMAGE HERE"><img src="URL OF THUMBNAIL HERE" border = "0"></a>. (the border = 0 removes the hyperlink border that image links normally get).
Right after your url in the a href but before the bracket, you can define a target attribute for what page the link should open in. target="_blank" opens the link in a new tab/window. So your code should look like:
<a href="URL TO FULL SIZE IMAGE HERE" target="_blank"><img src="URL OF THUMBNAIL HERE" border = "0"></a>.
If you want the image to open in the same tab (so they have to use the back button), use target="_self".

I wrote these ideas up on the fly so the code might need a little bit of rearranging/fixing, and obviously the styles might need to be changed to suit your needs.  However, the concepts should be solid and hopefully they can help someone out!!

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.