Enlarged Image

In the old days on the Internet, a lot of websites would have a thumbnail of something and then if you clicked on the image you would get a pop-up window with an enlarged view of the thumbnail, but the popup would still not be as big as the screen.

Personally I like this approach.

Because I do not know JavaScript, is there a way to do that with HTML and CSS?

I just added a thumbnail of my client’s building, and if someone is coming over for the first time, they might want an enlarged image so they get a really good look.

Thanks.

That is best accomplished with JavaScript.

jQuery with a Lightbox plugin can be used to achieve it. This while will require very little effort on your part.

One the website I manage we use Colorbox.

http://www.jacklmoore.com/colorbox/

But for reference, how would it be done in the pre-JavaScript days? (Seems that was pretty easy to do to.)

errrm
<a href="someimage.jpg"><img src="somesmallerimage.jpg"/></a>

1 Like

The simplest way is to make the thumbnail a link that goes to the larger version of the image.

Isn’t there a way with CSS to make it so if the user hovers over the thumbnail then a larger image will appear? That seems like the best way with the best support and least overhead.

That’s different then what you’ve been asking. Do you want hover, or do you want click? A lightbox is in JS, and it’s for click. You give indication that that is what you want. In your recent post, you make it seem like you want the hover, NOT click. I’m confused.

http://www.pmob.co.uk/temp/gallery-rollover.htm
http://pmob.co.uk/pob/disjointed1.htm

Just google “css gallery”. There are thousands of examples. That’s for hover (if that’s what you want.)

How so? That way a user would need to download the full weight image whether they ended up seeing it full size or not, being that it was only displayed smaller sized. That seems like more to me.

Because you wouldn’t need JavaScript.

A couple lines of JS would likely be less weight than a full weight image. Especially if an external cached file.

I changed my mind. maybe hover is better? :confounded:

Maybe it’s Maybelline.

2 Likes

I’m Googling and it isn’t helping.

Any examples or code samples that get to the heart of things just using CSS?

Paul has code that you can copy / paste from the links provided.

How does Paul’s samples relate to what I am asking about?

I just see a menu where different images appear.

I have a single image of my client shop (200x200 pixels) and if someone happens to hover over it, I would like it to increase to maybe 500x500 pixels and have a nice border around it.

A photo gallery is the best course of action. #

Agreed. Drop it in. Work done.

No it’s not.

I like how this example looks, but when I read the instructions I didn’t understand what he did…

http://cssdemos.tupence.co.uk/image-popup.htm

I said that I have one photo in my right margin that I need to enlarge on hover. I am not dealing with photo galleries!