I’m at a point with my website where I’m largely happy with most of the parts on it, though now I’d like to introduce a little more movement with various scroll/mouseover/page load animations; without making it too distracting, of course.
At the moment I’d like to create a mouseover animation which causes the image to zoom much like the one’s on this page Projects - Gillespies - this problem is I can’t work out how to do it because the image is not an image element, it’s a “background” image being grabbed from the CMS so it doesn’t take into account overflow being set to not visible.
If you scroll to the bottom of my home page, you’ll see the images I’d like to achieve this on:
That’s because transformations such as scale(x,y) affect element rendering. Not calculating their properties. Unless you use css - box-sizing - You can find a bit of literature here Box Sizing | CSS-Tricks - CSS-Tricks