HTML
<div class="temp1">
<a href="#">
<img src="http://i.imgur.com/pqtxvxl.jpg">
<p class="text-center">Description</p>
</a>
</div>
<!-- Source: codepad.co/andrian -->
<div class="temp2">
<div style="margin-bottom: 50px; display: inline-block;">
<h2>No Effect</h2>
<a href="#" class="column">
<div class="overflow">
<img src="http://i.imgur.com/pqtxvxl.jpg">
</div>
<span>Hover</span>
</a>
</div>
<div style="margin-bottom: 50px; display: inline-block;">
<h2>Zoom IN</h2>
<a href="#" class="hover01 column">
<div class="overflow">
<img src="http://i.imgur.com/pqtxvxl.jpg">
</div>
<span>Hover</span>
</a>
</div>
<div style="margin-bottom: 50px; display: inline-block;">
<h2>Zoom Out</h2>
<div class="hover02 column">
<div class="overflow">
<img src="http://i.imgur.com/pqtxvxl.jpg">>
</div>
<span>Hover</span>
</div>
</div>
<div style="margin-bottom: 50px; display: inline-block;">
<h2>Rotate</h2>
<div class="hover04 column">
<div class="overflow">
<img src="http://i.imgur.com/pqtxvxl.jpg">
</div>
<span>Hover</span>
</div>
</div>
<div style="margin-bottom: 50px; display: inline-block;">
<h2>Blur</h2>
<div class="hover05 column">
<div class="overflow">
<img src="http://i.imgur.com/pqtxvxl.jpg">
</div>
<span>Hover</span>
</div>
</div>
<div style="margin-bottom: 50px; display: inline-block;">
<h2>Gray Scale</h2>
<div class="hover06 column">
<div class="overflow">
<img src="http://i.imgur.com/pqtxvxl.jpg">
</div>
<span>Hover</span>
</div>
</div>
<div style="margin-bottom: 50px; display: inline-block;">
<h2>Sepia</h2>
<div class="hover07 column">
<div class="overflow">
<img src="http://i.imgur.com/pqtxvxl.jpg">
</div>
<span>Hover</span>
</div>
</div>
<div style="margin-bottom: 50px; display: inline-block;">
<h2>Blur + Gray Scale</h2>
<div class="hover08 column">
<div class="overflow">
<img src="http://i.imgur.com/pqtxvxl.jpg">
</div>
<span>Hover</span>
</div>
</div>
<div style="margin-bottom: 50px; display: inline-block;">
<h2>Opacity 1</h2>
<div class="hover09 column">
<div class="overflow">
<img src="http://i.imgur.com/pqtxvxl.jpg">
</div>
<span>Hover</span>
</div>
</div>
<div style="margin-bottom: 50px; display: inline-block;">
<h2>Opactiy 2</h2>
<div class="hover10 column">
<div class="overflow">
<img src="http://i.imgur.com/pqtxvxl.jpg">
</div>
<span>Hover</span>
</div>
</div>
<div style="margin-bottom: 50px; display: inline-block;">
<h2>Flashing</h2>
<div class="hover11 column">
<div class="overflow">
<img src="http://i.imgur.com/pqtxvxl.jpg">
</div>
<span>Hover</span>
</div>
</div>
<div style="margin-bottom: 50px; display: inline-block;">
<h2>Shine</h2>
<div class="hover12 column">
<div class="overflow">
<img src="http://i.imgur.com/pqtxvxl.jpg">
</div>
<span>Hover</span>
</div>
</div>
<div style="margin-bottom: 50px; display: inline-block;">
<h2>Circle</h2>
<div class="hover13 column">
<div class="overflow">
<img src="http://i.imgur.com/pqtxvxl.jpg">
</div>
<span>Hover</span>
</div>
</div>
</div>
LESS
.temp1{
a{
position: relative;
display: inline-block;
overflow: hidden;
color: #000;
font-size: 0;
p{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: #000;
font-size: 20px;
padding-bottom: 2px;
margin: 0;
text-align: center;
z-index: 1;
&:before{
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 28px;
background-color: rgba(255, 255, 255, 0.7);
display: inline-block;
z-index: -1;
}
}
img{
transform: scale(1,1);
transition: all 0.5s ease;
}
&:hover{
img{
transform: scale(1.3,1.3);
}
p{
color: rgba(255, 255, 255, 0.7);
&:before{
content: '';
background-color: rgba(0, 0, 0, 0.7);
}
}
}
}
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
h2{
margin-bottom: 0;
}
body {
color: #333;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.temp2{
.column {
position: relative;
font-size: 0;
display: inline-block;
}
.column span {
position: absolute;
bottom: -20px;
display: block;
width: 100%;
color: #444;
font-size: 18px;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
.overflow{
overflow: hidden;
}
.overflow:hover + span {
bottom: -36px;
opacity: 1;
}
}
/* Zoom In #1 */
.hover01 img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover01 img:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
/* Zoom Out #1 */
.hover02 img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover02 img:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
/* Rotate */
.hover04 img {
-webkit-transform: rotate(15deg) scale(1.4);
transform: rotate(15deg) scale(1.4);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover04 img:hover {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
/* Blur */
.hover05 img {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover05 img:hover {
-webkit-filter: blur(0);
filter: blur(0);
}
/* Gray Scale */
.hover06 img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover06 img:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
/* Sepia */
.hover07 img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover07 img:hover {
-webkit-filter: sepia(0);
filter: sepia(0);
}
/* Blur + Gray Scale */
.hover08 img {
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover08 img:hover {
-webkit-filter: grayscale(100%) blur(3px);
filter: grayscale(100%) blur(3px);
}
/* Opacity #1 */
.hover09 img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover09 img:hover {
opacity: .5;
}
/* Opacity #2 */
.hover10 .overflow {
background: #1abc9c;
}
.hover10 img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover10 img:hover {
opacity: .5;
}
/* Flashing */
.hover11 img:hover {
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
/* Shine */
.hover12 .overflow {
position: relative;
}
.hover12 .overflow::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.hover12 .overflow:hover::before {
-webkit-animation: shine .75s;
animation: shine .75s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
/* Circle */
.hover13 .overflow {
position: relative;
}
.hover13 .overflow::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
content: '';
width: 0;
height: 0;
background: rgba(255,255,255,.2);
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.hover13 .overflow:hover::before {
-webkit-animation: circle .75s;
animation: circle .75s;
}
@-webkit-keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
@keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
