Simple animated hover effect for images using CSS3 and HTML

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

Animated Hover Effects

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.


Live Demo

 

Please note this effect can be applied to any other image. If you have your own idea, then feel free to modify the code and CSS styles to fit your needs.

HTML code

Let's take a look at html code.

<div class="jm-item first">
<div class="jm-item-wrapper">
<div class="jm-item-image">
<img src="http://yourdomain.com/images/image1.jpg" alt="Pizza Ristorante" />
<span class="jm-item-overlay"> </span>
<div class="jm-item-button"><a href="#">View</a></div>
</div>
<div class="jm-item-title">Pizza Ristorante</div>
</div>
</div>


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:

<img src="http://yourdomain.com/images/image1.jpg" alt="Pizza Ristorante" />


To change the button text and path, you have to edit this section:

<div class="jm-item-button"><a href="#">View</a></div>


The title can be easily replaced within this section:

<div class="jm-item-title">Pizza Ristorante</div>


CSS styles

CSS styles of the main containers:

.jm-item {
    padding: 10px;
    display: inline-block;
    text-align: left;
}
.jm-item-wrapper {
	position: relative;
	padding: 7px;
	background: #E8D7B6;
}


CSS styles of the image and its container:

.jm-item-image {
	position: relative;
    overflow: hidden;
}
.jm-item-image img {
	display: block;
}


CSS styles of the title container:

.jm-item-title {
    position: absolute;
    left: -10px;
    bottom: 17px;
    background: #FF6B0E;
    line-height: 1.5em;
    font-weight: normal;
    padding: 7px 9px 6px;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    color: #FFFFFF;
    font-size: 1.4em;
}


CSS styles of the span element:

.jm-item-overlay {
	background: #000;
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-transition: opacity 0.5s ease-in 0s;
	-moz-transition: opacity 0.5s ease-in 0s;
	-o-transition: opacity 0.5s ease-in 0s;
	transition: opacity 0.5s ease-in 0s;
}
.jm-item-wrapper:hover .jm-item-overlay {
	opacity: 0.3;
}


CSS styles of the „View” button:

.jm-item-button {
	height: 50px;
	width: 50px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -25px;
}
.jm-item-button a {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #FF6B0E;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    color: #FFFFFF;
    font-size: 1.2em;
    line-height: 50px;
    -webkit-transition: all 0.2s ease-in 0s;
    -moz-transition: all 0.2s ease-in 0s;
    -o-transition: all 0.2s ease-in 0s;
    transition: all 0.2s ease-in 0s;
    text-decoration: none !important;
    display: block;
}
.jm-item-button a:hover {
	background: #3b3b3b;	
}


The additional CSS styles for the „Example 1” are preceded by the „first” class used for the "jm-item" element. These styles are responsible for the animated effect of the „View” button.

.first .jm-item-button {
	-webkit-transition: all 0.5s ease-in 0.5s;
	-moz-transition: all 0.5s ease-in 0.5s;
	-o-transition: all 0.5s ease-in 0.5s;
	transition: all 0.5s ease-in 0.5s;
	top: -50px;	
}
.first .jm-item-wrapper:hover .jm-item-button {
	top: 20%;	
}


Example 2

Animated Hover Effects

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.


Live Demo

 

HTML code

Let's take a look at html code.

<div class="jm-item second">
<div class="jm-item-wrapper">
<div class="jm-item-image">
<img src="http://yourdomain.com/images/image1.jpg" alt="Pizza Ristorante" />
<div class="jm-item-description">
Lorem ipsum dolor sit amet.
1. Lorem
2. Ipsum
3. Dolor <div class="jm-item-button"><a href="#">View</a></div>
</div>
</div>
<div class="jm-item-title">Pizza Ristorante</div>
</div>
</div>


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:

<div class="jm-item-description">
Lorem ipsum dolor sit amet.
1. Lorem
2. Ipsum
3. Dolor <div class="jm-item-button"><a href="#">View</a></div>
</div>


