CODEWITHSUNDEEP
htmlcss
susanz
susanz

Reputation: 159

opacity transition not working

I am new to css and html and have a very small question. I am trying to add a opacity transition to description of an image when mouse hovers over. But it's currently not working and I am not sure why.

code:http://jsfiddle.net/3VHvM/

my html code:

<div class="bucket">
<img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" alt=""/> 
<div class = "img-overlay">
    <h3>Typography</h3></div>
</div>

my css code:

.bucket {
width: 31%;
float: left;
position: relative;
margin-top: 1%;
margin-right: 1%;
margin-bottom: 1%;
margin-left: 1%;
text-shadow: 0px 0px 0px;
-webkit-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
background-color: rgba(0,0,0,1.00);
overflow: hidden;
    }

.img-overlay {
background-color: rgba(0,0,0,1.00);
bottom: 0px;
color: #FFFFFF;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.05s;
-webkit-transition: opacity 0.05s;
-moz-transition: opacity 0.05s;
}

.bucket:hover .img-overlay {
opacity:0.75;
filter: alpha(opacity=75);
}

.bucket img {
width: 100%;
}

Thank you for your help

Upvotes: 1

Views: 4072

Answers (5)

Jonathan Shirion
Jonathan Shirion

Reputation: 39

it's working - just too fast for eye to see, you need to decrees the transition speed, try 1s. this option sets how long will take to the animation to run, 0.05s (s=seconds) it much to fast. here:

transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;

Upvotes: 1

gooser
gooser

Reputation: 306

The transition may not even be noticeable unless its .5s or slower. Quentin is right .2s is the fastest that it is noticeable if you're looking for it but if you want a viewer to pay attention to it, you should consider going even slower.

Upvotes: 0

Mayank Tripathi
Mayank Tripathi

Reputation: 1342

your code is correct. Just the time is too less. try 0.5 sec. you will see the output.

Upvotes: 0

florin.prisecariu
florin.prisecariu

Reputation: 422

http://jsfiddle.net/3VHvM/1/

.img-overlay {
    background-color: rgba(0,0,0,1.00);
    bottom: 0px;
    color: #FFFFFF;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    width: 100%;
    z-index: 1000;
    transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -moz-transition: opacity 2s;
}

Upvotes: 1

Quentin
Quentin

Reputation: 943128

1/20th of a second is too fast to see the effect. Try 2s instead.

Upvotes: 2

Related Questions