What we did

June 2019 Transformations

This month we delved into a few sites that told us about some of the transitions available to catch the eye of our viewers. We started with an article from the Web Designer Depot.

https://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/

This article had 8 things we can do but of real interest was the image hover. I was look for ways I could have the photos on my page enlarged for people to see them better and third one on the list used transform to enlarge and shrink an image. Here’s the code used to enlarge.

.grow:hover

{webkit-transform: scale(1.3);

-ms-transform: scale(1.3);

transform: scale(1.3);

}

And to shrink.

.shrink:hover

{

webkit-transform: scale(0.8);

-ms-transform: scale(0.8);

transform: scale(0.8);

}

Steve South
Web Design leader