Image hover effects
Click the link on the desired image hover effect to view the html and css code you can copy to use the effect
Click the link on the desired image hover effect to view the html and css code you can copy to use the effect
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect 1</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}
.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}
.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}
.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}
.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}
.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect 2</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.6);
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate(460px, -100px) rotate(180deg);
-ms-transform: translate(460px, -100px) rotate(180deg);
transform: translate(460px, -100px) rotate(180deg);
-webkit-transition: all 0.2s 0.4s ease-in-out;
transition: all 0.2s 0.4s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
margin: 50px 0 0 0;
background-color: transparent;
-webkit-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.hovereffect:hover h2 {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.hovereffect:hover a.info {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect 3</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.hovereffect:hover img {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
filter: grayscale(1) blur(3px);
-webkit-filter: grayscale(1) blur(3px);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.hovereffect h2 {
text-transform: uppercase;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
border: 1px solid #fff;
margin: 50px 0 0 0;
background-color: transparent;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect a.info, .hovereffect h2 {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
-webkit-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
opacity: 0;
filter: alpha(opacity=0);
color: #fff;
text-transform: uppercase;
}
.hovereffect:hover a.info, .hovereffect:hover h2 {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect 4</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(75,75,75,0.7);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(48, 152, 157, 0.4);
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover h2 {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
margin: -52px 0 0 0;
padding: 62px 100px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect 4v2</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(75,75,75,0.7);
-webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
}
.hovereffect:hover .overlay {
background-color: rgba(48, 152, 157, 0.4);
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
}
.hovereffect:hover h2 {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
font-weight: normal;
margin: -52px 0 0 0;
padding: 62px 100px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect 1v2</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
background-color: rgba(0,0,0,0.5);
-webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
background: rgba(0,0,0,0.6);
-webkit-transform: translatey(-100px);
-ms-transform: translatey(-100px);
transform: translatey(-100px);
-webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
padding: 10px;
}
.hovereffect a.info {
text-decoration: none;
display: inline-block;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
margin: 50px 0 0;
padding: 7px 14px;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
}
.hovereffect:hover h2,.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: translatey(0);
-webkit-transform: translatey(0);
transform: translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x250" alt="">
<div class="overlay">
<h2>Hover effect 5</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(170,170,170,0.4);
}
.hovereffect h2, .hovereffect img {
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.hovereffect:hover img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
margin: 50px 0 0 0;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 85%;
width: 85%;
position: absolute;
top: -20%;
left: 8%;
padding: 70px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
background-color: rgba(0,0,0,0.4);
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect 6</h2>
<div class="rotate">
<p class="group1">
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</p>
<hr>
<hr>
<p class="group2">
<a href="#">
<i class="fa fa-instagram"></i>
</a>
<a href="#">
<i class="fa fa-dribbble"></i>
</a>
</p>
</div>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.hovereffect img {
display: block;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.hovereffect:hover img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.7" /><feFuncG type="linear" slope="0.7" /><feFuncB type="linear" slope="0.7" /></feComponentTransfer></filter></svg>#filter');
filter: brightness(0.7);
-webkit-filter: brightness(0.7);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
width: 100%;
}
.hovereffect:hover h2 {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
margin: 50px 0 0 0;
background-color: transparent;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect .rotate {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 100%;
height: 100%;
position: absolute;
}
.hovereffect hr {
width: 50%;
opacity: 0;
filter: alpha(opacity=0);
}
.hovereffect hr:nth-child(2) {
-webkit-transform: translate3d(-50%,-50%,0) rotate(0deg) scale3d(0,0,1);
transform: translate3d(-50%,-50%,0) rotate(0deg) scale3d(0,0,1);
}
.hovereffect hr:nth-child(3) {
-webkit-transform: translate3d(-50%,-50%,0) rotate(90deg) scale3d(0,0,1);
transform: translate3d(-50%,-50%,0) rotate(90deg) scale3d(0,0,1);
}
.hovereffect h2, .hovereffect hr {
position: absolute;
top: 50%;
left: 50%;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
background-color: transparent;
margin: 0px;
}
.group1, .group2 {
left: 50%;
position: absolute;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
background-color: transparent;
margin: 0px;
padding: 0px;
}
.group1 {
top: 40%;
}
.group2 {
top: 60%;
}
.hovereffect p {
width: 30%;
text-transform: none;
font-size: 15px;
line-height: 2;
}
.hovereffect p a {
color: #fff;
}
.hovereffect p a:hover,
.hovereffect p a:focus {
opacity: 0.6;
filter: alpha(opacity=60);
}
.hovereffect a i {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
padding: 10px;
font-size: 20px;
}
.group1 a:first-child i {
-webkit-transform: translate3d(-60px,-60px,0) rotate(45deg) scale(2);
transform: translate3d(-60px,-60px,0) rotate(45deg) scale(2);
}
.group1 a:nth-child(2) i {
-webkit-transform: translate3d(60px,-60px,0) rotate(45deg) scale(2);
transform: translate3d(60px,-60px,0) rotate(45deg) scale(2);
}
.group2 a:first-child i {
-webkit-transform: translate3d(-60px,60px,0) rotate(45deg) scale(2);
transform: translate3d(-60px,60px,0) rotate(45deg) scale(2);
}
.group2 a:nth-child(2) i {
-webkit-transform: translate3d(60px,60px,0) rotate(45deg) scale(2);
transform: translate3d(60px,60px,0) rotate(45deg) scale(2);
}
.hovereffect:hover hr:nth-child(2) {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(-50%,-50%,0) rotate(0deg) scale3d(1,1,1);
transform: translate3d(-50%,-50%,0) rotate(0deg) scale3d(1,1,1);
}
.hovereffect:hover hr:nth-child(3) {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(-50%,-50%,0) rotate(90deg) scale3d(1,1,1);
transform: translate3d(-50%,-50%,0) rotate(90deg) scale3d(1,1,1);
}
.hovereffect:hover .group1 i:empty, .hovereffect:hover .group2 i:empty {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0) rotate(45deg) scale(1);
opacity: 1;
filter: alpha(opacity=100);
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/316x195" alt="">
<div class="overlay">
<h2>Hover effect 7</h2>
<p>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
<a href="#">
<i class="fa fa-instagram"></i>
</a>
<a href="#">
<i class="fa fa-dribbble"></i>
</a>
</p>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
}
.hovereffect:hover h2 {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
margin: 50px 0 0 0;
background-color: transparent;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect h2,
.hovereffect p {
position: absolute;
top: 50%;
left: 50%;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
background-color: transparent;
margin: 0px;
padding: 0px;
}
.hovereffect .overlay:before {
position: absolute;
top: 50%;
left: 50%;
width: 40%;
height: 60%;
border: 2px solid #fff;
content: '';
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
}
.hovereffect p {
width: 20%;
text-transform: none;
font-size: 15px;
line-height: 2;
}
.hovereffect p a {
color: #fff;
}
.hovereffect p a:hover,
.hovereffect p a:focus {
opacity: 0.6;
filter: alpha(opacity=60);
}
.hovereffect a i {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
padding: 0px 5px;
}
.hovereffect p a:first-child i {
-webkit-transform: translate3d(-60px,-60px,0);
transform: translate3d(-60px,-60px,0);
}
.hovereffect p a:nth-child(2) i {
-webkit-transform: translate3d(60px,-60px,0);
transform: translate3d(60px,-60px,0);
}
.hovereffect p a:nth-child(3) i {
-webkit-transform: translate3d(-60px,60px,0);
transform: translate3d(-60px,60px,0);
}
.hovereffect p a:nth-child(4) i {
-webkit-transform: translate3d(60px,60px,0);
transform: translate3d(60px,60px,0);
}
.hovereffect:hover .overlay:before {
opacity: 1;
filter: alpha(opacity=100);
background-color: rgba(0,0,0,0.2);
-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-135deg) scale3d(1,1,1);
transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-135deg) scale3d(1,1,1);
}
.hovereffect:hover p i:empty {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
opacity: 1;
filter: alpha(opacity=100);
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/290x195" alt="">
<div class="overlay">
<h2>Hover effect 8</h2>
<p class="set1">
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</p>
<hr>
<hr>
<p class="set2">
<a href="#">
<i class="fa fa-instagram"></i>
</a>
<a href="#">
<i class="fa fa-dribbble"></i>
</a>
</p>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
}
.hovereffect:hover h2 {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
margin: 50px 0 0 0;
background-color: transparent;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect hr {
width: 40%;
opacity: 0;
filter: alpha(opacity=0);
border: 1px solid #FFF;
}
.hovereffect hr:nth-child(3) {
-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,90deg) scale3d(0,0,1);
transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,90deg) scale3d(0,0,1);
}
.hovereffect hr:nth-child(4) {
-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,180deg) scale3d(0,0,1);
transform: translate3d(-50%,-50%,0) rotate3d(0,0,1, 180deg) scale3d(0,0,1);
}
.hovereffect h2, .hovereffect hr {
position: absolute;
top: 50%;
left: 50%;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
background-color: transparent;
margin: 0px;
}
.set1, .set2 {
left: 50%;
position: absolute;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
background-color: transparent;
margin: 0px;
padding: 0px;
}
.set1 {
top: 40%;
}
.set2 {
top: 60%;
}
.hovereffect p {
width: 30%;
text-transform: none;
font-size: 15px;
line-height: 2;
}
.hovereffect p a {
color: #fff;
}
.hovereffect p a:hover,
.hovereffect p a:focus {
opacity: 0.6;
filter: alpha(opacity=60);
}
.hovereffect a i {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
padding: 10px;
font-size: 20px;
}
.set1 a:first-child i {
-webkit-transform: translate3d(-60px,-60px,0);
transform: translate3d(-60px,-60px,0);
}
.set1 a:nth-child(2) i {
-webkit-transform: translate3d(60px,-60px,0);
transform: translate3d(60px,-60px,0);
}
.set2 a:first-child i {
-webkit-transform: translate3d(-60px,60px,0);
transform: translate3d(-60px,60px,0);
}
.set2 a:nth-child(2) i {
-webkit-transform: translate3d(60px,60px,0);
transform: translate3d(60px,60px,0);
}
.hovereffect:hover hr:nth-child(3) {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-90deg) scale3d(1,1,1);
transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-90deg) scale3d(1,1,1);
}
.hovereffect:hover hr:nth-child(4) {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-180deg) scale3d(1,1,1);
transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-180deg) scale3d(1,1,1);
}
.hovereffect:hover .set1 i:empty, .hovereffect:hover .set2 i:empty {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
opacity: 1;
filter: alpha(opacity=100);
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
left: 0;
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.1s ease-out 0.5s;
transition: all 0.1s ease-out 0.5s;
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
top: 0px;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all ease-in-out 0.1s;
transition: all ease-in-out 0.1s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.hovereffect:hover h2 {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
margin: 50px 0 0 0;
background-color: transparent;
-webkit-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
color: #000;
border: 1px solid #000;
-webkit-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect:hover a.info {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
box-shadow: 0 0 5px #000;
color: #000;
border: 1px solid #000;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Effect 10</h2>
<p class="icon-links">
<a href="#">
<span class="fa fa-twitter"></span>
</a>
<a href="#">
<span class="fa fa-facebook"></span>
</a>
<a href="#">
<span class="fa fa-instagram"></span>
</a>
</p>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
position: absolute;
overflow: hidden;
left: 0;
top: auto;
bottom: 0;
padding: 1em;
height: 4.75em;
background: #79FAC4;
color: #3c4a50;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
visibility: hidden;
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.hovereffect:hover img {
-webkit-transform: translate3d(0,-10%,0);
transform: translate3d(0,-10%,0);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
float: left;
margin: 0px;
display: inline-block;
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
margin: 50px 0 0 0;
background-color: transparent;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect p.icon-links a {
float: right;
color: #3c4a50;
font-size: 1.4em;
}
.hovereffect:hover p.icon-links a:hover,
.hovereffect:hover p.icon-links a:focus {
color: #252d31;
}
.hovereffect h2,
.hovereffect p.icon-links a {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,200%,0);
transform: translate3d(0,200%,0);
visibility: visible;
}
.hovereffect p.icon-links a span:before {
display: inline-block;
padding: 8px 10px;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hovereffect:hover .overlay,
.hovereffect:hover h2,
.hovereffect:hover p.icon-links a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hovereffect:hover h2 {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.hovereffect:hover p.icon-links a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.hovereffect:hover p.icon-links a:nth-child(2) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.hovereffect:hover p.icon-links a:first-child {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Effect 11</h2>
<p>
<a href="#">LINK HERE</a>
</p>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding: 3em;
text-align: left;
}
.hovereffect img {
display: block;
position: relative;
max-width: none;
width: calc(100% + 60px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
transition: opacity 0.35s, transform 0.45s;
-webkit-transform: translate3d(-40px,0,0);
transform: translate3d(-40px,0,0);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
position: relative;
font-size: 17px;
background-color: transparent;
padding: 15% 0 10px 0;
text-align: left;
}
.hovereffect .overlay:before {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
border: 1px solid #fff;
content: '';
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
transition: opacity 0.35s, transform 0.45s;
-webkit-transform: translate3d(-20px,0,0);
transform: translate3d(-20px,0,0);
}
.hovereffect a, .hovereffect p {
color: #FFF;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
transition: opacity 0.35s, transform 0.45s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
}
.hovereffect:hover img {
opacity: 0.6;
filter: alpha(opacity=60);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hovereffect:hover .overlay:before,
.hovereffect:hover a, .hovereffect:hover p {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x250" alt="">
<div class="overlay">
<h2>Effect 12</h2>
<p>
<a href="#">LINK HERE</a>
</p>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #42b078;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding: 50px 20px;
}
.hovereffect img {
display: block;
position: relative;
max-width: none;
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hovereffect:hover img {
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
overflow: hidden;
padding: 0.5em 0;
background-color: transparent;
}
.hovereffect h2:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
.hovereffect:hover h2:after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hovereffect a, .hovereffect p {
color: #FFF;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.hovereffect:hover a, .hovereffect:hover p {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x250" alt="">
<div class="overlay">
<h2>Effect 13</h2>
<p>
<a href="#">LINK HERE</a>
</p>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
position: absolute;
overflow: hidden;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
border-bottom: 1px solid #FFF;
border-top: 1px solid #FFF;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0,1);
-ms-transform: scale(0,1);
transform: scale(0,1);
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.hovereffect:hover img {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
filter: brightness(0.6);
-webkit-filter: brightness(0.6);
}
.hovereffect h2 {
text-transform: uppercase;
text-align: center;
position: relative;
font-size: 17px;
background-color: transparent;
color: #FFF;
padding: 1em 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
.hovereffect a, .hovereffect p {
color: #FFF;
padding: 1em 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x250" alt="">
<div class="overlay">
<h2>Effect 14</h2>
<p>
<a href="#">LINK HERE</a>
</p>
</div>
</div>
</div>
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
position: absolute;
overflow: hidden;
opacity: 0;
filter: alpha(opacity=0);
width: 55%;
height: 81%;
left: 22%;
top: 10%;
border-radius: 80%;
border: 2px solid #FFF;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(50%,50%,0);
transform: translate3d(50%,50%,0);
}
.hovereffect:hover .overlay {
background-color: rgba(0,0,0,0.3);
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.hovereffect:hover img {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1.4" /><feFuncG type="linear" slope="1.4" /><feFuncB type="linear" slope="1.4" /></feComponentTransfer></filter></svg>#filter');
filter: brightness(1.4);
-webkit-filter: brightness(1.4);
}
.hovereffect h2 {
text-transform: uppercase;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background-color: transparent;
color: #FFF;
padding: 1em 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-150%,-400%,0);
transform: translate3d(-150%,-400%,0);
}
.hovereffect a, .hovereffect p {
color: #FFF;
padding: 1em 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-150%,-400%,0);
transform: translate3d(-150%,-400%,0);
}
.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2, .hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}