atributo - Pase el enlace para cambiar la opacidad de la imagen

atributo title

Question

Estoy tratando de obtener el efecto que se muestra aquí https://www.kogevitamins.com/

Donde pasa el mouse sobre el enlace "aprender más" para que también cambie la opacidad de la imagen.

Gracias.

Editar:

En este momento tengo

para HTML

    <img src="/images/pill.png" alt="description" id ="image" />
<p> Daily Essentials </p>
<a id ="button"  href="#">Learn More</a>

Para jquery

    $("#button").hover(function(){
    $("#image").animate({opacity:1},300);
}).mouseout(function(){
    $("#image").animate({opacity:0.6},300);;
});

No parece funcionar hasta ahora

Editar:

Tengo el siguiente código recientemente actualizado, pero el efecto de desplazamiento no funciona para mí. Aquí hay un enlace a la cosa que trato de poner en práctica http://maninkorean.com/

<div class ="product-content">
<img class="imgClass" src="/images/pill.png" alt="description"  />
<p> Daily Essentials </p>
<a id ="button"  href="#">Learn More</a>
</div>

 $("a#button, img").hover(function(){
    $("img.imgClass").animate({opacity:1},300);
}).mouseout(function(){
    $("img.imgClass").animate({opacity:0.6},300);;
});

img.imgClass{
    opacity: 0.6
}

#button {
    padding: 10px 24px;
    background:#F15951;
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color:white;
    margin-top:50px;
    margin-bottom:50px;
    font-weight: bold;
}

Answer 1

A menos que quiera ver a través de esas imágenes y mostrar el patrón de fondo, no hay necesidad de lidiar con la opacidad.

Aunque puede preparar una versión semitransparente de la imagen y cambiar el atributo src en el evento onMouseOver .

Pero puede lograr el mismo efecto simplemente colocando un div con fondo semitransparente de 1 píxel por encima de la imagen seleccionada.

El uso de la opacidad de CSS cortará los navegadores más antiguos.

Answer 2

Aquí hay algunos html, css, jquery que muestran cómo hacerlo:

<div></div><a>Hover On Me</a>

div{
    width:300px;
    height:300px;
    display:block;
    background:red; 
    opacity: 0.6
}

a{
    display:block;
    margin-top:20px;
    width:100px; 
    padding:5px;
    height:20px; border-radius:5px; 
    background:yellow;
}

$("a").hover(function(){
    $("div").animate({opacity:1},300);
}).mouseout(function(){
    $("div").animate({opacity:0.6},300);
});

http://jsfiddle.net/Rd5Yy/2/

Answer 3

Combine las características de opacidad de JQuery y CSS3 para conectar un evento "OnHover" a las imágenes que cambian la opacidad de dicha imagen.

http://www.css3.info/preview/opacity/

Answer 4

Debería poder hacer esto usando jQuery con el siguiente código:

$(''#id of link you want to use to change opacity'').hover(function() { $(''#id of image that you want to change opacity of'').css({ ''opacity'' : 0.25 }); });

Answer 5

Este código debería hacer lo que usted quería hacer (lo probé contra su HTML):

$(document).ready(function() {
    $("#button").hover(function(){
        $("#image").animate({opacity:0.6},300);
    }).mouseout(function(){
        $("#image").animate({opacity:1},300);;
    });
});

Answer 6

Hola, puedes hacer esto fácilmente por css, con algunas cosas como esta:

.img {opacity:0.4; /*some more css*/  }   /* (opacity:) is now supported by all browsers */
.img:hover {opacity:0.98;  /* Some more css be creative... */  }

¡Eso es todo!

Answer 7

Parece que en el ejemplo específico que cita, han utilizado transiciones CSS3. Vea aquí un tutorial: http://www.w3schools.com/css3/css3_transitions.asp

En pocas palabras, con estos puedes hacer todo tipo de efectos funky sin javascript. CSS3 es compatible con navegadores modernos (pero es bastante innovador a medida que avanzan las tecnologías web) y aún no es un estándar W3C.

Answer 8

De acuerdo, acabo de ver tu página. En primer lugar, parece que jQuery no está funcionando a través del $ en su sitio, por lo que tendrá que solucionarlo o utilizarlo en su lugar por jQuery. Pegué este código en la consola de JavaScript en su sitio y funciona:

jQuery("a#button, img").hover(function(){
    jQuery("img.imgClass").animate({opacity:1},300);
}).mouseout(function(){
    jQuery("img.imgClass").animate({opacity:.6},300);;
});

editar: Parece que lo hiciste funcionar mientras escribía esta respuesta