CSS abanico de Imagenes

Publicado por F. Aureliano Moreno R en

Abanico de imagenes

 

Ahora con lo que hemos visto en las ultimas semanas de CSS haremos un simple pero algo vistoso abanico de imagenes usando solo hojas de estilo, nuestro codigo a utilizar sera muy simple, tanto que se sorprenderán de lo fácil que es y los viejos programadores pensaran “ Como esto no estaba desde los principios del HTML”.

[codepen_embed height=”400″ theme_id=”22281″ slug_hash=”bEJopr” default_tab=”result” user=”fmorenor”]See the Pen Abanico CSS by Francisco Moreno (@fmorenor) on CodePen.[/codepen_embed]

style>
	#cardfan, #cardfan img{ width:340px; height: 280px;
		transition: .6s transform ease-out; 
	} 
	#cardfan {margin:0 auto;}
	#cardfan img{ border: 32px solid #ffe;
	box-shadow: 12px 12px 10px rgba(0,0,0,0.2);
	position:absolute;
	transform-origin: center 1200px;
	}
	#cardfan:hover img:first-child{
		transform: rotate(12deg);
	}
	#cardfan:hover img:last-child{
		transform: rotate(-12deg);
	}
</style>
<body>
<div id="cardfan">
	<img src="images/test1.jpg" alt="Imagen1">
	<img src="images/test2.jpg" alt="Imagen2">
	<img src="images/test3.jpg" alt="Imagen3">
</div>

 

 

    1. Primero tenemos las tres imágenes de prueba que deben de ser de preferencia del mismo tamaño dentro de nuestro DIV cardfan, ósea ( ABANICO).
    2. El estilo que realmente importa es el de la posición absoluta  de la imagen y del centro de la transformación, así como los pixeles con respecto al centro que tendrá  cada imagen, notes que solo las imágenes first y last, tienen rotación, y así de simple tenemos un efecto de abanico  con animación  en nuestro sitio web.

Asi tenemos ahora nuestro propio abanico de imagenes, ¿como ven?, solo tienen que poner el mouse encima de la imagen y verán la pequeña animación.

Si queremos dejar la imagen de arriba al centro, y que la animación afecta a las otras dos imágenes ponemos este codigo.

#cardfan:hover img:nth-child(2n){
		transform: rotate(-12deg);
Imagen1
Imagen2
Imagen3

 

 

Categorías: WEB CODE

F. Aureliano Moreno R

Creo en el poder del contenido y difundir las ideas , construir comunidades , y atraer y fascinar a los usuarios , les por eso que he invertido tiempo en aprender a crear sitios web, a ser emprendedor en proyectos de animación e imagen , me encanta la comida y hacer música. Tengo una hermosa esposa y una luz gigante que nació para darle un nuevo sentido a nuestras vidas, ademas de tres hermosos cachorros que llenan de amor nuestro hogar.

0 Comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

5 × 3 =