La página de los Oscars en la sección dónde está la lista de nominados me ha llamado la atención este año y he decidido copiarla.

El año pasado hicieron algo parecido utilizando (me parece) enlaces remotos con CSS. Pero el de este año me ha gustado más, así que me puse a husmear en el código de la página. Estas son mis notas:

Demo en vivo Descargar

Primero, las fotos de los nominados y los nombres de estos, están contenidos en elementos de listas separados. Las imágenes están una encima de otra con la opacidad en cero (opacity: 0;), excepto por una: la primera, que es la que vemos.
Al pasar el cursor por encima de el nombre de uno de los nominados, el valor de la opacidad de su respectiva fotografía pasa de cero a uno, y la que veíamos antes, cambia a cero.

Buscando en el código original noté que tanto el elemento que contiene la foto como el que contiene el nombre tienen algo en común: el atributo data-img. Entonces, ya no tenía que seguir buscando en el código, ya tenía una idea en la mente de como hacerlo.

Empezamos con el HTML, creamos el contenedor con las fotografías de los nominados en elementos <li>, agregando el atributo data-img con el nombre del nominado que le corresponde. así:

<li class="contentArea photo">
<ul>
<li data-img="actor-bradley-cooper" class="first"><img src="img/Cooper.jpg">- Bradley Cooper</li>
<li data-img="actor-daniel-day-lewis"><img src="img/Day-Lewis.jpg">- Daniel Day-Lewis</li>
<li data-img="actor-hugh-jackman"><img src="img/Jackman.jpg">- Hugh Jackman</li>
<li data-img="actor-joaquin-phoenix"><img src="img/Phoenix.jpg">- Joaquin Phoenix</li>
<li data-img="actor-denzel-washington"><img src="img/Washington.jpg">- Denzel Washington</li>
</ul>
</li>

Como dije antes, las imágenes tendrán la opacidad en cero en el CSS, exepto la primera para esto le agrego class="first" a la primera imagen de la lista.

Con unas lineas de CSS se logra que las imágenes queden una encima de otra.

.contentArea{
  width:261px;
  margin-right: 24px;
  padding: 0;
  float:left;
}
.contentArea.photo{
  position:relative;
}
.contentArea.photo ul{
  height: 440px;
}
.contentArea.photo li{
  opacity: 0;
  left: 0;
  position: absolute;
  top: 0;
}
.contentArea.photo li.first{
  opacity: 1;
}

Ahora, la lista con los nombres de los nominados. Cada uno con el valor de data-img exactamente igual que el de su foto.

<li class="contentArea">
  <ul class="nomineeslist">
    <li data-img="actor-bradley-cooper">
      <span class="title">Bradley Cooper</span>
      <span class="subtitle">Silver Lining Playbook</span>
    </li>
    <li data-img="actor-daniel-day-lewis">
      <span class="title">Daniel Day-Lewis</span>
      <span class="subtitle">Lincoln</span>
    </li>
    <li data-img="actor-hugh-jackman">
      <span class="title">Hugh Jackman</span>
      <span clas="subtitle">Les Misérables</span>
    </li>
  </ul>
</li>

Y el CSS:

.nomineeslist li{
 border-bottom: 1px dotted #bababa;
 padding:20px 5px 15px 5px;
}
.nomineeslist li .title{
 display:block;
 font-weight: 700;
 font-size: 16px;
}
.nomineeslist li .subtitle{
 display: block;
 font-weight: 400;
 margin-bottom: 20px;
}

---

El script.. Como el único lenguaje de programación que medio conozco es jQuery, fue en el primero que pensé para desarrollar la parte del script.

jQuery ofrece muchas opciones para trabajar con diferentes atributos.
Lo que hice fue crear una variable que atrapara el valor del atributo, para luego seleccionar la imagen correspondiente y modificar su opacidad. Así quedó el código:

$(document).ready(function() {
$('.nomineeslist li').mouseenter(function() {
  var dataImg = $(this).attr("data-img");
  $('.contentArea.photo ul li[data-img=' + dataImg + ']').fadeTo('fast', 1);
  $('.contentArea.photo ul li[data-img!=' + dataImg + ']').fadeTo('fast', 0);
});
});

• En la linea 3 crea una variable que recoge el valor del atributo data-img del elemento por donde pasa el cursor.
• La linea 4 selecciona la imagen con el mismo valor en el atributo data-img y le cambia la opacidad a 1.
• La linea 5 selecciona las imágenes que no tienen ese valor en el atributo data-img y les cambia la opacidad a 0

Y listo, ¡ahí tienen su lista de nominados!

Pueden ver la versión en vivo o descargar el archivo .rar

Demo en vivo Descargar