CSS3  1603789067

Stylish CSS3 Transition Effects for Product Display Tutorial

Displaying products interactively and elegantly is really important to impress the customers before exploring products in detail. In this tutorial, I’m going to show you how to create stylish CSS3 transition effects for displaying your products. With CSS3 transition property, we can create a lot of amazing effects easily without any additional JavaScript.

Mobile Email Marketing Designs

The containers

First thing first, you need containers to display each of your products.

HTML for the containers:

<div class=”box”> <div class=”box-img”><img src=”images/1.png” /></div> <div class=”box-temp”> </div> <div class=”box-info”> <div class=”title”>Spaghetti Bolognese </div> <div class=”icon”> <div class=”icon-love”> <div class=”flaticon-heart13″></div> </div> <div class=”icon-text”> <a href=”#”> Love & Share</a> </div> </div> </div> </div>

So here are the brief descriptions of HTML structure of the containers:

  • .box : the main container that hold all the other sub containers inside it.
  • .box-img : contains the product image.
  • .box-temp : contains the mask to cover the image when users mouse-hover on it.
  • .box-info : contains all the information of the product, such as title and icon.
  • .title : contains the product’s title.
  • .icon : contains the heart icon to let users love and share the product

For this tutorial, we will add the love & share button using a heart icon so customers could share the products they love. Thanks to Flaticon, we can easily add the heart icon with the webfont icon technique. Also, we’d like to give credit to Free Food Photos for the yummy pictures.

The transition effect

In this part, we’re not going to go through each of the effects. Instead, I’m going to give you a basic understanding of creating the transition effect, so you will be able to modify or create more effects according to your needs. The CSS below will show you how to create the “Zoom Effect”.

CSS for the containers:

.box{ position: relative; float:left; z-index: 0; width: 300px; height: 199px; margin: 5px; margin-top: 5px; margin-left: 5px; background-color: red; overflow: hidden; } .box-img { position: absolute; z-index: 5; width: 200px; height: 100px; top: 0px; left: 0px; width: 300px; height: 199px; } .box-temp { position: absolute; z-index: 10; width: 300px; height: 199px; background-color: black; opacity: 0; transition: all 300ms ease-out; } .box-info{ position: absolute; z-index: 100; width: 200px; height: 100px; top: 0px; left: 0px; width: 300px; height: 199px; } @font-face { font-family: “Bebas”; src: url(“BebasNeue Regular.otf”); } .title { position: absolute; width: 300px; z-index: 100; top: 50px; left: 0px; text-align: center; font-family: Bebas; color:white; font-size: 1px; opacity: 0; transition: all 300ms ease-out; } .icon { position: absolute; width: 110px; height: 20px; padding: 3px; background-color: white; z-index: 100; top: 100px; left: 90px; color: black; font-family: Flaticon; font-size: 1px; opacity: 0; transition: all 300ms ease-out; } .icon-love{ float: left; margin-right: 5px; width: 24px; } .icon-text a{ font-family: Bebas; font-size: 19px; float: left; margin-top: 2px; color: black; text-decoration: none; }

You can see that we use transition property for each of the containers. For example in the .box-temp we add a transition effect on all properties, with a duration of 300ms and with an ease-out mode for the timing function. You may want to add prefixes -webkit-, -moz-, or -o- for older browsers’ versions.

Also, we need to set the initial value for the CSS property like the opacity for the .box-temp, .icon, and .title. The other value that needs to be set is the font-size property for .icon and .title to create the zooming effect.

For the title font, we use Bebas Neue font, a free font from Ryoichi Tsunekawa. Using the @font-face property, we can add various types of font types we love.

CSS for the zooming transition effect:

.box:hover .box-temp { opacity: 0.5; } .box:hover .title { opacity: 1; font-size: 36px; } .box:hover .icon { opacity: 0.8; font-size: 18px; } .icon:hover{ color: red; } .icon-love{ float: left; margin-right: 2px; width: 24px; height: 20px; } .icon-text { font-family: Bebas; font-size: 19px; display:block; margin-top: 1px; color: black; text-decoration: none; width: 80px; height: 20px; } .icon-cont{ float:left; }

The zoom effect will be triggered by a mouse hover on the .box container. Basically, the transition property will change the initial values we have set before into the values triggered by the mouse hover.

So here’s what’s going to happen when a mouse pointer hovers to a product:

  • .box-temp opacity will be increased from 0 to 0.5.
  • .title opacity will be increased from 0 to 1, and the font-size will be enlarged from 1px to 36px to create the zooming effect.
  • .icon opacity will be increased from 0 to 0.8 and the font-size will be boosted from 1px to 18px to give the zooming effect.
  • Next, when the mouse pointer hovering the heart icon (.icon), the heart color will be changing from black to red.

Now, this is the time when transition comes into action. Because of the transition property, the zooming effect will be run smoothly back and forth. This is why I like to transition in CSS!

Conclusion

With CSS transition property we can create a lot of awesome effects without adding any JavaScript. Hopefully, you get some ideas and inspiration from this tutorial. If you like this tutorial please share it with your friends and colleagues