Pruebas B.T. 1: Tutorial Imagen con Efecto de Desplazamiento

Demostración
1. Ingresa a la cuenta de blogger.
2. Ingrese a su plantilla.
3. Copie el código CSS a continuación, antes de ]]></b:skin> Agregar CSS (pegue este código CSS).

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTxEZP6KIgghzteEo8o2rNEb0pc_7pW9Ar7_Yw92EPdz9XbMWXIYMnUM3D7nGDg_FdSDz7wQNZhfpZ3idOL5bzGwVFZmUTc9a9GGpDPHBgzp_2DLCq003QzwuDmjF9gFt12yRe6IRPYpp/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}

4. Haga clic en guardar plantilla.
5. El siguiente paso, haga clic en nueva entrada, luego copie el código a continuación y luego péguelo en el modo HTML de columna.

<div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7iKWzL91IIepzvl0MEu3tmyP2hlZ7sa9T6koxVyatk7Z3Tq9NmtkyR4WQmF3ccJbXc6rsn5cU9Ti8Dcmau1NOKLg6jlp4nX1fkS1fyUUaI50pQCdKCLffPCQbl9G-ZT5suTbonkpUC5zy/w250-h200-no/Faceblog+Evolutions+%25289%2529.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div> 
<div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIDkZugkt3sd386nwR9WtIRMX4BZGO2OGWWtzzXR0xGWxqLrehFXIhRjkhoFCdKlg8PhJdiYfKiEifIXMK3c-KZOhDwzhbiuayyc6UgEYAKpmXq03wcUDMVPMxQ9qx8uxKi7TgXzYw4xSZ/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div> 
<div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMTpqz-mBsWrD4ZBE7QghXjESlrjXxQr75aJQSGI0kcoTb4AmC2hgE_I69aP5OXUrldPgrnTBlq3w1LVSGc6jFRYctRdqwuJrOTMvTrsfDFaHUkTsN3HJz1OcO1P0aKWg0huFhh7Tgb7u0/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div> 
<div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglT7BpLgmgYTM9_q7oGIY3Loq5fJfaGqQH8sy5hAfmUf8nAGQBqjjpxT42XQJeqLZpVv48jxDziDPJk3SL4vx5dcbsgJr0FsklAykNp61MdPzo5UJHUVIDoOQGQZdhetzySn8UjrmGIGrF/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>

Descripción:
Reemplazar "http://bloguero-tutorial.blogspot.com" con la URL de la página deseada, haga clic en Publicar.

El tutorial anterior es para efectuar el ESTILO 1, ahora para hacer el ESTILO 2 al 10 hacemos lo mismo con los siguientes, por favor copie el código de abajo e instale igual como el paso anterior.

