Mobile Friendly Website

CSSPLAY

Doing it with style

Magnify COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Stig:-
This is a very nice preview effect for galleries! Could you perhaps force the 1x1 pixel to the upper left corner of the thumbnail?
(31.05.2004, 10:42)

Scott:-
Interesting technique. I find the photo overlay less distracting than 'flowing text', but it's not possible to read the document, while viewing the image.

I've made a css photo zoom that includes a caption. It uses only one image file, specify only the width parameter & you can do that, from within the HTML document. We use it on our site.

www.randsco.com
(search for 'css photo zoom')

* I tried to add the direct link, but it's longer than the allotted 50 characters. *
(05.02.2005, 21:11)

Dave:-
I think this is great effect! I was trying to change it so that the large image would popup on a mouse click rather than a hover but cant get it to work with mozilla.. could anyone help me out?
(18.06.2005, 14:46)

Eduardo:-
I don't think it's possible to do anything when clicking with CSS, that's when you need JS. I think it's a great effect, I am glad I found this site, has so many cool things.
(11.08.2005, 13:11)

Matt:-
This is an awesome affect, i would like to use something like this, but i need the original image to be text instead, then pop up an image... is this possible? if so can you email me the code to Mirk01011000@hotmail.com
(22.09.2005, 18:48)

My:-
How can I get the sample html code for this "magnify image" demo?
(18.01.2006, 22:06)

My:-
Never mind ....... figured it out. thanks.
(18.01.2006, 22:26)

