In this article we woud like to introduce some of CSS3 styles that allows to display a code using animated effects. As for example we will take a product, which you can display in a custom HTML module of Joomla. Such a product you can link to an article, extension, or wherever you want. In our templates we often use CSS3 animated effects for VirtueMart products as well as for custom banners. Let's take a look at examples.

Example 1

In the first example we present a product image and its title. On hover state the image will be darkened by semi-transparent black layer and from the top will appear the "View" button. Please see this example on live demo.

The markup is very simple. You need to create a container with the class „jm-item first”. Inside, you need to create another container with the class „jm-item-wrapper”. This container will hold a div with the class „jm-item-image” and a second div with the class „jm-item-title”. Inside the „jm-item-image” div, you need to put a product image, an empty span with the „jm-item-overlay” class and a div with the class”jm-item-button” which will hold a button link. Inside the „jm-item-title” you need to put a product title.

Let's look at the HTML code in detail. If you would like to change an image to your own, you will have to edit a path for the img tag:

Example 2

The second example is a little more complex comparing to the first one. On hover state, the image title will slide left and completely dissapear. From the bottom will appear the short description and the "View" button. Please see this example on live demo.

You need to create a container with the class „jm-item second”. Inside, you need to create another container with the class „jm-item-wrapper”. This container will hold a div with the class „jm-item-image” and a second div with the class „jm-item-title”. Inside the „jm-item-image” div, you need to put a product image and another div with the „jm-item-description” class, where you need to put a product description and a div with the class”jm-item-button” for a button link.. Inside the „jm-item-title” you need to put a product title.

As you can see the html code is quite similar. The image path and title you can change in the same section as for the first example. However if you would like to change the product description and the "View" button text and its path, you will have to edit this section:

The additional CSS styles for the "Example 2" are preceded by the "second" class used for the "jm-item" element. These styles are responsible for the animated effect of the product description and its title.

Other Examples

In our offer we have many templates that use animated effects. As for example, you can see JM-Modern-Store and JM-School-Tools-Store templates that include VirtueMart store component for Joomla. We have used similar CSS styles for products to present animated effects.

According to European Union law, we would like to inform you that our website uses cookies in order to deliver you highest quality services. You may specify how cookies are being stored in your browser's settings.