atributo - Pase el enlace para cambiar la opacidad de la imagen
atributo title (8)
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;
}
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.
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);
});
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.
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 }); });
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);;
});
});
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!
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.
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