استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 14)

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {

color: #333;

font-family: 'Open Sans', sans-serif;

font-weight: 300;

}

h1,

h1+p {

margin: 30px 15px 0;

font-weight: 300;

}

h1+p a {

color: #333;

}

h1+p a:hover {

text-decoration: none;

}

h2 {

margin: 60px 15px 0;

padding: 0;

font-weight: 300;

}

h2 span {

margin-left: 1em;

color: #aaa;

font-size: 85%;

}

.column {

margin: 15px 15px 0;

padding: 0;

}

.column:last-child {

padding-bottom: 60px;

}

.column::after {

content: '';

clear: both;

display: block;

}

.column div {

position: relative;

float: left;

width: 300px;

height: 200px;

margin: 0 0 0 25px;

padding: 0;

}

.column div:first-child {

margin-left: 0;

}

.column div span {

position: absolute;

bottom: -20px;

left: 0;

z-index: -1;

display: block;

width: 300px;

margin: 0;

padding: 0;

color: #444;

font-size: 18px;

text-decoration: none;

text-align: center;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

opacity: 0;

}

figure {

width: 300px;

height: 200px;

margin: 0;

padding: 0;

background: #fff;

overflow: hidden;

}

figure:hover+span {

bottom: -36px;

opacity: 1;

}

/* Shine */

.hover14 figure {

position: relative;

}

.hover14 figure::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);

}

.hover14 figure:hover::before {

-webkit-animation: shine .75s;

animation: shine .75s;

}

@-webkit-keyframes shine {

100% {

left: 125%;

}

}

@keyframes shine {

100% {

left: 125%;

}

}