 |
| 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
<script src='https://sites.google.com/site/ghaabycaptor/ghaabycc/modernizr.custom.js'/>
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!
