Using CSS Transition ‘Ease In and Out’ to add a Zooming Effect

Effects like transitions needs jQuery codes, well, not all of us are oriented with the language and definitelly can’t learn them just by copying and pasting the codes posted on the net. Whilst, CSS is a common language to use in making website and most designers are pretty well oriented with it. Below codes is a sample of how to use the CSS transitions Ease-in-out effects on your woocommerce product image, or just about any image on your site.

Use the following transition codes on your image. The 3s define the time delay, adjust it to fit your standards.

On your hover code, add the width you wish it zoom out on

ul li a img {
-webkit-transition: width 3s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 3s ease-in-out;
}

ul li a img:hover {
width: 100%;
height: auto;
position: absolute;
left: 0;
right: 0;
top: -16px;
opacity: 1;
}

Other transition effects to use

ul li a img {transition-timing-function: linear;}
ul li a img {transition-timing-function: ease;}
ul li a img {transition-timing-function: ease-in;}
ul li a img{transition-timing-function: ease-out;}
ul li a img {transition-timing-function: ease-in-out;}