This module no longer has any hamburgers in it but I thought it was a cool name. This package is based on a layout from the JSN Gruve template. It is great for making points stand out more with some animated graphics.

Need cool template?

JSN Gruve is an amazing Joomla template with stunning visual design. Equipped with powerful features this template allows...

Easy to Start

JSN Gruve provides unique mechanism of installing sample data on directly your current website. Just few clicks and the demo...

Care about support?

Compared to big guys, we produce very little amount of templates, but with fanatical focus on quality of both product and support.

CSS

/*-- Hambuger Hover --*/	

.hamburger-hover {
	padding: 15px 0;
}

.hamburger-hover-description {		
	overflow: hidden;
}

.hamburger-hover img.animation {
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
}

/* Sets an intial background colour to shine through the transparent Png */
.hamburger-hover img {
	background-color: #a2a2a2;
	margin: 10px;
}

/* The hover colours for the transparent icons */
.jsn-color-red .hamburger-hover:hover img {
	background-color: #bf0000;
}

.jsn-color-green .hamburger-hover:hover img {
	background-color: #63750F;
}

.jsn-color-blue .hamburger-hover:hover img {
	background-color: #389ED1;
}

.jsn-color-violet .hamburger-hover:hover img {
	background-color: #AB3C60;
}

.jsn-color-orange .hamburger-hover:hover img {
	background-color: #D18903;
}

.jsn-color-cyan .hamburger-hover:hover img {
	background-color: #268A76;
}

HTML

<!-- Module 1: Doves -->
<div class="hamburger-hover">
	<img src="/images/modules/788/Doves.png" alt="" class="animation" style="float: left;" />
	<div class="hamburger-hover-description">
		<h3 class="jsn-moduletitle"><span class="jsn-moduleicon"><a href="http://quantumwarp.com/">Need cool template?</a></span></h3>
		JSN Gruve is an amazing Joomla template with stunning visual design. Equipped with powerful features this template allows...
	</div>
</div>

<!-- Module 2: Party Dress -->
<div class="hamburger-hover">
	<img src="/images/modules/788/Party-Dress.png" alt="" class="animation" style="float: left;" />
	<div class="hamburger-hover-description">
		<h3 class="jsn-moduletitle"><span class="jsn-moduleicon"><a href="http://quantumwarp.com/">Easy to Start</a></span></h3>
		JSN Gruve provides unique mechanism of installing sample data on directly your current website. <a href="http://quantumwarp.com/" rel="nofollow">Just few clicks</a> and the demo...
	</div>
</div> 

<!-- Module 3: Wedding Bells -->
<div class="hamburger-hover">
	<img src="/images/modules/788/Wedding-Bells.png" alt="" class="animation" style="float: left;" />
	<div class="hamburger-hover-description">
		<h3 class="jsn-moduletitle"><span class="jsn-moduleicon"><a href="http://quantumwarp.com/">Care about support?</a></span></h3>
		Compared to big guys, we produce very little amount of templates, but with fanatical focus on quality of both product and support.
	</div>
</div>    

Notes

• utilises transparent png and a changing background colour - inbuilt to gruve but this is the code it depends on just incase it is used in another template
• you have to create the transparent icons
• This is from the JSN Gruve Template
• You must create seperate module for each HTML code block.
• They were original published in the content-top position but can go anywhere now.
• I would use the module names as noted above for the module names to keep things organised.