Efecto hover con jQuery usando solo una imagen?

Ciel · #1 (**permalink**) 22/09/2010, 09:39

Hola a todos,

Resulta que yo antes tenia un link del plugin que estoy buscando pero lo perdi y no lo puedo encontrar mas y eso que busco y busco...

Lo que yo quiero hacer es algo como esto:

http://designwoop.com/labs/image-hover/index.html

O esto:

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

Pero sin usar 2 imagenes... solo 1.

Estoy casi seguro que el plugin que mencione al principio, el cual perdi el link... usaba una sola imagen, pero por ahi me confundi y quizas no posible lograr esto.

Gracias de antemano.

PD: De paso si saben de algun otro plugin con otro tipo de efecto usando solo una imagen (menos de transparencia) seria bienvenido tambien.

Dany_s · #2 (**permalink**) 22/09/2010, 09:59

crea 2 divs anidados con el mismo tamaño, al de abajo dale una imagen de fondo y al de arriba un color

con jquery setea una opacidad 0 al div superior
usa el evento over
cuando esta encima setea el div superior una opacidad 0.5 o la que quieras y cuando sale volve a 0

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>
    $( function (){
        $('.superior').css({'opacity':'0'});
        $('.superior').hover( function(){
            $(this).stop().fadeTo(500, 0.5);
        }, function(){
            $(this).stop().fadeTo(500, 0);
        });
    })
  </script>
</head>
<style>
    
    .fondo, .superior {
        width:200px;
        height:200px;
    }
    .fondo{
        background:url(http://www.todoavatar.com/wp-content/plugins/simple-post-thumbnails/timthumb.php?src=/wp-content/thumbnails/2752.jpg&w=200&h=200&zc=1&ft=jpg)
    }
    .superior{
        background:#000
    }
</style>
<body>
 
    <div class="fondo"><div class="superior"></div></div>
 
</body>
</html>