EL CÓDIGO ES EL SIGUIENTE:
Este codigo cien por cien CSS, deberéis colocarlo en vuestra plantilla html de vuestro blog justo antes de ]]></b:skin>.
Pueden hacerse algunas variaciones de estilo como por ejemplo variar el tamaño en anchura del triangulo asi como su color, justo en el apartado .info3 width: 200px; probar a variar el numerito.
Pero lo mejor es ir probando valores y comprobar su efecto.
.caja3 {
position: relative;
width: 300px;
margin: 10px auto;
}
.caja3 img {
width: 300px;
border: 3px solid #333;
-moz-box-shadow: 1px 1px 4px #333;
-webkit-box-shadow: 1px 1px 4px #333;
box-shadow: 1px 1px 4px #333;
}
.info3 {
position: absolute;
top: 30%;
opacity: 0;
width: 200px;
height: 110px;
padding: 5px;
text-align: left;
color: #eee;
background: #C14684; /*Para IE que no soporta RGBA*/
background: rgba(193,70,132,.8);
-moz-transform:rotate(180deg); /*Inicialmente boca abajo*/
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.info3:after {
position: absolute;
top: 0;
right: -120px;
content:"";
display:block; /*Lo siguiente monta el triángulo*/
width:0;
height:0;
border-color:transparent transparent transparent #C14684;
border-color:transparent transparent transparent rgba(193,70,132,.8);
border-style:solid;
border-width:60px;
}
.imagen img {
position: absolute;
top:0;
border: 0;
height: 0; /*Segunda imagen no visible inicialmente*/
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.caja3:hover .info3 {
filter: alpha(opacity=100);
opacity: 1;
left:-100px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
.caja3:hover .imagen img {
top:0;
left:0;
height:450px !important;
border: 3px solid #333;
}
Después de realizar este sencillo paso ya estaremos preparados para crear algo paracido a lo que veis en este articulo; tan solo tendreis que colocor el siguiente codigo html, en un gadget HTML/Javascript :
<div class="caja"><a href="URL_ENLACE"><img src="URL_IMAGEN" /><span class="info">TEXTO</span></a></div>
Para colocar código CSS en vuestro blog bien sea en una gadget html/java... o en una entrada, sin tener que manipular vuestra plantilla, en código todo código justo aquí abajo, en el apartado CSS os doy la solución.
<div class="caja"><a href="URL_ENLACE"><img src="URL_IMAGEN" /><span class="info">TEXTO</span></a></div>
Para colocar código CSS en vuestro blog bien sea en una gadget html/java... o en una entrada, sin tener que manipular vuestra plantilla, en código todo código justo aquí abajo, en el apartado CSS os doy la solución.
Me gusta este efecto gracias anabel !!! Muaksss :D
ResponderEliminar