Tutoriales: Subtitulos con efectos hover

Sunday, January 5, 2014

espero que les gusten

Hola mis loqueros!!

espero que estén muy bien! eh decidido enfocar mas el blog a los tutoriales!

hacer vídeos, algo de anime y entretenimiento

bueno aunque mas en tutoriales y videos ( es que ahora me parecen muy divertidos xD ) jajaja

. .. . . siguiente tutorial trata de un efecto hover para el subtitulo de las imágenes, me gusto mucho este efecto que lo voy a compartir!

EL VIDEO TUTORIAL

Una vez ya en el escritorio del blog >> se van a plantilla >> Edición Html

1- Busquen el código </head> y arriba de esté pega este código

2- Ahora para agregar el CSS buscar ]]></b:skin> y arriba de este pegar estos códigos que son OBLIGATORIOS colocarlos:

.grid {
padding: 20px 20px 100px 20px;
max-width: 1300px;
margin: 0 auto;
list-style: none;
text-align: center;
}
.grid li {
display: inline-block;
width: 300px;
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;
padding: 20px;
background: url("http://i28.tinypic.com/kcaqyp.jpg") repeat scroll 0 0 #F5F5F5;
color: #000000;
}
.grid figcaption h3 {
color: #0080FF;
font-family: times new roman;
font-size: 20px;
margin: 0;
padding: 0;
text-shadow: 2px 0 2px #FFFFFF;
}
.grid figcaption span:before {
content: 'by ';
}
.grid figcaption a {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: url("http://i51.tinypic.com/2cgkhus.jpg") repeat scroll -53px top #4612A6;
color: #fff;
}
.grid figcaption a:hover {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: url("http://i51.tinypic.com/2cgkhus.jpg") repeat scroll -53px top #000;
color: #fff;
}

3- Bien ahora solo deben elegir de cuales de los 3 ESTILOS colocar y pegarlos abajo del CSS anterior

ESTILO 1

.cs-style-3 figure {
overflow: hidden;
}
.cs-style-3 figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .cs-style-3 figure:hover img,
.cs-style-3 figure.cs-hover img {
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
transform: translateY(-50px);
}
.cs-style-3 figcaption {
height: 40px;
width: 270px;
top: auto;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style-3 figure:hover figcaption,
.cs-style-3 figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;

}
.cs-style-3 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}

ESTILO 2

.cs-style-4 li {
-webkit-perspective: 1700px;
-moz-perspective: 1700px;
perspective: 1700px;
-webkit-perspective-origin: 0 50%;
-moz-perspective-origin: 0 50%;
perspective-origin: 0 50%;
}
.cs-style-4 figure {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.cs-style-4 figure > div {
overflow: hidden;
}
.cs-style-4 figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
}
.cs-style-4 figcaption {
height: 270px;
width: 100px;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.cs-style-4 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}

ESTILO 3

.cs-style-7 li:first-child { z-index: 6; }
.cs-style-7 li:nth-child(2) { z-index: 5; }
.cs-style-7 li:nth-child(3) { z-index: 4; }
.cs-style-7 li:nth-child(4) { z-index: 3; }
.cs-style-7 li:nth-child(5) { z-index: 2; }
.cs-style-7 li:nth-child(6) { z-index: 1; }
.cs-style-7 figure img {
z-index: 10;
}
.cs-style-7 figcaption {
height: 100%;
width: 272px;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
-moz-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
box-shadow: 0 0 0 0px #2c3f52;
}
.no-touch .cs-style-7 figure:hover figcaption,
.cs-style-7 figure.cs-hover figcaption {
height: 320px;
opacity: 1;
width: 272px;
box-shadow: 0 0 0 5px #eee;
-webkit-box-shadow: 0 0 0 5px #eee;
-moz-box-shadow:0 0 0 5px #eee;
}
.cs-style-7 figcaption h3 {
margin-top: 86%;
}
.cs-style-7 figcaption h3,
.cs-style-7 figcaption span,
.cs-style-7 figcaption a {
opacity: 0;
-webkit-transition: opacity 0s;
-moz-transition: opacity 0s;
transition: opacity 0s;
}
.cs-style-7 figcaption a {
bottom: 5px;
position: absolute;
right: 30px;
}
.no-touch .cs-style-7 figure:hover figcaption h3,
.no-touch .cs-style-7 figure:hover figcaption span,
.no-touch .cs-style-7 figure:hover figcaption a,
.cs-style-7 figure.cs-hover figcaption h3,
.cs-style-7 figure.cs-hover figcaption span,
.cs-style-7 figure.cs-hover figcaption a {
-webkit-transition: opacity 0.3s 0.2s;
-moz-transition: opacity 0.3s 0.2s;
transition: opacity 0.3s 0.2s;
opacity: 1;
}
@media screen and (max-width: 31.5em) {
.grid {
padding: 10px 10px 100px 10px;
}
.grid li {
width: 100%;
min-width: 300px;
}
}

4- Guarden el cambio. Ahora diríjanse a Diseño y agreguen un HTML y deben copiar y pegar el HTML DEL EFECTO QUE ELIGIERON

HTML DEL ESTILO 1

<ul class="grid cs-style-3">
<li>
<figure>
<img src="URL-DE-TU-IMAGEN" />
<figcaption>
<h3>
Tutorial: </h3>
Ghaaby Captor
<a href="URL-DE-LA-PAGINA">Ver tutorial</a>
</figcaption>
</figure>
</li>
</ul>

HTML DEL ESTILO 2

<ul class="grid cs-style-4">
<li>
<figure>
<div>
<img src="URL-DE-TU-IMAGEN" />
</div>
<figcaption>
<h3>
Tutorial: </h3>
Ghaaby Captor
<a href="URL-DE-LA-PAGINA">Ver tutorial</a>
</figcaption>
</figure>
</li>
</ul>

HTML DEL ESTILO 3

<ul class="grid cs-style-7">
<li>
<figure>
<img src="URL-DE-TU-IMAGEN" />
<figcaption>
<h3>
Tutorial: </h3>
Ghaaby Captor
<a href="URL-DE-LA-PAGINA">Ver tutorial</a>
</figcaption>
</figure>
</li>
</ul>

Denle a guardar y listo! :)

Gracias por tu visita!

ghaabycaptor-Telemanagement

Sunday, January 5, 2014