Log in

View Full Version : CSS Smart Image Enlarger- modify to include 'max width'



Mark Johnston
04-04-2012, 02:00 PM
I'm thrilled I managed to make use of the great image enlarger here (http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_enlarger/)
thank you ever so much for this snip of code.

I'm especially amazed, because it's working for animated gifs without me having to have two copies (which was what I did before as EW/FP did not thumbnail animated gifs.)

some of my main photos are huge, and I'd like the popups to be restricted to a percentage max of viewers screen size, keeping the aspect ratio.

I tried what I thought would work- I took this section

.ienlarger a:hover span {
display:block;
top: 5px; /* means the pop-up's top is 50px away from thumb's top */
left: 9px; /* means the pop-up's left is 90px far from the thumb's left */
z-index: 100;

and made it

.ienlarger a:hover span {
display:block;
top: 5px; /* means the pop-up's top is 50px away from thumb's top */
left: 9px; /* means the pop-up's left is 90px far from the thumb's left */
max-width:80%;
max-height:80%;
z-index: 100;



but failed.... can anyone tell me if what I want is readily achievable/what to add?