Hi,
I am trying to have an image Enlarge on Mouse Roll Over.
I have it working here OK https://www.peggyhinchliffe.co.uk/extra-pages/test.html
But when I have the same coding with a column page it will not enlarge, the issue appears to be caused by the column structure, but I can not see how to resolve it.
Here is the problem page https://www.peggyhinchliffe.co.uk/extra-pages/margaret-hinchliffe.php
Any assistance gratefully received.
Cheers
Ron
For any page to work reliably, the HTML and CSS must be valid. I’d like to suggest that you begin by validating your code.
I don’t think its a good idea to resize that image from the middle of a column anyway as that looks very odd.
The reason the image is not growing is because you have a max-width:100% on all images so it can’t grow bigger than its container anyway. You would need to set max-width:none on the thumbnail to allow it to grow but the effect will be bad especially as you are not absolutely placing the image somewhere.
If you want this type of effect then a lightbox script would be a better choice and there are many to choose from.
As Ron said make sure you first have valid code as a good base to work from
Another css alternative would be to scale the image via transform as this behaves differently to actually altering its dimensions. Rather like relative positioning, it will not alter the element’s original space within the document flow or be bound by the space of its parent container.
Using something like transform: scale(1.2); would expand the image without pushing surrounding elements away or constraining the image to its parent’s size.
You can also adjust the transform origin to best effect.
Thanks for the reply, I have gone for a lightbox and am installing it through out the site
Cheers
Ron
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.