Paul:-
Im quite new to using CSS, but i think it is a really useful technique! Anyway, i cant seem to find a link to the CSS file on the page :( can anyone help me out, or have you all just written your own going on the guide lines he has written?
(31.01.2006, 15:20)

Maz:-
just press view source in your browser or right click and click view source on the menu to see the xhtml and the css is in the <style type="text/css">.....</style> at the top of the source.
(15.02.2006, 12:13)

Gordon:-
This works great for an fixed image size, but not as a general class to deal with varying image sizes. Any ideas on how to accomplish that?

Thanks
(31.03.2006, 05:27)

Snottlebocket:-
I'm trying to implement this into my site redesign, it works pretty well in firefox but in Internet Explorer it resizes the entire div on mouseover.

the original here works fine in IE so i'm thinking i'm overlooking or misunderstanding something.

see here for what's happening in FF and IE:
www.snottlebocket.com/redesign/illustration.html
(10.04.2006, 21:48)

Stu:-
Snottlebocket,
a.p1:hover .large {display:block; position:absolute;
.. you have position:relative;
Change this and the top/left position to make it work correctly.
(10.04.2006, 22:45)

Snottlebocket:-
Stu, i found out that works but that puts the picture in an absolute position, which means as soon as the user starts browsing downwards, the enlarged versions show offscreen.

the relative thing works fine in firefox, in IE rather than layering over the top it resizes the div it's in.
i don't mind this resize so much, it's a different effect than firefox but it still works if only it didn't resize the div much more than necesary, creating an empty black space.
i don't mean to sound like a brat arguing with the creator but is it possible to fix it up so in IE it won't create all that extra empty space?

www.snottlebocket.com/redesign/illustration.html
(11.04.2006, 09:18)

RT:-
just used your magnify script with my os commerce shop, so much better than the default popup image, thank you and great site by the way stu.....
(13.06.2006, 07:42)

michelle:-
hi Stu (and fellower followers of Stu)

i've modified this style to create a little image gallery, but, it doesn't render correctly in IE 5(mac) or 6(pc). Safari is a bit wonky, too. if you can find a few minutes, please take a look and see if you can determine why--or where--i screwed things up.

www.touchette.net/users/michelle/designNew/indexSBS.html

thanks for doing some trailblazing, and your generosity in sharing what you have developed.
(12.11.2006, 18:42)

Jim S:-
Hi Stu,

I am a HUGE FAN! I've been working as a web designer for over 8 years and have recently over the last year broken into CSS. Thus, I've been searching far and wide for a GOOD pure CSS image zoom, and have finally arrived here!

I'm willing to donate $$$ for your assistance, as I'm clueless how to implement it to my site in a particular way. You can see my positioning predicaments here (red outlined images):

www.paradisoscrubs.com/imagezoomtesting.html

Also notice the Select Option form (in IE but not FF) cuts through the pop up zoom. IE also shifts them to the left when FF displays properly (do I have to use an ie-stylesheet.css?)

One idea I had was to eliminate products in the Left column and replace it with additional text information and decorative graphics. So the products would be in the Middle and Right columns only. But positioning for multiple images that are supposed to be equally aligned in columns, seems out of reach?

Any assistance, thoughts, or possible solutions would be most honored. Please email if possible, otherwise I'll check back here every now n then.

Best Regards,

--Jim S.---
SpeeeedyJ AT yahoo DOT COM
(17.11.2006, 22:54)

Stu:-
Jim, can you contact me stu{at}cssplay.co.uk
I have tried your email address but it bounces back.
(18.11.2006, 00:24)

Jim S:-
Sorry about that. SpeeeedyJIM at yahoo. I emailed you. Thanks!
(18.11.2006, 01:20)

Phillip:-
Hello Stu,
I am very new at this web site stuff and know absolutley nothing about writting HTML or CSS code but I am using yahoosite builder for my new web site and wanted to know how to get my thumbnail photos to enlarge on mouseover so you wouldn't have to click on them to enlarge. It is a Photography site and I have several images on each page and again I am just learning and have read lots of forum about this but they all talk in a language that, of course, I don't understand or know where to copy and paste the scripts they suggest or how to even begin. Like you I am very busy trying to be a single dad of 2 and a full time Nurse by day and trying to get my photography business off to a good start...everything I have read has led me back to your site in search of help.
Sencerely,
Phillip
(16.12.2006, 01:33)

dvnt:-
I used this script in a photo album, just increased the mouseover size and adjusted the
CSS to get it to fit into my template. It totally rocks. Not having to click an image and load a popup. This is a technique i'll use over and over again. Thanks STU!
(07.02.2007, 15:51)

Joseph:-
There is dark dot over the thumbnails upper left corner when i dont hover. How can i fix this problem?
(21.02.2007, 20:02)

Stu:-
Joseph, this demo is a couple of years old now and with better CSS support it can now be modified to remove the 'dot'.
Try it now and it should be ok. Change the large image border color to suit your page.
(21.02.2007, 20:18)

Karen:-
How do I get the code for Magnify an image?

Can you tell me how to implement it in an ASP.NET datalist?
(07.03.2007, 00:52)

Znupi:-
This is... well I'd say dumb but it's not. Only there's a much better way to do it.

Why should you change left, top, width, height and border properties upon :hover? Why don't you set them to the values they are needed and just switch from display: none; to display: block; ?

It's much easier in my opinion :).
(17.03.2007, 23:20)

Stu:-
Znupi, some browsers do not download the image when using display:none; so that when hovering you may have to wait whilst the image downloads. With this method the image is downloaded but not displayed so that you get no delay when hovering.
But you can use whatever method you like. Even visibility:hidden; and visibility:visible;
(17.03.2007, 23:27)

fgdfg:-
where do I get this script?
(24.03.2007, 11:07)

Mat:-
Hi Stu, I want to use this on a page that will have a lot of images, how can I make it so the larger image box appears above the page?
(26.07.2007, 14:07)

Daniel:-
Not letting post, keeps saying "posting error" (Not too helpful :s )I'll just email you the question.
(29.07.2007, 07:15)

Jer:-
Uhm where can i find the code for this script? or any download link?
(19.09.2007, 14:49)

Ian Tresman:-
I've tried this with two images next to each other, but in MSIE, the small images shows through the large image. I know the solution lies with z-index, but I'm darned if I can find it.
(28.10.2007, 18:39)

Stu:-
Ian, just add z-index:200; to the #menu a.p1:hover .large style.
(28.10.2007, 18:45)

Iain:-
I have tried the image magnification but have a small problem. If I have a mixture of Portrait and Landscape images the magnification is fixed width and height. I have tried using % for the width and height attributes in the

#menu a.p1:hover .large

block

ie

width:200%; height:200%

but to no avail.

Can I modify the CSS to maintain the aspect ration of the images whne enlarged.
(29.10.2007, 12:43)

jos:-
hey just wanted to say thanks for this. it worked perfectly for me. i used this for a class project, so thanks again.
(12.01.2008, 12:26)

Oscar M.:-
i can't see the code
(16.04.2008, 17:07)

i want the code:-
WHERES THE CODE???!?!?!
(09.07.2008, 21:17)

Stu:-
read the FAQs.
(09.07.2008, 21:19)

?:-
on my site, it just shows 2 of the same picture next to eachother
(09.07.2008, 21:45)

carley:-
hi stu. I have a site set up through a third party that lets me enter info for each page from a back end. Therefore I dont think i can control the head and body sections because the back end is set up so that i can only enter html snippets (like a img src+link for pictures and regular type). I havent gotten this to work for me yet using your source codes and im wondering if this is the problem or am i just somehow not doing the code correctly. please help its been three days and im going to loose it soon. Ive tried a million other sites and codes and nothing works (and yours is the nicest). Thank you.
(19.08.2008, 18:18)

Stu:-
carley, please email me with the page url and I will see if I can help
(19.08.2008, 18:52)

Roger V:-
Hi Stu, first of all many thanks to you for sharing your expertise over the WEB.
I am just a beginner with setting up a WEB application but your demos make it "quite" easy. I used your "'Fixed' layout version 3" (WWW.cssplay.co.UK/layouts/body4.HTML) as a base and I am working on integrating this "magnify" facility to automatically enlarge thumbnail images spread within the variable part of the page, I.e. The so-called "content" container.
My problem is that I would like to have enlarged image always centered within the displayed area thus avoiding the need to scroll up or down depending upon the position of the thumbnail.
I have almost succeeded by using these parameters :
"left:50%; top:50%; width:640px; height:399px; margin-top:-200px; margin-left:-320px;"
But the problem is that the vertical alignment appears to be done based upon the total length of the page rather than the vertical size of the displayed window on the screen. Result is that if a thumbnail is at the beginning of a long page, then enlarged image is not even visible to the visitor when the mouse is over it.
Assuming this is doable, could you please give me the trick to achieve it ?
Thanks
(23.08.2008, 16:02)

Cass:-
Hello, Stu. Thank you for the code. I would like to alter it it two ways. Firstly, as asked once in the comments, I need the enlargement size to relative to the thumbnail in the way that they would have the same ratio instead of being a fixed size because my page has landscape and portrait pictures. I've been unsuccessful in my attempts to do so. Secondly, how do I change the code so that the enlarged image is not preloaded? Thanks again.
(07.09.2008, 20:41)

Stu:-
To cater for any size image just make the full size image height:auto; width:auto; It is not possible with CSS to have the image load when required. CSS will load images even with dislay:none;
(07.09.2008, 20:45)

Cass:-
Excellent. Thank you.
(07.09.2008, 23:56)

Andy:-
Hi Stu.. REF: Image Magnifyer. I'm very new at web building & really love the demo.. cannot see anything on your web saying how i do it on my own site? Can you gve me some guidance please.
(26.01.2009, 02:09)

Cliff:-
Stu help!

I want to do several images (about 100) that are fixed and when you mouseover they become larger but the thumbnail stays in place and the enlarged image always displays in the center of the screen. Is this possible? Please help? Can you reply to bcbbab@yahoo.com
(24.06.2009, 16:22)

keith:-
Hi Stu,
Love the image magnifier but being very new haven't a clue how to impliment it on my site, or how to download the code. I have used lightbox 2 on a previous site but compared to your demo it really is a bit clunky. Any assistance you can offer on how to get the necessary files of here will be very gratefullt received. The site is an e commerce site and will of course carry an acknowledgement and back link.. once up and running there will be a donation to your very worthy cause too.

Thanks

keith.williams@rivierareborns.co.uk
(23.07.2009, 21:52)

Tamika:-
Hey Stu,
wonderful site you have developed. I was wondering how do I change the color of the background of the enlarged and thumbnail image, I tried by putting #000000 but nothing happens,could you tell me what I need to do to accomplish this
Thanks,
(11.11.2009, 18:35)

Gary:-
Hi Stu, I think this is a wonderfull piece of css. Well done to you!
Ive read the comments and can find one similar problem to mine. I have a lot of pictures in a table and seperate tr and td together. They all seem to work fine apart from the part where the enlarged picture shows under each of the thumbs next to the one being used. Ive tried the z-index in the large p1 hover... Please help a future fan. Thanks.
(19.11.2009, 00:39)

Stu:-
I have brought this demo up to date and simplified it. This allows several thumbnails to work together and have the large image above all thumbnails.
(19.11.2009, 11:02)

Gert Wiersma:-
Dear Stu,

Sorry when I ask a question that has been asked before. And sorry for my Enlish, it's not my native language. I read all the comment but can't find an answer to my problem. I would like de large image to be placed on the center of the screen instead of relative to the small image. I tried al lot, changing relative to absolute, changing all kind of parameters, nothing works. I'm suprised that the large image isn't allready placed in the center of the screen because of your script: a.p1 b {display:block; position:absolute; or has that nothing to do with it. Would appreciate your answer ! Greetings, Gert
(21.02.2010, 13:59)

sandy:-
Hi Stu,
I love the demo but the script is not on the page. How can I get the latest script please?
(24.02.2010, 19:06)

Stu:-
The code and strylesheet is in the page source code and the site FAQs will tell you where to look.
(24.02.2010, 19:49)

Tina:-
This coding does not work in Firefox. How do we fix that?
(09.04.2010, 16:18)

Stu:-
This coding does work in Firefox. Which version are you using?
(09.04.2010, 16:44)

Tina (update to comment):-
Sorry Stu. It does work now. I had to figure it out through many tests where you don't give complete instructions. I hadn't check your own website in Firefox (just mine) and when I did and saw yours did work in Firefox, I was persistant in getting mine to work too. Not only is it working fantastically, I'm totally thrilled at how much faster the page moves. I used to have a really bad scrolling drag that I attributed to having too much javascript, but with your coding it's now actually FUN to play with the mouse back and forth over them. They now popout instantly with absolutely no drag. With the coding I had, I didn't even realize my pictures weren't even hovering in Firefox or IE in compatibility mode, and there was no option in my coding to click on the thumbnail or to hover.
(10.04.2010, 04:27)

Tina - continued:-
-continued- With your coding I can both click or hover now! With my old coding it didn't pass W3C validation either. But now it works in IE, IE compatibility view, and in Firefox AND now passes Validation!! I'm super thrilled!! Here's the link if anyone wants to replicate. www.Mikes-Rental.com (it's not coded on the home page but only the interior camera pictures. The CSS is easily found but I warn you that it's edited from Stu's version. I also had to use doctype transitional rather than strict due to validation. Thanks Stu! I'm going to send you a little money for this. It won't be much as this job only paid $300 for the total website. Thanks again!
(10.04.2010, 04:29)

Mark:-
Hi Stu,

Am I right that the rounded borders and shadow don't work in IE?
Is there a way to make the make the popup window a callout, so with a pointing arrow?

Regards,

Mark
(16.04.2010, 19:19)

Mark:-
Hi Stu,

www.cssplay.co.uk/menu/css3-shadows.html

In this URL the shadow does work in IE, can it be combined?
(17.04.2010, 15:41)

Stu:-
Yes you can combine the two methods if you want.
(17.04.2010, 15:47)

Mark:-
Hi Stu!

I will try that, can you help with adding an arrow? Like example 6 in plugins.learningjquery.com/cluetip/demo/

That is what I try to achieve, however your code seems quicker than jquery so I prefer it with your code.

Many thanks and best regards
(17.04.2010, 16:37)

Stu:-
www.cssplay.co.uk/menu/tooltips
(17.04.2010, 16:49)

Angie:-
Hi Stu - what an awesome site! I would like to get the code for your 19.11.2009 post where you mention several thumbnails grouped together with the enlarged image above...where do I find that page?

Thank you for all that you do!
Angie
(02.05.2010, 08:45)

dub:-
Thanks for the awesome css, I got this working on my page. But I can't get the enlarged images to stay in place. For example when I adjust my bookmark sidebar left or right. It moves the enlarged image with the sidebar. In your example the enlarged image does not move when I adjust the sidebar. How do I set it to not move like yours. Thanks again, dub..
(03.11.2010, 02:53)

Max:-
Where can I find code for this demo? I see Information and Copyright but now code. Please help. Thanks!
(07.09.2011, 15:18)

Stu:-
Check the site FAQs
(07.09.2011, 15:37)

Michael:-
Hi Stu, just stumbled upon your site and it's a wealth of thoughtful information. I plan to use this tip on my new Magento store and will give you full credit in the .css file. Thank you for assembling you brilliant thoughts in such an organized and accesible website.
(06.10.2011, 01:11)

Michael:-
Hi Stu, just stumbled upon your site and it's a wealth of thoughtful information. I plan to use this tip on my new Magento store and will give you full credit in the .css file. Thank you for assembling your brilliant thoughts in such an organized and accesible website.
(06.10.2011, 01:11)

David:-
apologies, I'm being really thick here, but I just cannot find a link to the actual method - can view demo, but how do you do it?
(04.02.2012, 05:41)

Nate Brown:-
Hello Stu, great code, thank you.
I've noticed that on my iPhone i can get the larger image to show when i touch the smaller image, but it seems there isn't a way to have it go away.
Ideas? I'll keep working and if I figure something out, I'll post again!
(12.06.2012, 22:03)

Stu:-
For the iPad, iPhone etc. you will need to style a 'close' button to show on hover which when tapped will close the large image.
(12.06.2012, 22:10)

Stu:-
Now updated to work on the iPad, iPhone and iPod Touch
(14.06.2012, 21:11)

Michael:-
Hi Stu,

I'm very very inexperienced in this, and i dont no how to find the code for the magnify image stuff, and how would i add it to my website?

Thanks
(19.10.2012, 03:16)

Ahmed:-
where is the code and the needed files to use your examples
(10.07.2013, 13:16)

Stu:-
Check the site FAQs and also the copyright requirements on each demo page.
(10.07.2013, 13:37)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page