Ver Mensaje Individual
  #2 (permalink)  
Antiguo 16/08/2014, 22:32
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 6 meses
Puntos: 977
Respuesta: efecto hover con varias imagenes?

Lo de las imágenes, que sería un slider o rotador, podrías hacerlo así:

Código HTML:
Ver original
  1. <div id = "slider">
  2.     <img src = "imagen1.jpg" />
  3.     <img src = "imagen2.jpg" />
  4.     <img src = "imagen3.jpg" />
  5.     <img src = "imagen4.jpg" />
  6. </div>

Código CSS:
Ver original
  1. #slider img{
  2.     position: absolute;
  3.     opacity: 0;
  4.     transition: .4s;
  5. }

Código Javascript:
Ver original
  1. var div = document.getElementById("slider"),
  2.     img = div.getElementsByTagName("img"),
  3.     total = img.length,
  4.     i = 0,
  5.     slider = function(){
  6.         img[i].style.opacity = 0;
  7.         i = i == total - 1 ? 0 : ++i;
  8.         img[i].style.opacity = 1;
  9.     },
  10.     interval = null;
  11.  
  12. img[i].style.opacity = 1;
  13.  
  14. div.addEventListener("mouseover", function(){
  15.     slider();
  16.     interval = setInterval(slider, 1500);
  17. }, false);
  18.  
  19. div.addEventListener("mouseout", function(){
  20.     clearInterval(interval);
  21. });

Lo que hago es simple. Primero, le doy una posición absoluta a las imágenes para que queden una sobre otra, las hago opacas al punto de que no se vean y añado un tiempo de transición de 0.4 segundos para que se recree el efecto de difuminado. Luego, en el código JS, tomo al elemento contenedor de las imágenes y en él, busco a todas las imágenes que contenga, obtengo el total de ellas, inicializo un contador con el que iré rotando las imágenes y creo una función en la cual ocultaré a la imagen actual, actualizo al contador y muestro a la siguiente imagen. Más abajo, hago que por defecto se muestre la primera imagen con el efecto de difuminado (alterando su opacidad). Y para que todo esto surta efecto, controlo las acciones con los eventos mouseover y mouseout. Con el primero, ejecuto la función para el cambio de imagen una sola vez y luego establezco un intervalo de 1500 milisegundos o 1.5 segundos para que mientras el cursor se mantenga sobre el elemento contenedor de las imágenes, la función del cambio de imagen se efectúe en intervalos de 1.5 segundos. Cuando retiremos el cursor, limpiamos dicho intervalo, paralizando el accionar de la función.



Para lo de las escenas del vídeo, no sabría cómo ayudarte, pero una búsqueda te podría servir, me parece haber visto lo que mencionas.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand