Image Hover Effects

Developer

Size

6,213 Kb

Views

30,360

Image Hover Effects Previews
Image Hover Effects HTML Codes
Image Hover Effects CSS Codes

How do I make an image hover effects?

Image Hover Effects By http://studiomp4.hol.es. What is a image hover effects? How do you make a image hover effects? This script and codes were developed by MaCeLMp4 on 16 September 2022, Friday.

Image Hover Effects Previews

Image Hover Effects - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image Hover Effects</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>
</body>
</html>

Image Hover Effects - Script Codes CSS Codes

/*****************************/
/* Copyright by CreativeDive */
/*****************************/
@import url(https://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}

Home Page	Home
Developer	MaCeLMp4
Username	MaCeLMp4
Uploaded	September 16, 2022
Rating	4.5
Size	6,213 Kb
Views	30,360

Do you need developer help for Image Hover Effects?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

MaCeLMp4 (MaCeLMp4) Script Codes

Name	Size
CSS3 Awesome Menu	11,812 Kb
A Pen by MaCeLMp4	2,305 Kb
Flexible Calendar	17,100 Kb
CSS Only Rotating Menu	4,748 Kb
Timer Tab	16,031 Kb
Google Play Style Menu	3,774 Kb
Perspective Sidebar	3,632 Kb
Flod It Menu	4,046 Kb
Pure CSS 1Password Logo	3,084 Kb
Flexible Calendar V1	16,637 Kb

Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Price Comparison Table	Orrinward	3,459 Kb
Gradient-ui-button-mark-fx	Tabspace	1,881 Kb
Caputre Cam with JS	KimmoCommit	2,795 Kb
Table Exercise	Fresco	9,585 Kb
Lecture 1	Law	0 Kb
Animated rainbow wave on canvas	Icodeforlove	2,777 Kb
Wikipedia Viewer	Thomasvaeth	2,549 Kb
A Pen by John Malc	F789gh	1,420 Kb
CSS Colors	Alexpate	2,232 Kb
Pure CSS candle light animation by One element	Ksksoft	2,193 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!