Usamos :hover, position y z-index para hacer una galería fotográfica con scroll vertical

En esta ocasión vamos a comentar una demo de galería fotográfica que figura en la página de cssplay.

En ella observamos la foto seleccionada al pinchar, coger el foco o situarnos con el ratón sobre la imagen pequeña en la caja con scroll de la derecha.

Para ello vamos a construir un primer ejercicio simple que solo contenga 3 capas: la capa de “contenidos” dentro de la cual está otra capa “pequeña” que, a su vez, contiene la capa más interior llamada “grande”.

<div id="contenidos">
     <div id="pequeño">
       <div id="grande">
          <img alt="" src="Imagenes/pic2.jpg" />      
       </div> <!-- fin grande -->
     </div> <!-- fin pequeño -->
   </div> <!-- fin contenidos -->

Comenzamos añadiendo estilo para la capa de contenidos:

#contenidos {
 background-color: transparent;
 background-image: url('Imagenes/pic0.jpg');
 background-repeat: no-repeat;
 background-position: 90px 0px;
 width: 750px;
 height: 400px;
}

Con estas características confeccionamos las dimensiones de la página y situamos en la izquierda la imagen de presentación.

Continuamos con el estilo de la capa pequeña

#pequeño {
 width: 75px;
 height: 50px;
 float: right;
 background-image: url('Imagenes/pic2t.jpg');
 background-repeat: no-repeat;
 background-position: center center;
}

Ahora cargamos la imagen pequeña (pict2t.jpg) y la situamos a la derecha. Esta capa arrastra la capa grande que está contenida en la pequeña.

Usando el posicionamiento absoluto sacamos la imagen grande del campo de visión:

#grande {
 position: absolute;
 left: -9999px;
 top: 0px;
}

Finalmente ponemos estilo para dar lugar al efecto de rollback clave de la página

#pequeño:hover #grande {
 width: 500px;
 height: 350px;
 left: 90px;
 background-color: #FFFFFF;
}

Esta instrucción debe leerse como sigue:
Cuando #pequeño está en :hover ¿Qué pasa con la capa interior #grande?
Lo que pasa es que la situamos sobre la imagen de presentación.
Para poder usar la sintaxis anterior es obvio, ahora, que la capa grande tiene que ser interior a la capa pequeña, ya que de otro modo no puede construirse la orden.

---

Observemos ahora el código fundamental correspondiente al ejemplo completo:

<div id="holder">
 <ul id="scrollbox">
         <li><a class="slidea" href="#nogo">
           <span><img src="Imagenes/pic1.jpg"
           alt="" /><br />Los Pechos</span>
         </a></li>
  <li><a class="slideb" href="#nogo">
           <span><img src="Imagenes/pic2.jpg"
           alt="" /><br />El Teide desde Tejeda
           </span>
         </a></li>
         ...
         ...
 </ul>
</div>

Y los elementos fundamentales del estilo

#scrollbox a:active span {width:480px; 
         height:400px; top:0;  left:90px; color:#000; 
         background:#fff; z-index:1;}
      #scrollbox a:focus span {width:480px; 
         height:400px; top:0;left:90px; color:#000; 
         background:#fff; z-index:10; outline:0;}
      #scrollbox a:hover span {width:480px; 
         height:400px; left:90px; background:#fff; 
         z-index:100;}
}

Observamos que la situación es la misma del ejemplo simple con dos diferencias fundamentales:

1. La capa pequeña es ahora una lista desordenada denominada scrollbox que tiene asignado scroll (overflow:auto) para poder visualizar todas las imágenes pequeñas.
2. El efecto rollover se produce en tres situaciones :active,:focus y :hover

La primera situación tiene asignada z-index:1 y para poder probarla debemos tomar el foco usando la tecla TAB.
La segunda se realiza pinchando en la imagen y vemos que debido a que z-index es 10 predomina ante la opción :active
Por fin la última :hover predomina sobre las dos anteriores ya que z-index es igual a 100

---

Para bajarse el ejemplo pulse aquí