CODEWITHSUNDEEP
htmlcss
Timble
Timble

Reputation: 499

Making a div fade in and out on link hover

What I'm trying to do is on hovering over a link I want an invisible image to fade in. When the user stops hovering it fades out again. What currently works is on hover the image appears but what does not work is it does not fade in or out, the image just immediately appears or immediately disappears.

My HTML: 

<div class="hover_img"><a href="#">action menu<span><img src="img/screenshot/actionmenu.jpg" alt="image" height="50" /></span></a></div>

My CSS: 

.hover_img { display:inline }

.hover_img a { position:static; }

.hover_img a span { position:fixed; bottom: 40%; right: 0; display:none; z-index:99; opacity: 0.0; transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; }

.hover_img a:hover span { display:block; opacity: 1.0; transition: opacity .55s ease-in-out; -moz-transition: opacity .55s ease-in-out; -webkit-transition: opacity .55s ease-in-out; }

Upvotes: 1

Views: 162

Answers (1)

Khanh TO
Khanh TO

Reputation: 48982

Remove your display:none; and display:block;. Your transition with opacity will work correctly.

http://jsfiddle.net/uxgs02qw/`

Upvotes: 2

Related Questions