Wiiii~~ <333333
























Heeelloooow~~
Hoy traigo un tuto que vi en un blog, la chica me parece super duuuulce y que me gustaria que sigaís, tiene muy buenos tutos y me gusta muuuuuucho su skin *o* bueno bueno :3 y ¿de qué trata este efecto? Pues es algo asi:
Un efecto muuuuuuy lindo para imagenes, donde les puedes poner una leyenda o descripción, que será visible al pasar el cursor sobre la imagen ^^
Wiiii~~ ¡Vamos a ello!
1. Ve a tu Plantilla, a Edición HTML y busca con Ctrl + F ]]></b:skin> [Nuevas Plantillas]  o </style> [Plantillas Clásicas]
2. Coloca encima de esa etiqueta ( ]]></b:skin> o </style>) este código:


figure {
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0 10px 10px 0;
-moz-transition: all 0.6s ease;
}

figcaption {
position: absolute;
margin-bottom: 10px;
background-color: #000000;
color: #FFFFFF;
padding: 3px 3px;
opacity: 0;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
}

figure:before {
content: "?";
position: absolute;
font-weight: 800;
background: #ff55a9;
text-shadow: 0 0 5px white;
color: #FFF;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
-moz-transition: all 0.6s ease;
opacity: 0.75;
}

figure:hover figcaption { opacity: 0.9; }
figure:hover:before { opacity: 0; }
.cap-left:before { bottom: 10px; left: 10px; }
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }
Leyenda:
float: left; Posición de la imagen (rigth o left)
background: #ff55a9;: Color del fondo del botón "?"
color: #FFFFFF;: Color del símbolo del botón "?"
content: "?";: Simbolito que quieras añadirle (entre comillas)
background-color: #000000;: Color del fondo de la leyenda.
color: #FFF;: Color del texto de la leyenda
3. ¡Oye, que yo quiero insertarlo! Pues en el gadget, entrada, lugar donde quieras utiliza:


<figure class="cap-left">
<img src="URLDELAIMAGEN" alt="" />
<figcaption>Mi texto</figcaption>
</figure>


* * *
Ya está! ((o(^∇^)o))
Espero que te haya gustado :3 
Nos vemos en otro tuto~ 


╋ Fuente: HERE!
* * *

ラベル: