<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<body>
<div class="container">
<div class="logo">
<a href="http://studiomp4.hol.es/"><img src="http://www.plici.ro/images/logo-1386110275.png" border="0"></a> </div>
<h1>Image Hover Effects</h1>
<div class="sep">
<h2>Zoom In & Zoom Out</h2>
<div class="image-hover img-zoom-in">
<img src="http://www.plici.ro/images/1-1386110332.jpg">
</div>
<div class="image-hover img-zoom-out">
<img src="http://www.plici.ro/images/2-1386110350.jpg">
</div>
</div>
<div class="sep">
<h2>Rotate Right & Left</h2>
<div class="image-hover img-rotate-right">
<img src="http://www.plici.ro/images/3-1386110366.jpg">
</div>
<div class="image-hover img-rotate-left">
<img src="http://www.plici.ro/images/4-1386110379.jpg">
</div>
</div>
<div class="sep">
<h2>Origin</h2>
<div class="image-hover img-origin">
<img src="http://www.plici.ro/images/5-1386110395.jpg">
</div>
</div>
<div class="sep">
<h2>Square & Ellipse</h2>
<div class="image-hover img-square-ellipse" style="background:#fff url(http://www.plici.ro/images/6-1386110415.jpg) no-repeat -100px -100px"></div>
<div class="image-hover img-ellipse-square" style="background:#fff url(http://www.plici.ro/images/7-1386110428.jpg) no-repeat -100px -100px"></div>
</div>
<div class="sep">
<h2>Square & Round</h2>
<div class="image-hover img-square-round" style="background:#fff url(http://www.plici.ro/images/1-1386110332.jpg) no-repeat -100px -100px"></div>
<div class="image-hover img-round-square" style="background:#fff url(http://www.plici.ro/images/2-1386110350.jpg) no-repeat -100px -100px"></div>
</div>
<div class="sep">
<h2>Layer-Background-Change</h2>
<div class="image-hover img-layer-image-hover-backgroundchange">
<img src="http://www.plici.ro/images/3-1386110366.jpg">
<div class="layer"></div>
</div>
</div>
<div class="sep">
<h2>Rotate & Scale</h2>
<div class="image-hover img-rotate-scale">
<img src="http://www.plici.ro/images/4-1386110379.jpg">
</div>
</div>
<div class="sep">
<h2>Rotate-x / -y / -z</h2>
<div class="image-hover img-rotate-x">
<img src="http://www.plici.ro/images/5-1386110395.jpg">
</div>
<div class="image-hover img-rotate-y">
<img src="http://www.plici.ro/images/6-1386110415.jpg">
</div>
<div class="image-hover img-rotate-z">
<img src="http://www.plici.ro/images/7-1386110428.jpg">
</div>
</div>
<div class="sep">
<h2>3D Image Change</h2>
<div class="imagechange-3d image-hover hover">
<div class="imagechange-3d-inner">
<div class="imgchange-1">
<img src="http://www.plici.ro/images/1-1386110332.jpg">
</div>
<div class="imgchange-2">
<img src="http://www.plici.ro/images/2-1386110350.jpg">
</div>
</div>
</div>
</div>
<div class="sep">
<h2>Sharp to Blur</h2>
<div class="image-hover img-sharp-blur">
<img src="http://www.plici.ro/images/3-1386110366.jpg">
</div>
</div>
<div class="sep">
<h2>Color to Grayscale</h2>
<div class="image-hover img-color-grayscale">
<img src="http://www.plici.ro/images/4-1386110379.jpg">
</div>
</div>
<div class="sep">
<h2>Inner Shadow</h2>
<div class="image-hover img-inner-shadow">
<img src="http://www.plici.ro/images/5-1386110395.jpg">
<div class="layer"></div>
</div>
<div class="image-hover img-inner-shadow-2">
<img src="http://www.plici.ro/images/6-1386110415.jpg">
<div class="layer"></div>
</div>
</div>
<div class="sep">
<h2>Image Opacity</h2>
<div class="image-hover img-opacity">
<img src="http://www.plici.ro/images/7-1386110858.jpg" class="img-1">
<img src="http://www.plici.ro/images/1-1386110332.jpg" class="img-2">
</div>
</div>
<div class="sep">
<h2>Image Roll</h2>
<div class="image-hover img-roll">
<img src="http://www.plici.ro/images/2-1386110350.jpg" class="img-1">
<img src="http://www.plici.ro/images/3-1386110366.jpg" class="img-2">
</div>
</div>
<div class="sep">
<h2>Shadow 1</h2>
<div class="image-hover img-shadow-1">
<img src="http://www.plici.ro/images/4-1386110379.jpg">
</div>
</div>
</div>
</body>
</html>
/*****************************/
/* Copyright by CreativeDive */
/*****************************/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600);
/* if use SSL (https://) >>> set the URL Source to https://fonts.googleapis.com/... to load google web-fonts */
/* SHOWROOM CSS */
* {font-family:'Open Sans', sans-serif, Segoe UI light;font-weight:100}
html, body {margin:0px;padding:0px;width:100%;height:100%}
body {background:#d9d9d9 url("icons/background.jpg") repeat-y center top}
body.light, body.light {background:#d9d9d9 url("icons/background.jpg") repeat-y center top!important}
.container {padding:50px;width:990px;margin:0 auto}
.logo {text-align:center;width:100%}
.logo img {text-align:center;margin:0px auto 20px auto;border:0px}
h1, h2, h3 {font-weight:300;width:100%;text-align:center;color:#646464;float:left}
h3 {color:#1787d6}
.color.blue {font-weight:600;color:#1787d6;background:none!important}
.color.grey {font-weight:600;color:#b5b5b5;background:none!important}
.color.green {font-weight:600;color:#509b07;background:none!important}
.color.orange {font-weight:600;color:#d18117;background:none!important}
.color.yellow {font-weight:600;color:#c8a208;background:none!important}
.color.red {font-weight:600;color:#d30100;background:none!important}
.color.purple {font-weight:600;color:#9a0fb8;background:none!important}
.color.pink {font-weight:600;color:#b4039d;background:none!important}
.description {font-weight:300;font-size:20px;margin-bottom:30px;width:100%;text-align:center;color:#646464}
table, .content {border-collapse:collapse;float:left;clear:both;width:100%;margin-bottom:50px;background:#fff;border:10px solid #eee;
box-shadow:0px 1px 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 1px 8px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0px 1px 8px rgba(0, 0, 0, 0.3)}
td, th {padding:40px 20px 40px 20px;border:1px dotted #ccc;font-size:14px;text-align:center;color:#aaa}
.center {margin:0 auto;width:990px}
ul {margin:0px;padding:0px;list-style:none;width:330px;float:left}
li {display:inline-block;width:100%;height:200px;padding:40px 0px 40px 0px;position:relative;overflow:hidden;border-left:1px dashed #777777}
li.li-title {display:inline-block;width:100%;height:auto;padding:0px 0px 0px 0px;position:relative;overflow:visible;border:0px}
li.li-title h2, li.li-title h3 {text-align:left}
/* DOCUMENTATION CSS */
.content-in {background:#fff;padding:20px;font-size:13px}
.content-in table {border-collapse:collapse;float:left;clear:both;width:100%;margin:0px;background:#fff;border:1px solid #fff;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}
.content-in td {padding:5px;border:1px dotted #ccc;font-size:13px;text-align:center;color:#000}
td.light {background:#d9d9d9 url("icons/background.jpg") repeat-y center top;padding:20px}
td.dark {background:#060606 url("icons/background-dark.gif") repeat-y center top;padding:20px}
td.transparent {background:#d9d9d9 url("icons/background-transparent.jpg") repeat-y center top fixed;padding:20px}
code {font-family:"Courier New", monospace, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco;color:#27BB0A;font-size:12px}
pre code {
font-family:"Courier New", monospace, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco;
display:block;
clear:both;
background:#000;
padding:20px 0px 20px 0px;
color:#fff;
font-size:12px;
overflow:auto;
line-height:16px;
margin:0px 0px 0px 0px;
white-space:pre;
width:100%
}
.comp td {padding:5px}
.yes {display:block;background:url("icons/yes.png") no-repeat center center}
.no {display:block;background:url("icons/no.png") no-repeat center center}
.att {display:block;background:url("icons/att.png") no-repeat center center}
.sep {width:100%;text-align:center}
.sep .image-hover {margin:20px 20px 20px 0px}
/****** image hover ******/
.image-hover * {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.image-hover {position:relative;width:450px;height:200px;display:inline-block;overflow:hidden;background:#fff;border:10px solid #fff;
box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3)}
.image-hover a {text-decoration:none}
.image-hover img {margin:-100px 0px 0px -100px}
/*** effect zoom in ***/
.img-zoom-in img
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
.img-zoom-in:hover img
{
transform:scale(1.1);
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1)
}
/*** effect zoom out ***/
.img-zoom-out img
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
.img-zoom-out:hover img
{
transform:scale(0.9);
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9)
}
/*** effect rotate right ***/
.img-rotate-right img
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
.img-rotate-right:hover img
{
transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-ms-transform:rotate(20deg);
-o-transform:rotate(20deg)
}
/*** effect rotate left ***/
.img-rotate-left img
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
.img-rotate-left:hover img
{
transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-ms-transform:rotate(-20deg);
-o-transform:rotate(-20deg)
}
/*** effect layer hover - black ***/
.img-layer-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:#000;opacity:0}
.img-layer-hover:hover .layer {opacity:0.7}
.img-layer-hover .layer
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-hover:hover .layer
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect layer-image hover - black ***/
.img-layer-image-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#000;background-image:url("icons/lupe.png");background-repeat:no-repeat;background-position:center center}
.img-layer-image-hover:hover .layer {opacity:0.7;background-color:#000;background-image:url("icons/lupe.png");background-repeat:no-repeat;background-position:center center}
.img-layer-image-hover .layer
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-image-hover:hover .layer
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect layer-text hover - black ***/
.img-layer-text-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#000;color:#fff;font-size:13px}
.img-layer-text-hover:hover .layer {opacity:0.7}
.img-layer-text-hover .layer-text {padding:20px}
.img-layer-text-hover.overflow .layer {overflow:auto}
.img-layer-text-hover .layer
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-text-hover:hover .layer
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect layer hover - white ***/
.img-layer-hover-2 .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:#fff;opacity:0}
.img-layer-hover-2:hover .layer {opacity:0.7}
.img-layer-hover-2 .layer
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-hover-2:hover .layer
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect layer-image hover - white ***/
.img-layer-image-hover-2 .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#fff;background-image:url("icons/lupe-2.png");background-repeat:no-repeat;background-position:center center}
.img-layer-image-hover-2:hover .layer {opacity:0.7;background-color:#fff;background-image:url("icons/lupe-2.png");background-repeat:no-repeat;background-position:center center}
.img-layer-image-hover-2 .layer
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-image-hover-2:hover .layer
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect layer slide - top to bottom ***/
.img-layer-slide-top-bottom .layer {position:absolute;top:0px;right:0px;bottom:100%;left:0px;background:#000;opacity:0}
.img-layer-slide-top-bottom:hover .layer {opacity:0.7;bottom:0%}
.img-layer-slide-top-bottom .layer
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-slide-top-bottom:hover .layer
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect layer slide - bottom to top ***/
.img-layer-slide-bottom-top .layer {position:absolute;top:100%;right:0px;bottom:0px;left:0px;background:#000;opacity:0}
.img-layer-slide-bottom-top:hover .layer {opacity:0.7;top:0%}
.img-layer-slide-bottom-top .layer
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-slide-bottom-top:hover .layer
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect layer slide - left to right ***/
.img-layer-slide-left-right .layer {position:absolute;top:0px;right:100%;bottom:0px;left:0px;background:#000;opacity:0}
.img-layer-slide-left-right:hover .layer {opacity:0.7;right:0%}
.img-layer-slide-left-right .layer
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-slide-left-right:hover .layer
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect layer slide - right to left ***/
.img-layer-slide-right-left .layer {position:absolute;top:0px;right:0px;bottom:0px;left:100%;background:#000;opacity:0}
.img-layer-slide-right-left:hover .layer {opacity:0.7;left:0%}
.img-layer-slide-right-left .layer
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-slide-right-left:hover .layer
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect origin ***/
.img-origin
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
.img-origin:hover
{
transform:skew(10deg);
transform-origin:top left;
-webkit-transform:skew(10deg);
-webkit-transform-origin:left;
-moz-transform:skew(10deg);
-moz-transform-origin:top left;
-ms-transform:skew(10deg);
-ms-transform-origin:top left;
-o-transform:skew(10deg);
-o-transform-origin:top left;
}
/*** effect square to ellipse ***/
.img-square-ellipse {width:300px;height:200px}
.img-square-ellipse:hover {-moz-border-radius:50%;-webkit-border-radius:50%;-o-border-radius:50%;border-radius:50%}
.img-square-ellipse
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
.img-square-ellipse:hover
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
/*** effect ellipse to square ***/
.img-ellipse-square {width:300px;height:200px}
.img-ellipse-square {-moz-border-radius:50%;-webkit-border-radius:50%;-o-border-radius:50%;border-radius:50%}
.img-ellipse-square:hover {-moz-border-radius:0%;-webkit-border-radius:0%;-o-border-radius:0%;border-radius:0%}
.img-ellipse-square
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
.img-ellipse-square:hover
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
/*** effect square to round ***/
.img-square-round {width:200px;height:200px}
.img-square-round:hover {-moz-border-radius:50%;-webkit-border-radius:50%;-o-border-radius:50%;border-radius:50%}
.img-square-round
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
.img-square-round:hover
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
/*** effect round to square ***/
.img-round-square {width:200px;height:200px;-moz-border-radius:50%;-webkit-border-radius:50%;-o-border-radius:50%;border-radius:50%}
.img-round-square:hover {-moz-border-radius:0%;-webkit-border-radius:0%;-o-border-radius:0%;border-radius:0%}
.img-round-square
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
.img-round-square:hover
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
/*** effect layer-image hover - background change ***/
.img-layer-image-hover-backgroundchange .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0.6;background-color:#000;background-image:url("icons/lupe.png");background-repeat:no-repeat;background-position:center center}
.img-layer-image-hover-backgroundchange:hover .layer {opacity:0.5;background-color:#fff;background-image:url("icons/lupe-2.png");background-repeat:no-repeat;background-position:center center}
.img-layer-image-hover-backgroundchange .layer
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-image-hover-backgroundchange:hover .layer
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect rotate-scale ***/
.img-rotate-scale
{
transition:all 1.2s ease-in-out;
-webkit-transition:all 1.2s ease-in-out;
-moz-transition:all 1.2s ease-in-out;
-ms-transition:all 1.2s ease-in-out;
-o-transition:all 1.2s ease-in-out;
}
.img-rotate-scale:hover
{
transform:rotate(720deg) scale(2,2);
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
}
/*** effect rotate-x ***/
.img-rotate-x
{
transition:all 1.2s ease-in-out;
-webkit-transition:all 1.2s ease-in-out;
-moz-transition:all 1.2s ease-in-out;
-ms-transition:all 1.2s ease-in-out;
-o-transition:all 1.2s ease-in-out;
}
.img-rotate-x:hover
{
transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-moz-transform:rotateX(180deg);
-ms-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
}
/*** effect rotate-y ***/
.img-rotate-y
{
transition:all 1.2s ease-in-out;
-webkit-transition:all 1.2s ease-in-out;
-moz-transition:all 1.2s ease-in-out;
-ms-transition:all 1.2s ease-in-out;
-o-transition:all 1.2s ease-in-out;
}
.img-rotate-y:hover
{
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
}
/*** effect rotate-z ***/
.img-rotate-z
{
transition:all 1.2s ease-in-out;
-webkit-transition:all 1.2s ease-in-out;
-moz-transition:all 1.2s ease-in-out;
-ms-transition:all 1.2s ease-in-out;
-o-transition:all 1.2s ease-in-out;
}
.img-rotate-z:hover
{
transform:rotateZ(180deg);
-webkit-transform:rotateZ(180deg);
-moz-transform:rotateZ(180deg);
-ms-transform:rotateZ(180deg);
-o-transform:rotateZ(180deg);
}
/*** effect 3d image change ***/
.imagechange-3d-inner {position:absolute;top:0px;right:0px;bottom:0px;left:0px}
.imagechange-3d .imgchange-1 {opacity:1}
.imagechange-3d:hover .imgchange-1 {opacity:0}
.imagechange-3d .imgchange-2 {opacity:0}
.imagechange-3d:hover .imgchange-2 {opacity:1}
.imgchange-1 {position:absolute;top:0px;right:0px;bottom:0px;left:0px}
.imgchange-2 {position:absolute;top:0px;right:0px;bottom:0px;left:0px;padding:20px;color:#fff;background:#000;font-size:13px}
.imagechange-3d div
{
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
}
.imagechange-3d
{
perspective:1000px;
-webkit-perspective:1000px;
-moz-perspective:1000px;
-ms-perspective:1000px;
-o-perspective:1000px;
}
.imagechange-3d-inner
{
transform-style:preserve-3d;
transition:all 1.0s linear;
-webkit-transform-style:preserve-3d;
-webkit-transition:all 1.0s linear;
-moz-transform-style:preserve-3d;
-moz-transition:all 1.0s linear;
-ms-transform-style:preserve-3d;
-ms-transition:all 1.0s linear;
-o-transform-style:preserve-3d;
-o-transition:all 1.0s linear;
}
.imagechange-3d:hover .imagechange-3d-inner
{
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
}
.imgchange-2
{
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
}
/*** effect sharp to blur ***/
.img-sharp-blur img
{
transition:all 0.6s ease-in-out;
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
}
.img-sharp-blur:hover img
{
-webkit-filter:blur(3px);
-moz-filter:blur(3px);
-o-filter:blur(3px);
-ms-filter:blur(3px);
filter:url(blur.svg#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
/*** effect color to grayscale ***/
.img-color-grayscale img
{
transition:all 0.6s ease-in-out;
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
}
.img-color-grayscale:hover img
{
filter:grayscale(100%);
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:url(greyscale.svg#greyscale);
filter:gray;
}
/*** effect inner-shadow ***/
.img-inner-shadow .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px}
.img-inner-shadow:hover .layer
{
box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
-moz-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
-webkit-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9)
}
.img-inner-shadow .layer
{
transition:all 0.6s ease-in-out;
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
}
.img-inner-shadow:hover .layer
{
transition:all 0.6s ease-in-out;
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
}
/*** effect inner-shadow 2 ***/
.img-inner-shadow-2 .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px}
.img-inner-shadow-2:hover .layer
{
box-shadow:inset 0px 0px 120px rgba(255, 255, 255, 0.9);
-moz-box-shadow:inset 0px 0px 120px rgba(255, 255, 255, 0.9);
-webkit-box-shadow:inset 0px 0px 120px rgba(255, 255, 255, 0.9)
}
.img-inner-shadow-2 .layer
{
transition:all 0.6s ease-in-out;
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
}
.img-inner-shadow-2:hover .layer
{
transition:all 0.6s ease-in-out;
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
}
/*** effect layer-title slide-top hover ***/
.img-layer-title-slide-top-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#000;text-align:center}
.img-layer-title-slide-top-hover:hover .layer {opacity:0.7}
.img-layer-title-slide-top-hover .layer-text {position:absolute;top:-50px;right:0px;left:0px;padding:8px 15px;background:#fff;color:#000;font-size:16px}
.img-layer-title-slide-top-hover:hover .layer-text {position:absolute;top:0px}
.img-layer-title-slide-top-hover .layer, .img-layer-title-slide-top-hover .layer-text
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-title-slide-top-hover:hover .layer, .img-layer-title-slide-top-hover:hover .layer-text
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect layer-title slide-bottom hover ***/
.img-layer-title-slide-bottom-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#000;text-align:center}
.img-layer-title-slide-bottom-hover:hover .layer {opacity:0.7}
.img-layer-title-slide-bottom-hover .layer-text {position:absolute;bottom:-50px;right:0px;left:0px;padding:8px 15px;background:#fff;color:#000;font-size:16px}
.img-layer-title-slide-bottom-hover:hover .layer-text {position:absolute;bottom:0px}
.img-layer-title-slide-bottom-hover .layer, .img-layer-title-slide-bottom-hover .layer-text
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-title-slide-bottom-hover:hover .layer, .img-layer-title-slide-bottom-hover:hover .layer-text
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect layer-title slide-topbottom hover ***/
.img-layer-title-slide-topbottom-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#000;text-align:center}
.img-layer-title-slide-topbottom-hover:hover .layer {opacity:0.7}
.img-layer-title-slide-topbottom-hover .layer-text {position:absolute;bottom:100%;right:0px;left:0px;padding:8px 15px;background:#fff;color:#000;font-size:16px}
.img-layer-title-slide-topbottom-hover:hover .layer-text {position:absolute;bottom:0px}
.img-layer-title-slide-topbottom-hover .layer, .img-layer-title-slide-topbottom-hover .layer-text
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-title-slide-topbottom-hover:hover .layer, .img-layer-title-slide-topbottom-hover:hover .layer-text
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect layer-title slide-bottomtop hover ***/
.img-layer-title-slide-bottomtop-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#000;text-align:center}
.img-layer-title-slide-bottomtop-hover:hover .layer {opacity:0.7}
.img-layer-title-slide-bottomtop-hover .layer-text {position:absolute;top:100%;right:0px;left:0px;padding:8px 15px;background:#fff;color:#000;font-size:16px}
.img-layer-title-slide-bottomtop-hover:hover .layer-text {position:absolute;top:0px}
.img-layer-title-slide-bottomtop-hover .layer, .img-layer-title-slide-bottomtop-hover .layer-text
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-title-slide-bottomtop-hover:hover .layer, .img-layer-title-slide-bottomtop-hover:hover .layer-text
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect layer-title-center hover ***/
.img-layer-title-center-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#000;text-align:center}
.img-layer-title-center-hover:hover .layer {opacity:0.7}
.img-layer-title-center-hover .layer-text {margin-top:30px;padding:8px 15px;background:#fff;color:#000;font-size:16px;display:inline-block;
-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px}
.img-layer-title-center-hover .layer
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-title-center-hover:hover .layer
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect layer-panel hover - bottom to top ***/
.img-panel-bottomtop-hover .layer-text {position:absolute;top:100%;right:0px;left:0px;opacity:0.7;background:#fff;color:#000;font-size:16px}
.img-panel-bottomtop-hover:hover .layer-text {position:absolute;top:0px}
.img-panel-bottomtop-hover .layer-text a {display:inline-block;width:50%;padding:8px 0px;text-align:center;font-size:13px;color:#4588da}
.img-panel-bottomtop-hover .layer-text a:hover {background:#4588da;color:#fff}
.img-panel-bottomtop-hover .layer-text
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-panel-bottomtop-hover:hover .layer-text
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect layer-panel hover - top to bottom ***/
.img-panel-topbottom-hover .layer-text {position:absolute;bottom:100%;right:0px;left:0px;opacity:0.7;background:#fff;color:#000;font-size:16px}
.img-panel-topbottom-hover:hover .layer-text {position:absolute;bottom:0px}
.img-panel-topbottom-hover .layer-text a {display:inline-block;width:50%;padding:8px 0px;text-align:center;font-size:13px;color:#4588da}
.img-panel-topbottom-hover .layer-text a:hover {background:#4588da;color:#fff}
.img-panel-topbottom-hover .layer-text
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-panel-topbottom-hover:hover .layer-text
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect left content hover - right to left ***/
.img-left-content-rightleft-hover .layer-text {position:absolute;left:100%;top:0px;bottom:0px;width:0%;padding:20px;opacity:0;background:#fff;color:#000;font-size:13px;text-align:left}
.img-left-content-rightleft-hover:hover .layer-text {position:absolute;left:0px;width:50%;opacity:0.7}
.img-left-content-rightleft-hover .layer-text h2 {font-size:20px;text-align:left;margin:0px;padding-bottom:10px;width:100%}
.img-left-content-rightleft-hover .layer-text a {display:inline-block;padding:8px 10px;margin-top:15px;text-align:center;font-size:13px;background:#4588da;color:#fff}
.img-left-content-rightleft-hover .layer-text a:hover {background:#8ac748;color:#fff}
.img-left-content-rightleft-hover .text-inner {padding:8px 0px}
.img-left-content-rightleft-hover .layer-text
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-left-content-rightleft-hover:hover .layer-text
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect left content hover - left to right ***/
.img-left-content-leftright-hover .layer-text {position:absolute;right:120%;top:0px;bottom:0px;width:0%;padding:20px;opacity:0;background:#fff;color:#000;font-size:13px;text-align:left}
.img-left-content-leftright-hover:hover .layer-text {position:absolute;right:0px;width:50%;opacity:0.7}
.img-left-content-leftright-hover .layer-text h2 {font-size:20px;text-align:left;margin:0px;padding-bottom:10px;width:100%}
.img-left-content-leftright-hover .layer-text a {display:inline-block;padding:8px 10px;margin-top:15px;text-align:center;font-size:13px;background:#4588da;color:#fff}
.img-left-content-leftright-hover .layer-text a:hover {background:#8ac748;color:#fff}
.img-left-content-leftright-hover .text-inner {padding:8px 0px}
.img-left-content-leftright-hover .layer-text
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-left-content-leftright-hover:hover .layer-text
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect left content hover - top to bottom ***/
.img-left-content-topbottom-hover .layer-text {position:absolute;bottom:100%;right:0px;left:0px;width:100%;padding:20px;opacity:0;background:#fff;color:#000;font-size:13px;text-align:left}
.img-left-content-topbottom-hover:hover .layer-text {position:absolute;bottom:0px;opacity:0.7}
.img-left-content-topbottom-hover .layer-text h2 {font-size:20px;text-align:left;margin:0px;padding-bottom:10px;width:100%}
.img-left-content-topbottom-hover .layer-text a {display:inline-block;padding:8px 10px;margin-top:15px;text-align:center;font-size:13px;background:#4588da;color:#fff}
.img-left-content-topbottom-hover .layer-text a:hover {background:#8ac748;color:#fff}
.img-left-content-topbottom-hover .text-inner {padding:8px 0px}
.img-left-content-topbottom-hover .layer-text
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-left-content-topbottom-hover:hover .layer-text
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect left content hover - bottom top top ***/
.img-left-content-bottomtop-hover .layer-text {position:absolute;top:100%;right:0px;left:0px;width:100%;padding:20px;opacity:0;background:#fff;color:#000;font-size:13px;text-align:left}
.img-left-content-bottomtop-hover:hover .layer-text {position:absolute;top:0px;opacity:0.7}
.img-left-content-bottomtop-hover .layer-text h2 {font-size:20px;text-align:left;margin:0px;padding-bottom:10px;width:100%}
.img-left-content-bottomtop-hover .layer-text a {display:inline-block;padding:8px 10px;margin-top:15px;text-align:center;font-size:13px;background:#4588da;color:#fff}
.img-left-content-bottomtop-hover .layer-text a:hover {background:#8ac748;color:#fff}
.img-left-content-bottomtop-hover .text-inner {padding:8px 0px}
.img-left-content-bottomtop-hover .layer-text
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-left-content-bottomtop-hover:hover .layer-text
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect - image opacity ***/
.img-opacity img {position:absolute;top:0px;right:0px;bottom:0px;left:0px}
.img-opacity .img-1 {opacity:1}
.img-opacity .img-2 {opacity:0}
.img-opacity:hover .img-1 {opacity:0}
.img-opacity:hover .img-2 {opacity:1}
.img-opacity img
{
transition:all .6s ease-in-out;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-ms-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
}
.img-opacity:hover img
{
transition:all 1.2s ease-in-out;
-webkit-transition:all 1.2s ease-in-out;
-moz-transition:all 1.2s ease-in-out;
-ms-transition:all 1.2s ease-in-out;
-o-transition:all 1.2s ease-in-out;
}
/*** effect - image roll ***/
.img-roll {background:#000}
.img-roll img {position:absolute;top:0px;right:0px;bottom:0px;left:0px}
.img-roll .img-1 {left:0px}
.img-roll .img-2 {left:123%}
.img-roll:hover .img-1 {left:123%}
.img-roll:hover .img-2 {left:0px}
.img-roll img
{
transition:all .6s ease-in-out;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-ms-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
}
.img-roll:hover img
{
transition:all 1.2s ease-in-out;
-webkit-transition:all 1.2s ease-in-out;
-moz-transition:all 1.2s ease-in-out;
-ms-transition:all 1.2s ease-in-out;
-o-transition:all 1.2s ease-in-out;
}
/*** effect - shadow 1 ***/
.img-shadow-1
{
-webkit-box-shadow: 0 28px 16px -26px black;
-moz-box-shadow: 0 28px 16px -26px black;
box-shadow: 0 28px 16px -26px black;
}
.img-shadow-1:hover
{
transform:scale(1.1);
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);
-webkit-box-shadow: 0 58px 36px -56px black;
-moz-box-shadow: 0 58px 36px -56px black;
box-shadow: 0 58px 36px -56px black;
}
.img-shadow-1
{
transition:all .6s ease-in-out;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-ms-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
}
.img-shadow-1:hover
{
transition:all .6s ease-in-out;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-ms-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
}
/*** button-hover ***/
.img-button-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;text-align:center}
.img-button-hover:hover a {opacity:0.7}
.img-button-hover a {display:inline-block;width:100px;height:100px;margin-top:12%;margin-left:2px;margin-right:2px;background:#e71a6e;color:#fff;font-weight:bold;opacity:0;padding-top:38px;
-moz-border-radius:50px;-webkit-border-radius:50px;-o-border-radius:50px;border-radius:50px;
box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3)}
.img-button-hover a:hover {background:#f14d90}
.img-button-hover a
{
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-button-hover:hover a
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}
/*** effect round button 2 ***/
.button-effect-2.img-button-hover a {margin-top:0px}
.button-effect-2.img-button-hover:hover a {margin-top:12%}
/*** effect round button 3 ***/
.button-effect-3.img-button-hover a {width:100%;height:100%;margin-top:0px}
.button-effect-3.img-button-hover:hover a {margin-top:12%;width:100px;height:100px;-moz-border-radius:50px;-webkit-border-radius:50px;-o-border-radius:50px;border-radius:50px}
/*** effect round button 4 ***/
.button-effect-4.img-button-hover a {margin-top:0px}
.button-effect-4.img-button-hover:hover a {margin-top:12%}
.button-effect-4.img-button-hover:hover a:hover {width:100%;margin-left:0px;margin-right:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-o-border-radius:0px;border-radius:0px}
