45-Galeria de imagenes con CSS

Con CSS tambien se puede hacer una linda galeria de imagenes

mire el ejemplo

Aqui puede poner una descripcion

Aqui puede poner una descripcion

Aqui puede poner una descripcion

Aqui puede poner una descripcion

...

Imagenes responsives

Las imagenes responsibles son imagenes que se pueden ver en todos los aparatos electronicos (computadores, smrphones, tablets etc)

Abajo estan 3 imagenes responsibles, igual que arriba, asi que el codigo es lo mismo

Aqui puede poner una descripcion

Aqui puede poner una descripcion

Aqui puede poner una descripcion

Codigo del ejemplo CSS

        div.gallery {
            margin: 5px;
            border: 1px solid #ccc;
            float: left;
            width: 180px;
            padding:5px
          }
          
          div.gallery:hover {
            border: 1px solid #777;
          }
          
          div.gallery img {
            text-align:center;
            width: 95%;
            height: 200px;
            padding:5px
          }
      
          
          div.desc {
            padding: 15px;
            text-align: center;
          }
    

Codigo del ejemplo HTML

    <div class="gallery" >
    <div>
   <a target="_blank" href="https://cdn.pixabay.com/photo/2016/07/12/08/19/cherry-blossom-1511608_960_720.png">
     <img src="https://cdn.pixabay.com/photo/2016/07/12/08/19/cherry-blossom-1511608_960_720.png" alt="Cinque Terre" >
   </a>
   <div class="desc">Aqui puede poner una descripcion</div>
 </div>
 
 <div class="gallery" >
   <a target="_blank" href="https://cdn.pixabay.com/photo/2013/07/13/10/08/flower-156608_960_720.png">
     <img src="https://cdn.pixabay.com/photo/2013/07/13/10/08/flower-156608_960_720.png" alt="Forest">
   </a>
   <div class="desc">Aqui puede poner una descripcion</div>
 </div>
 
 <div class="gallery" >
   <a target="_blank" href="https://cdn.pixabay.com/photo/2017/11/15/20/32/sea-turtle-2952470_960_720.png">
     <img src="https://cdn.pixabay.com/photo/2017/11/15/20/32/sea-turtle-2952470_960_720.png" alt="Northern Lights" >
   </a>
   <div class="desc">Aqui puede poner una descripcion</div>
 </div>
 
 <div class="gallery" >
   <a target="_blank" href="https://cdn.pixabay.com/photo/2019/01/09/14/13/leaves-3923413_960_720.jpg">
     <img src="https://cdn.pixabay.com/photo/2019/01/09/14/13/leaves-3923413_960_720.jpg" alt="Mountains" >
   </a>
   <div class="desc">Aqui puede poner una descripcion</div>

</div>
    
    

Ir al indice