استایل زیبا برای Caption عکسها ( نمونه 6)

* {

margin: 0;

padding: 0;

}

.grid {

padding: 20px 20px 100px 20px;

max-width: 1300px;

margin: 0 auto;

list-style: none;

text-align: center;

}

.grid li {

display: inline-block;

width: 400px;

margin: 0;

padding: 20px;

text-align: left;

position: relative;

}

.grid figure {

margin: 0;

position: relative;

}

.grid figure img {

max-width: 100%;

display: block;

position: relative;

}

.grid figcaption {

position: absolute;

top: 0;

left: 0;

background: #2c3f52;

color: #ed4e6e;

}

.grid figcaption h3 {

margin: 0;

padding: 0;

color: #fff;

}

.grid figcaption span:before {

content: 'by ';

}

.grid figcaption a {

text-align: center;

padding: 5px 10px;

border-radius: 2px;

display: inline-block;

background: #ed4e6e;

color: #fff;

}

/* Individual Caption Styles */

/* Caption Style 6 */

.cs-style-6 figure img {

z-index: 10;

-webkit-transition: -webkit-transform 0.4s;

-moz-transition: -moz-transform 0.4s;

transition: transform 0.4s;

}

.no-touch .cs-style-6 figure:hover img,

.cs-style-6 figure.cs-hover img {

-webkit-transform: translateY(-50px) scale(0.5);

-moz-transform: translateY(-50px) scale(0.5);

-ms-transform: translateY(-50px) scale(0.5);

transform: translateY(-50px) scale(0.5);

}

.cs-style-6 figcaption {

height: 100%;

width: 100%;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

backface-visibility: hidden;

}

.cs-style-6 figcaption h3 {

margin-top: 60%;

}

.cs-style-6 figcaption a {

position: absolute;

bottom: 20px;

right: 20px;

}

- - , .