CODEWITHSUNDEEP
htmlcss
user3394944
user3394944

Reputation: 37

Unhide <img> on :hover

Is it possible to have an image hidden by default and unhide it on :hover? I tried using the visibility property, but invisible elements can't be hovered on.

Upvotes: 1

Views: 367

Answers (3)

RDX RaN
RDX RaN

Reputation: 305

Directly you can't mouseover/hover a hidden image that is, its not possible with visibility:hidden; or display:none;, but you can have some tricks to do that.

using css

apply opacity: 0; to the image and :hover change opacity:1;

using js

create a parent <div> to the image and mouseover to that div apply display:block; to image.

Working Fiddle Click here

Upvotes: 0

developering
developering

Reputation: 1325

I realize that you specifically asked about jquery, but it is possible to do what you're asking just with css, though you may have to use opacity:0 rather than display:none to hide the image.

You can use a css hover event. Start by applying a class to your image:

<img src="theimage.jpg" class="hidden-image"/>

In your css, you can then use the class and a css hover event to show the image when the cursor is over the image:

.hidden-image {
   opacity: 0;
}

.hidden-image:hover {
   opacity:1;
}

Here's a jsfiddle: http://jsfiddle.net/fZd7J/

Upvotes: 4

Aloso
Aloso

Reputation: 5387

If you use display or visibility, the element is not there so you can't hover over it. Try it with opacity:0; . You can do it with css:

.img { opacity:0; }
.img:hover { opacity:1; }

Upvotes: 4

Related Questions