Hover link to change opacity of image

Question

I am trying to get the effect shown here https://www.kogevitamins.com/

Where you hover over the "learn more" link to get the opacity of the image to also change.

Thanks.

Edit:

Right now I have

for HTML

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

For jquery

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

It doesn't seem to work so far

Edit:

I have the following code recently updated but the hover on effect doesn't work for me. Heres a link to the thing I'm trying to get to work 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

Hi You can easily do this by css, with somethings like this:

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

That's all!

Answer 2

您应该能够使用jQuery执行此操作，并使用以下代码：

$('#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 3

Combine JQuery and CSS3's opacity features to wire up an "OnHover" event to the images that changes the opacity of the said image.

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

Answer 4

Unless you want to see through those images and show background pattern, there is no need to deal with opacity.

Even though you can prepare semitransparent version of image and change src attribute in onMouseOver event.

But you can achieve the same effect by simply putting a div with 1-pixel semitransparent background above selected image.

Using CSS opacity will cut off older browsers.

Answer 5

Here's some html, css, jquery that shows how to do it:

<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 6

It looks like in the specific example you cite, they've used CSS3 transitions. See here for a tutorial: http://www.w3schools.com/css3/css3_transitions.asp

In a nutshell using these you can do all kind of funky effects without any javascript. CSS3 is supported by modern browsers (but is pretty cutting edge as web technologies go) and isn't yet a W3C standard.

Answer 7

This code should do what you wanted to do (I tested it against your HTML):

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

Answer 8

Okay, I just checked out your page. Firstly, it looks like jQuery is not working through the $ on your site, so you'll need to either troubleshoot that, or use it by jQuery instead. I pasted this code in on the JavaScript console on your site and it works:

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

edit: Looks like you got it working as I was typing up this response