lunes, 11 de marzo de 2013

FOTO, TEXTO, EFECTO CSS










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:&quot;&quot;;
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.

AYUDA:CÓDIGO todo CÓDIGO

1 comentario :