CODEWITHSUNDEEP
htmlimage
shrenuj
shrenuj

Reputation: 1

how to make img disappear on hover?

How can I make an image in a webpage disappear when the user hovers over it?

Upvotes: 0

Views: 11017

Answers (5)

user3925079
user3925079

Reputation:

Jquery:

$(document).ready(function() {
        $("image").hover(function() {
            $(this).animate({"opacity": "0"}, "fast"); //fast(200 milisec) or slow(600 milisec)
        },
        function() {
            $(this).animate({"opacity: "1"}, "fast");
        });
    });

Upvotes: 0

forrest
forrest

Reputation: 1

I was trying to do the same thing and found display:none to be really glitchy.

Try this instead.

img:hover {
    opacity: 0;
}

Upvotes: 0

Illianthe
Illianthe

Reputation: 343

A little bit of CSS should solve this:

img:hover {
    display: none;
}

Obviously you'll want to specify a unique ID or class (depending on what behaviour you wanted).

Upvotes: 5

user142162
user142162

Reputation:

Image is hidden onhover:

<img onmouseover="this.style.visibility = 'hidden';" src="..." />

Image is hidden onhover and reappears after the mouse moves away

<img onmouseover="this.style.visibility = 'hidden';" onmouseout="this.style.visibility = 'visible';" src="..." />

Upvotes: 3

Harry Joy
Harry Joy

Reputation: 59660

Try this:

<div id="test" name="test" onmouseover="document.getElementById('test_image').style.visibility= 'hidden';" onmouseout="document.getElementById('test_image').style.visibility= 'visible'">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" id="test_image">
</div>

Upvotes: 0

Related Questions