CÓDIGO ESTILO 2
CSS

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTxEZP6KIgghzteEo8o2rNEb0pc_7pW9Ar7_Yw92EPdz9XbMWXIYMnUM3D7nGDg_FdSDz7wQNZhfpZ3idOL5bzGwVFZmUTc9a9GGpDPHBgzp_2DLCq003QzwuDmjF9gFt12yRe6IRPYpp/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-second img {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.view-second .mask {
background-color: rgba(115,146,184, 0.7);
width: 300px;
padding: 60px;
height: 300px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translate(265px, 145px) rotate(45deg);
-moz-transform: translate(265px, 145px) rotate(45deg);
-o-transform: translate(265px, 145px) rotate(45deg);
-ms-transform: translate(265px, 145px) rotate(45deg);
transform: translate(265px, 145px) rotate(45deg);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-second h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: translate(200px, -200px);
-moz-transform: translate(200px, -200px);
-o-transform: translate(200px, -200px);
-ms-transform: translate(200px, -200px);
transform: translate(200px, -200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-second p {
-webkit-transform: translate(-200px, 200px);
-moz-transform: translate(-200px, 200px);
-o-transform: translate(-200px, 200px);
-ms-transform: translate(-200px, 200px);
transform: translate(-200px, 200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-second a.info {
-webkit-transform: translate(0px, 100px);
-moz-transform: translate(0px, 100px);
-o-transform: translate(0px, 100px);
-ms-transform: translate(0px, 100px);
transform: translate(0px, 100px);
-webkit-transition: all 0.2s 0.1s ease-in-out;
-moz-transition: all 0.2s 0.1s ease-in-out;
-o-transition: all 0.2s 0.1s ease-in-out;
-ms-transition: all 0.2s 0.1s ease-in-out;
transition: all 0.2s 0.1s ease-in-out;
}
.view-second:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translate(-80px, -125px) rotate(45deg);
-moz-transform: translate(-80px, -125px) rotate(45deg);
-o-transform: translate(-80px, -125px) rotate(45deg);
-ms-transform: translate(-80px, -125px) rotate(45deg);
transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.view-second:hover p {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-second:hover a.info {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}

HTML

<div class="view view-second">
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Produk/Kamera-5_zpsdfab2705.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-second">
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Produk/Kamera-6_zps865e274c.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-second">
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Produk/Kamera-7_zps44576497.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-second">
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Produk/Kamera-8_zps435d17d3.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p>
<a href="#" class="info">Read More</a>
</div>
</div>

CÓDIGO ESTILO 3
CSS

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTxEZP6KIgghzteEo8o2rNEb0pc_7pW9Ar7_Yw92EPdz9XbMWXIYMnUM3D7nGDg_FdSDz7wQNZhfpZ3idOL5bzGwVFZmUTc9a9GGpDPHBgzp_2DLCq003QzwuDmjF9gFt12yRe6IRPYpp/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-third img {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.view-third .mask {
background-color: rgba(0,0,0,0.6);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translate(460px, -100px) rotate(180deg);
-moz-transform: translate(460px, -100px) rotate(180deg);
-o-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;
-moz-transition: all 0.2s 0.4s ease-in-out;
-o-transition: all 0.2s 0.4s ease-in-out;
-ms-transition: all 0.2s 0.4s ease-in-out;
transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-third p {
-webkit-transform: translateX(300px) rotate(90deg);
-moz-transform: translateX(300px) rotate(90deg);
-o-transform: translateX(300px) rotate(90deg);
-ms-transform: translateX(300px) rotate(90deg);
transform: translateX(300px) rotate(90deg);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-third a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-third:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.view-third:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.view-third:hover p {
-webkit-transform: translateX(0px) rotate(0deg);
-moz-transform: translateX(0px) rotate(0deg);
-o-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-third:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}

HTML

<div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVOfIpZpQUel1wIZwk8WY9epRjab4UM8T9B4pG_GBt80xXKhECjvJ80bm-b96KuPXOP6eBCTJtapOxYIKRc4BecZfHDeYXQ4GVmFy63pyWtWcw_0DavIDKucxkFxE3CY91TKCyzase3L40/w250-h200-no/Faceblog+Evolutions+%25281%2529.jpg" />
<div class="mask">
<h2>Hover Style #3</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP2weHwmEn-ELmLIT-JMNx0vSBOEI27LqwUjWJH9qumTs6iLquJt5cOvYUGkfbthJCaiwKzWI6yeJ_lImcXl4S40wQ2r21NqsBSfwSWVrtOQj2xoYuJXjrnmPp_hEw__6aei4HgJb4T8EX/w250-h200-no/Faceblog+Evolutions+%252811%2529.jpg" />
<div class="mask">
<h2>Hover Style #3</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8GfGiPsh7SAElVVw2DetNQs9Stdl_ncPVW0bBQVFPC9kOnDCTUxbFo72Jjb7220Wccn9E5TrukzJf4tpKd1RiUedL39Tv_ZbsMxdfT3v65XERuG_LBOLLyYNRvkW_9JsOyhSaNFeSzW5/w250-h200-no/Faceblog+Evolutions+%25280%2529.jpg" />
<div class="mask">
<h2>Hover Style #3</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCllUR-t_1wfyozHs10aYAuMr_WY0mmXtEjQvh6VVnHp-GHCtaebXUfp03q6zUu-G1SzGAfXLI41pxStSr6Y1V_4wXQx667mL3Xe0T2TGsjh3Togmh_qN3MoCd6U-GBZru3zPhz3XvtzQk/w250-h200-no/Faceblog+Evolutions+%252810%2529.jpg" />
<div class="mask">
<h2>Hover Style #3</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>

CÓDIGO ESTILO 4
CSS

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTxEZP6KIgghzteEo8o2rNEb0pc_7pW9Ar7_Yw92EPdz9XbMWXIYMnUM3D7nGDg_FdSDz7wQNZhfpZ3idOL5bzGwVFZmUTc9a9GGpDPHBgzp_2DLCq003QzwuDmjF9gFt12yRe6IRPYpp/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-fourth img {
   -webkit-transition: all 0.4s ease-in-out 0.2s;
   -moz-transition: all 0.4s ease-in-out 0.2s;
   -o-transition: all 0.4s ease-in-out 0.2s;
   -ms-transition: all 0.4s ease-in-out 0.2s;
   transition: all 0.4s ease-in-out 0.2s;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-fourth .mask {
   background-color: rgba(0,0,0,0.8);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0) rotate(-180deg);
   -moz-transform: scale(0) rotate(-180deg);
   -o-transform: scale(0) rotate(-180deg);
   -ms-transform: scale(0) rotate(-180deg);
   transform: scale(0) rotate(-180deg);
   -webkit-transition: all 0.4s ease-in;
   -moz-transition: all 0.4s ease-in;
   -o-transition: all 0.4s ease-in;
   -ms-transition: all 0.4s ease-in;
   transition: all 0.4s ease-in;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
}
.view-fourth h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-fourth p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-fourth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1) rotate(0deg);
   -moz-transform: scale(1) rotate(0deg);
   -o-transform: scale(1) rotate(0deg);
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.view-fourth:hover img {
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}

HTML

<div class="view view-fourth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl22q4vOtTDcpAA5i8DQingHsljv4aDwVxe8vsw_k4w_WQs2gz_N8_QVCEuoYuhgJjw3IL_gKu1H9FOD1lUey_Kcxkpj_eUJSfl4qa9x7V-HMDbcqEU7HDAjc0aR2TkHVZznDVyahfUq__/w250-h200-no/Faceblog+Evolutions+%252813%2529.jpg" />
<div class="mask">
<h2>Hover Style #4</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fourth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNG4SEbnMtcrsIVl6dp5T5l1MX4VF8TOtsDdMES7JD0vVOyX8rHyPxJX2VRbv1bycSceU7FBxZq2oqQj85yaWLAJXTK3VHaBmF9mS4-LGBuGr66qhqnaadhGiZ13YDsCbiH71cwO5hHYRa/w250-h200-no/Faceblog+Evolutions+%252814%2529.jpg" />
<div class="mask">
<h2>Hover Style #4</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fourth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVOfIpZpQUel1wIZwk8WY9epRjab4UM8T9B4pG_GBt80xXKhECjvJ80bm-b96KuPXOP6eBCTJtapOxYIKRc4BecZfHDeYXQ4GVmFy63pyWtWcw_0DavIDKucxkFxE3CY91TKCyzase3L40/w250-h200-no/Faceblog+Evolutions+%25281%2529.jpg" />
<div class="mask">
<h2>Hover Style #4</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fourth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaVuZKINhbukE59z_tpP8su3R72b2xiVXoSWrLw8ZScR9CJJRJ51a6CC858HTtRmvPGO0cNTR48RIt48ZNoo0miKISDUeWWx0ef3BS5_Ck3JoGJBldbbfKXpYUc32JL5-S2EwwTOc5oyyw/w250-h200-no/Faceblog+Evolutions+%252812%2529.jpg" />
<div class="mask">
<h2>Hover Style #4</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>

CÓDIGO ESTILO 5
CSS

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTxEZP6KIgghzteEo8o2rNEb0pc_7pW9Ar7_Yw92EPdz9XbMWXIYMnUM3D7nGDg_FdSDz7wQNZhfpZ3idOL5bzGwVFZmUTc9a9GGpDPHBgzp_2DLCq003QzwuDmjF9gFt12yRe6IRPYpp/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-fifth img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
background-color: rgba(146,96,91,0.3);
-webkit-transform: translateX(-300px);
-moz-transform: translateX(-300px);
-o-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.view-fifth h2 {
background: rgba(255, 255, 255, 0.5);
color: #000;
-webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color: #333;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-fifth:hover .mask {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.view-fifth:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
}
.view-fifth:hover p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

HTML

<div class="view view-fifth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqOaIBuadEDmcBoM6IlF_6SRa9MDIwp93fnCKN8eNzVqpon3PxAP7OBF0WTKlMr4xOVGw9gCzf-TpIWtbz3TiVCuw_jpHyU7c1hUdkadY-mVDhId-StJ7vEVkdSctIEqsUUxJcp-SwOdvO/w250-h200-no/Faceblog+Evolutions+%252818%2529.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdGbk4NS_COCMmVdXDb4qxSbOUWDyEikh78BN-1XJHY7bSWTEYzjgK0HhFAHswnvbhjnAqF9Y0mfPJINWgiyE4d-0rMYCp8s8GY2Cy-jS8I6L7lhzlzvZqTnvst1N7T48WPJaKUCgf20mY/w250-h200-no/Faceblog+Evolutions+%252817%2529.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy6RGxZJBUqlegVsr1CchMg68FDMT9zD995yVYNMVNXjLXHGjFtUIQS35sJkYRmkSN-84oXwtNEb9S9VvU6y4OUINNK9BHZZ3OqSDvAg_iGhOKwzVy6hDJfKak926TD_xjBRG57vfffmOe/w250-h200-no/Faceblog+Evolutions+%252816%2529.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrp7Ta7p57kKBg8netQVl5jhB9lMkGVOLwYE4e0vx_Vx_Y-yNFNqx7baJzyidb0DO_uqte1XVKMf1GJUuoFMD42qaas-VW902HEYxQqX8O1IsssQnl8NzQ9mVXD6-RGsXxMafnPFeN2YBo/w250-h200-no/Faceblog+Evolutions+%252815%2529.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>

CÓDIGO ESTILO 6
CSS

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTxEZP6KIgghzteEo8o2rNEb0pc_7pW9Ar7_Yw92EPdz9XbMWXIYMnUM3D7nGDg_FdSDz7wQNZhfpZ3idOL5bzGwVFZmUTc9a9GGpDPHBgzp_2DLCq003QzwuDmjF9gFt12yRe6IRPYpp/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}

.view-sixth img {
-webkit-transition: all 0.4s ease-in-out 0.5s;
-moz-transition: all 0.4s ease-in-out 0.5s;
-o-transition: all 0.4s ease-in-out 0.5s;
-ms-transition: all 0.4s ease-in-out 0.5s;
transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask {
background-color: rgba(146,96,91,0.5);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-in 0.4s;
-moz-transition: all 0.3s ease-in 0.4s;
-o-transition: all 0.3s ease-in 0.4s;
-ms-transition: all 0.3s ease-in 0.4s;
transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2 {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-webkit-transition: all 0.3s ease-in-out 0.1s;
-moz-transition: all 0.3s ease-in-out 0.1s;
-o-transition: all 0.3s ease-in-out 0.1s;
-ms-transition: all 0.3s ease-in-out 0.1s;
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-webkit-transition: all 0.3s ease-in-out 0.2s;
-moz-transition: all 0.3s ease-in-out 0.2s;
-o-transition: all 0.3s ease-in-out 0.2s;
-ms-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: all 0.3s ease-in-out 0.1s;
-moz-transition: all 0.3s ease-in-out 0.1s;
-o-transition: all 0.3s ease-in-out 0.1s;
-ms-transition: all 0.3s ease-in-out 0.1s;
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.view-sixth:hover img {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.view-sixth:hover h2 {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-sixth:hover p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view-sixth:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}

HTML

<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii8VRnbozs3ooy1a5GXzMDFqhXWS-WfVK4z_O7y-U5gPS1H9gyFKOX5eT3m3helCCi-mmH-yCRqDQ7nu-kiYvutZ4Go0wIJlktLIHtFDsN8fitaxghyo2t2qb1naE0O1SWzxNnJtBTZ6TW/w250-h200-no/Faceblog+Evolutions+%252824%2529.jpg" />
<div class="mask">
<h2>Hover Style #6</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBIFfedCd_TZi0rxmAD8B73w5ci4XeJHzxXGC30YU0W9qhDC3IVV8iDubOZBVLepBctik6GfC26Nn2_cFWcMUmHyHMqWAA7Z4-qq-rwDPqsooWemd4hACibc7wqW-kMv11aKl2SxeHpp8f/w250-h200-no/Faceblog+Evolutions+%252821%2529.jpg" />
<div class="mask">
<h2>Hover Style #6</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbzWYTNB9_jSQP53AwolC1no6kQcCiRWJMp1HQvIBIwejXnqM-xRwMR3Nz_3x6DW7Tuhr5EKXZXqk-b2AjG3PBFYUvsPC3FNtThd0GTNKDKsx8uxCtvqZRW1JU20pRgj4OWQ589pwM20DL/w250-h200-no/Faceblog+Evolutions+%252820%2529.jpg" />
<div class="mask">
<h2>Hover Style #6</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNuSi8HiMg0pDktprkiZfRCKFncUrX1xTnwPuBVuXj4NV5r4Z4LczLTAaGtmof9rYOg9kIiqyCb8aJ6O9Ke5vdTwH0EvWVuqFC4dY2oJkyxfzlFL6mZDeHyYyBp2wNGIEZYbvWorBBq_2O/w250-h200-no/Faceblog+Evolutions+%252819%2529.jpg" />
<div class="mask">
<h2>Hover Style #6</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>

CÓDIGO ESTILO 7
CSS

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTxEZP6KIgghzteEo8o2rNEb0pc_7pW9Ar7_Yw92EPdz9XbMWXIYMnUM3D7nGDg_FdSDz7wQNZhfpZ3idOL5bzGwVFZmUTc9a9GGpDPHBgzp_2DLCq003QzwuDmjF9gFt12yRe6IRPYpp/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}

.view-seventh img {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-seventh .mask {
background-color: rgba(77,44,35,0.5);
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.view-seventh h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-seventh p {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-seventh:hover img {
-webkit-transform: rotate(720deg) scale(0);
-moz-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-seventh:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px) rotate(0deg);
-moz-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-seventh:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.7s;
-moz-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
-ms-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view-seventh:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
-ms-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view-seventh:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}

HTML

<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5h0BJ_7JOrlWtNP2m8Wxw4L2AorT3cIzcciXiSIZfsXz7wnmUW8ggaRR9KH4GUXORcgM0ZoT_EMZPeyWXMlt1ffuuJXJP5IBIr8YQJ3jNUO2p1fIceruQ9bgRTTZa2fUomI_wtQg9G79a/w250-h200-no/Faceblog+Evolutions+%252826%2529.jpg" />
<div class="mask">
<h2>Hover Style #7</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVRGG7UbxaxYhNs63R99goDEX7YkIF4o3yWnPrAzAqQWtQVjZBwAKh_o1DdiPcKl5lEEsA7IPxgjKHcW9ZEv8qFl_5dWR2sQv7C-9gdLS5XsM6Yw695B7KMT3kx79LgDJFnCWetskkwgy_/w250-h200-no/Faceblog+Evolutions+%252825%2529.jpg" />
<div class="mask">
<h2>Hover Style #7</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4iyktmlfBHGf_iunKXTCLa9vShkdmvzISwQGU1u4Il9Odvedv-2L976KCIUSnaChzhncXpIIGX33q1irx5py-FeUKgplfAZTksdlULciWNWu0_uDehvMnnGy-HXinIJjSOXVgNmNsb5m1/w250-h200-no/Faceblog+Evolutions+%252823%2529.jpg" />
<div class="mask">
<h2>Hover Style #7</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ_tjzeNsDIqwp5yTSbuGck-Me6nX9WQ0IwHst25LbgcwzR7igpTntNEvNFlAz3JZVlq2awOR3csnnMRo3vyP4ZmTq-z_YfRBGdmnZvHC96pUYZ8eamZuma2s3TcnIwcnniIS6bVU83SRa/w250-h200-no/Faceblog+Evolutions+%252822%2529.jpg" />
<div class="mask">
<h2>Hover Style #7</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>

CÓDIGO ESTILO 8
CSS

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTxEZP6KIgghzteEo8o2rNEb0pc_7pW9Ar7_Yw92EPdz9XbMWXIYMnUM3D7nGDg_FdSDz7wQNZhfpZ3idOL5bzGwVFZmUTc9a9GGpDPHBgzp_2DLCq003QzwuDmjF9gFt12yRe6IRPYpp/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
};
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
-o-transition: all 0.3s ease-out 0.5s;
-ms-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-ms-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
-ms-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.3s;
-moz-transition: all 0.2s ease-in-out 0.3s;
-o-transition: all 0.2s ease-in-out 0.3s;
-ms-transition: all 0.2s ease-in-out 0.3s;
transition: all 0.2s ease-in-out 0.3s;
}
.view-eighth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
top: 0px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
-webkit-animation: bounceY 0.9s linear;
-moz-animation: bounceY 0.9s linear;
-ms-animation: bounceY 0.9s linear;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-eighth:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
@keyframes bounceY {
0% { transform: translateY(-205px);}
40% { transform: translateY(-100px);}
65% { transform: translateY(-52px);}
82% { transform: translateY(-25px);}
92% { transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
0% { -moz-transform: translateY(-205px);}
40% { -moz-transform: translateY(-100px);}
65% { -moz-transform: translateY(-52px);}
82% { -moz-transform: translateY(-25px);}
92% { -moz-transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
0% { -webkit-transform: translateY(-205px);}
40% { -webkit-transform: translateY(-100px);}
65% { -webkit-transform: translateY(-52px);}
82% { -webkit-transform: translateY(-25px);}
92% { -webkit-transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}

HTML

<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX9HBogQA6Jr1066myACLUHhorX64yP8Jcmo0YyppQzyhGXKAZYYVkueluB8cNiJMLkHJop55JGqmcqVqV70ebreTcgwIcc79fSieXvUbeb9YiHU7TBj9h8nEVp0-c_HS-lqtIWeQ0shlF/w250-h200-no/Faceblog+Evolutions+%252830%2529.jpg" />
<div class="mask">
<h2>Hover Style #8</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqoDAsXDoJTyaoXXpUO-0WbOB_TdikAuYjWzyE91eNq6Et9zq78i556_cazlKc04S6x8aY4qiyivHQrr8RPlp8LzpV2_n_w-TJHZBNgNKBBkqarEKx-hm2BS5rgBXLsZnFrQGXwERbu3l4/w250-h200-no/Faceblog+Evolutions+%252829%2529.jpg" />
<div class="mask">
<h2>Hover Style #8</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMQiOMJf0J07vWQiCFOWBJV9rdi5wpNsjmVN7vY6HCrfx7FVbLanluoAssyw01JrqQpoTj411pvcultKs9M89P_P0uV9vwfQdZP188BC2sfOJfP8dqIlPUro9nQrdvr0fwaHV2C3MDkucS/w250-h200-no/Faceblog+Evolutions+%252827%2529.jpg" />
<div class="mask">
<h2>Hover Style #8</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1v2xWYK17LutOM3AngvHuZXyDPBI9-Cu5yK-aJQP89sP1kbokf-ruETBkxhzqYA1vBpJUMjCHMELj4-Sa94XHIFoJ2wFVOD9tZbz4MC9ek4QsrnhY-eLECUwY9gKiB2_a8g9e2QNAA0f5/w250-h200-no/Faceblog+Evolutions+%252828%2529.jpg" />
<div class="mask">
<h2>Hover Style #8</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>

CÓDIGO ESTILO 9
CSS

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTxEZP6KIgghzteEo8o2rNEb0pc_7pW9Ar7_Yw92EPdz9XbMWXIYMnUM3D7nGDg_FdSDz7wQNZhfpZ3idOL5bzGwVFZmUTc9a9GGpDPHBgzp_2DLCq003QzwuDmjF9gFt12yRe6IRPYpp/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-ninth .mask-1, .view-ninth .mask-2 {
background-color: rgba(0, 0, 0, 0.5);
height: 361px;
width: 361px;
background: rgba(119, 0, 36, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 0.3s ease-in-out 0.6s;
-moz-transition: all 0.3s ease-in-out 0.6s;
-o-transition: all 0.3s ease-in-out 0.6s;
transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
left: auto;
right: 0;
-webkit-transform: rotate(56.5deg) translateX(-180px);
-moz-transform: rotate(56.5deg) translateX(-180px);
-o-transform: rotate(56.5deg) translateX(-180px);
-ms-transform: rotate(56.5deg) translateX(-180px);
transform: rotate(56.5deg) translateX(-180px);
-webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
-o-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
top: auto;
bottom: 0;
-webkit-transform: rotate(56.5deg) translateX(180px);
-moz-transform: rotate(56.5deg) translateX(180px);
-o-transform: rotate(56.5deg) translateX(180px);
-ms-transform: rotate(56.5deg) translateX(180px);
transform: rotate(56.5deg) translateX(180px);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.view-ninth .content {
background: rgba(0, 0, 0, 0.9);
height: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
width: 361px;
overflow: hidden;
-webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
-moz-transform: rotate(-33.5deg) translate(-112px, 166px);
-o-transform: rotate(-33.5deg) translate(-112px, 166px);
-ms-transform: rotate(-33.5deg) translate(-112px, 166px);
transform: rotate(-33.5deg) translate(-112px, 166px);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transition: all 0.4s ease-in-out 0.3s;
-moz-transition: all 0.4s ease-in-out 0.3s;
-o-transition: all 0.4s ease-in-out 0.3s;
transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2 {
background: transparent;
margin-top: 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.view-ninth a.info {
display: none;
}
.view-ninth:hover .content {
height: 120px;
width: 250px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
opacity: 0.9;
top: 40px;
-webkit-transform: rotate(0deg) translate(0, 0);
-moz-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0);
-ms-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.view-ninth:hover .mask-1 {
-webkit-transform: rotate(56.5deg) translateX(1px);
-moz-transform: rotate(56.5deg) translateX(1px);
-o-transform: rotate(56.5deg) translateX(1px);
-ms-transform: rotate(56.5deg) translateX(1px);
transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
-webkit-transform: rotate(56.5deg) translateX(-1px);
-moz-transform: rotate(56.5deg) translateX(-1px);
-o-transform: rotate(56.5deg) translateX(-1px);
-ms-transform: rotate(56.5deg) translateX(-1px);
transform: rotate(56.5deg) translateX(-1px);
}

HTML

<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNWRTYkvovJiEfWfQejD6rJRyRezPWj2vTGSOxv169y3hb5Fwq-KQCd0QdfLnqGiQ6MWreHNIsdat4wZjkKui8MSwgnQYEi6qoR7rIOyUQ7KahzmHWJM8dk1T_V9pWjwu3cVXUAQerObNt/w250-h200-no/Faceblog+Evolutions+%252834%2529.jpg" />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWI-rcHhC9Lq6w9UwkKfqIiJNAAszjLTgh9h0r-0YLMB0XpCjPMHIB2-4Gx1Cw8vo13NQ42kNKJ92V6MqHV-VPSf6BeEukLPnF_lFY3e934dnSnZFAN9NNssAME-zbyv0OS8LzhC7vhXel/w250-h200-no/Faceblog+Evolutions+%252832%2529.jpg" />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe4v56RxiGpM5rwz5mF9r4PB5TqT8GzSRcxR_slgmrj8cp6lFySYdLForgniLnQg5-g5P_urY-KqqxGzmcQLsqhWu5tzwwvMd7pjnlfEEcyvI6ZkwfnbMJqvM19QjqZXUEmbZrIWkpmCx5/w250-h200-no/Faceblog+Evolutions+%252833%2529.jpg" />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5pQgKnhuQTYhIelo_YUEALxe0toIXmvgIqSs8dFPeY9gW7cq0cBUZ368KKzjWMARNEkOPdVapZSzmMgjAwibqgJv6hoRsXrqUCA2zJfhGV91GJUUUOVdwi6kWbTuZYtjLG-E0At1nIdeO/w250-h200-no/Faceblog+Evolutions+%252831%2529.jpg" />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>

CÓDIGO ESTILO 10
CSS

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTxEZP6KIgghzteEo8o2rNEb0pc_7pW9Ar7_Yw92EPdz9XbMWXIYMnUM3D7nGDg_FdSDz7wQNZhfpZ3idOL5bzGwVFZmUTc9a9GGpDPHBgzp_2DLCq003QzwuDmjF9gFt12yRe6IRPYpp/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #333;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth p {
color: #333;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

HTML

<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU71_fz6goCcDhR42MGVoA63kYHQDJVKfVBeKKgACbSFLozYgLtlQ0tzJg3sqSLN9fx8kOD_DXVZ7AScGIJzuW730aGRNt1PdqmDpSFBthGYtgiBXDKj36KUGFeD1hCZqUoD-DLNuHqVMV/w250-h200-no/Faceblog+Evolutions+%252838%2529.jpg" />
<div class="mask">
<h2>Hover Style #10</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzBRe_OF5SAyWYHMvq4rjRpNH3jg4tQK6eMCRQKEtYdv49jbgsDykQnwZJRoUbuS39tbMYtGw0BTLk7Cs8vuBZ-pwR3nBLW_52h5IucERXvIXKfnmwd5jIfwZiF2FTn1O2oiaaf0d6Csw2/w250-h200-no/Faceblog+Evolutions+%252837%2529.jpg" />
<div class="mask">
<h2>Hover Style #10</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHb4lEKslGhbdLCa_Z2sx1R-_aCf7bMooNDGwFKTnz6GZJWpiLSvPa3A0aRpId134UZQCyQMYwCVzfhDC9kFZGCN9enmN0uGe2AA3jcL3yGcADDoOGrwJs1qZEmfr9uenDuT-SbIdLjfDF/w250-h200-no/Faceblog+Evolutions+%252836%2529.jpg" />
<div class="mask">
<h2>Hover Style #10</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnOpnHBn4TeR6HJAn5bMooQZAGXz8BSRpbBclPFKEQgQt4PZCIBl3kTtqTwDB09m7LJIu212JC3ZC5uWFu5MdYxARc6Xf28xBSbMckLrZayx_FjBnrTodDxOarTX_HuH3nMHvKuvUIPdaJ/w250-h200-no/Faceblog+Evolutions+%252835%2529.jpg" />
<div class="mask">
<h2>Hover Style #10</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://bloguero-tutorial.blogspot.com" class="info">Read More</a>
</div>
</div>

Demostración