CSS styles

The basic CSS styles are the same as for the first example:

.jm-item {
	padding: 10px;
	display: inline-block;
	text-align: left;
}
.jm-item-wrapper {
	position: relative;
	padding: 7px;
	background: #E8D7B6;
}
.jm-item-image {
	position: relative;
	overflow: hidden;
}
.jm-item-image img {
	display: block;
}
.jm-item-title {
    position: absolute;
    left: -10px;
    bottom: 17px;
    background: #FF6B0E;
    line-height: 1.5em;
    font-weight: normal;
    padding: 7px 9px 6px;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    color: #FFFFFF;
    font-size: 1.4em;
}
.jm-item-overlay {
	background: #000;
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-transition: opacity 0.5s ease-in 0s;
	-moz-transition: opacity 0.5s ease-in 0s;
	-o-transition: opacity 0.5s ease-in 0s;
	transition: opacity 0.5s ease-in 0s;
}
.jm-item-wrapper:hover .jm-item-overlay {
	opacity: 0.3;
}
.jm-item-button {
	height: 50px;
	width: 50px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -25px;
}
.jm-item-button a {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #FF6B0E;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    color: #FFFFFF;
    font-size: 1.2em;
    line-height: 50px;
    -webkit-transition: all 0.2s ease-in 0s;
    -moz-transition: all 0.2s ease-in 0s;
    -o-transition: all 0.2s ease-in 0s;
    transition: all 0.2s ease-in 0s;
    text-decoration: none !important;
    display: block;
}
.jm-item-button a:hover {
	background: #3b3b3b;	
}


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.

.second .jm-item-wrapper .jm-item-title {
	-webkit-transition: all 0.2s ease-in 0s;
	-moz-transition: all 0.2s ease-in 0s;
	-o-transition: all 0.2s ease-in 0s;
	transition: all 0.2s ease-in 0s;
}
.second .jm-item-wrapper:hover .jm-item-title {
	left: -100%;
}
.second .jm-item-description {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;	
	background: rgba(0,0,0,0.4);
	color: #fff;
	top: 100%;
	-webkit-transition: all 0.5s ease-in 0s;
	-moz-transition: all 0.5s ease-in 0s;
	-o-transition: all 0.5s ease-in 0s;
	transition: all 0.5s ease-in 0s;
}
.second .jm-item-wrapper:hover .jm-item-description {
	top: 0;
}


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.

VirtueMart Products module in the JM-Modern-Store template:

 

Animated Hover Effects

 

VirtueMart Shopfront/Category views in the JM-School-Tools-Store template:

 

Animated Hover Effects

 

VirtueMart Products module in the JM-School-Tools-Store template:

 

Animated Hover Effects

 

We hope that our examples will be useful for you as well as will inspire you to create your own, unique animated effects.


Live demoDownload sources

News

Check this week's specials! Till 19th August.

2014-08-13 11:30:25
See this week's offer! This discount is valid till 19th August!Mix promotions, use any other discount coupon a ...

Do not pay for each separate template, grab them all!

2014-08-13 11:24:00
      Incredible beneficial occasion for developers or individ ...

Blog

CSS3 powered hover effects for your logo.

2014-07-25 13:00:00
Would you like to spice up a logo image on your site? Then keep reading :) We have prepared 6 examples of a mo ...

Modify JM Doctor color version in this simple way!

2014-07-14 11:52:15
In this article I would like to demonstrate how to change template color version in JM Doctor template followi ...

Faq

Utility classes for showing and hiding content by device.

2013-11-04 14:02:29
When customizing your own Joomla 3 site for tablets and mobile devices, you may come to the conclusion that yo ...

What does the subscription mean in practice?

2013-10-10 11:35:35
Customers often have doubts what the subscription exactly means in practice.They seem to be surprised that the ...