banner
hace 4 años
1019 Views

Galería Fotográfica Css3

Autor:
banner

 
 
Hola amigos hoy os presento una Galería Fotográfica Css3 con una animación al pasar el cursos por encima de las imágenes.
 

Estas animaciones se crean con el fin de dar mas dinamismo a la pagina, todo esto es posible mediante las nuevas funcionalidades de Css3, ya que una de las muchas cosas que permite realizar son estas animaciones.css3 galeria

Anteriormente habíamos visto formas de animar elementos en Css3, hoy lo que os traigo es una galería de imágenes aplicando una animación de las citadas en el anterior articulo (Animaciones Css3).

 
Pasemos al ejercicio en si, y como siempre empezaremos con el código Html:
 



<div id="galeria">
<table>
<tr>
 <td>
  <h4 class="foto"><img src="1.jpg" alt="#" title="#" width="250" height="220" />Croacia ----- 18/07/2012</h4>
 </td>
 <td>
  <h4 class="foto"><img src="2.jpg" alt="#" title="#" width="250" height="220"/>Croacia ----- 28/07/2011</h4>
 </td>
 <td>
  <h4 class="foto"><img src="3.jpg" alt="#" title="#" width="250" height="220"/>Amstedam ----- 28/07/2011</h4>
 </td>
 <td>
  <h4 class="foto"><img src="4.jpg" alt="#" title="#" width="250" height="220"/>Florencia ----- 15/07/2011</h4>
 </td>
</tr>
<tr>
 <td>
  <h4 class="foto"><img src="5.jpg" alt="#" title="#" width="250" height="220"/>Roma ----- 17/07/2011</h4>
 </td>
 <td>
  <h4 class="foto"><img src="6.jpg" alt="#" title="#" width="250" height="220"/>Roma ----- 16/07/2011</h4>
 </td>
 <td>
  <h4 class="foto"><img src="7.jpg" alt="#" title="#" width="250" height="220"/>Ios ----- 12/08/2011</h4>
 </td>
 <td>
  <h4 class="foto"><img src="8.jpg" alt="#" title="#" width="250" height="220"/>Grecia ----- 10/08/2011</h4>
 </td>
</tr>
</table>
</div>

 

En este código podemos ver como utilizamos una tabla para poder maquetar las fotos mejor, con ella colocamos todas las fotos una detrás de otra y bien ordenadas. Estas imágenes van insertadas en cada celda de la tabla, representadas con un <td></td> y el salto de linea mediante un <tr></tr>.

 

En este ejercicio las imágenes constan de una pequeña descripción debajo de las fotografías, para realizar esto solo tenemos que insertar la imagen dentro de una etiqueta, en este caso <h4>; todo esto como antes hemos mencionado dentro de las celdas de la tabla que hemos creado.

 

Vamos a darle estilo a nuestra galería fotográfica,mediante Css3

 


#galeria{
position: relative;
left: 19%;
width: 1000px;
height: 600px;
}

h4.foto{
font-size: 14px;
color: #000;
padding: 15px 15px 25px 15px;
width: 250px;
height: 220px;
text-align: right;
background-color: #fff;
border: dashed 0px #000000;

box-shadow: 2px 2px 2px #DFDFDF;
-moz-box-shadow: 2px 2px 2px #DFDFDF;
-ms-box-shadow: 2px 2px 2px #DFDFDF;
-o-box-shadow: 2px 2px 2px #DFDFDF;
-webkit-box-shadow: 2px 2px 2px #DFDFDF;

transition: All 0.5s ease;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;

transform: rotate(-2deg) scale(1) skew(-2deg) translate(10px);
-webkit-transform: rotate(-2deg) scale(1) skew(-2deg) translate(10px);
-moz-transform: rotate(-2deg) scale(1) skew(-2deg) translate(10px);
-o-transform: rotate(-2deg) scale(1) skew(-2deg) translate(10px);
-ms-transform: rotate(-2deg) scale(1) skew(-2deg) translate(10px);
}

h4.foto:hover{
transform: rotate(360deg) scale(1.50) skew(0deg) translate(0px);
-webkit-transform: rotate(360deg) scale(1.50) skew(0deg) translate(0px);
-moz-transform: rotate(360deg) scale(1.50) skew(0deg) translate(0px);
-o-transform: rotate(360deg) scale(1.50) skew(0deg) translate(0px);
-ms-transform: rotate(360deg) scale(1.50) skew(0deg) translate(0px);
}

 

Como podemos llegar a ver en este código css, primero realizamos un diseño general para la galería, este englobara toda la galería; en esta lo único que definiremos sera la posición y las dimensiones de la galería, como un único elemento.

 

Después pasamos a dar el diseño a las imágenes individuales, en este caso daremos estilo a las etiquetas <h4>, ya que en este tutorial no daremos estilo a las imágenes, en si.

 

Bueno el estilo de <h4> es bastante comprensible, así que explicare la animación en si. Esta se crea mediante las reglas: transition y transform.

 

Con transition definimos la duración de la animación; en este caso seria “0.5” segundos y “ease”, que representaría el tipo de transicion de la animacion. Por otro lado tendríamos transform, esta seria la encargada de realizar la animación en si, este tutorial se realiza con una posición inicial de; -2 grados de rotación, escala de 1, un volteo de -2 grados y una traslación en x,y de 10px.

 

Después en la regla hover simplemente cambiamos los parámetros de la regla transform; dándole una rotación de 360 grados, así como subiendo la escala a 1.5, poniendo el volteo a 0 grados y la traslación en 0px también.

 

Habiendo realizado estos pasos nos encontramos con una galería que al activar una imagen esta rota una vuelta y se agranda, creando así una galería fotográfica, con textodinámicainteractiva y muy visual.

Bueno con esto ya hemos terminado este tutorial en el que creábamos una galería fotográfica Css3, si os surge cualquier problema no dudéis en comentármelo y os contestare en la mayor brevedad posible.

 

Espero que os haya gustado el tutorial, y que os sirva para vuestros proyectos, o bien para inspiraros sobre lo que se puede realizar Css3.

 

Cualquier Duda ya Sabéis Comentármela

Sendoa

Sendoa

¡Aúpa! Me llamo Sendoa y soy un apasionado del Diseño y Desarrollo Web.

Fundador de WebSdcStudio.es; mi blog personal, donde expongo diferentes contenidos de ayuda, consejos, trucos, recursos... sobre el mundo del Diseño y Desarrollo Web.
Sendoa

Latest posts by Sendoa (see all)

Articulos Relacionados

Tags Artículos:
Artículos Categorías:
Css3 · Desarrollo Web
banner

Deja un Comentario

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

Left Menu Icon
Web Sdc Studio
Right Menu Icon