CSS Transition not working again

Question

So I'm trying to put a hover for an image block but this time, im trying to put an image and a paragraph in the middle but still the transition is not working, have no clue why!?

This is the HTML:

        <div class="area">
          <div class="mask">
            <div class="vertical-align">
              <img src="http://placehold.it/50x50">
              <p>Play Now</p>
            </div>
          </div>
        <img src="http://placehold.it/300x300" alt="video"> 
        </div>

        <h2>Title</h2>
        <p>Paragraph</p>

      </div>

This is the CSS

.video {
    width:300px;
}

.area:hover .mask{
    display: block;
    width: 300px;
    height: 300px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
        background-color: rgba(226,23,37,0.9);
        text-align: center;}

.vertical-align{
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
}

.mask{
    position: absolute;
    display: none;
}

You cannot transition the `display` property. In your case the `.mask` goes from `display: none` (as normal state) to `display: block` when area is hovered. — Harry, Mar 06 '16 at 06:33
it works but the transition happens in a weird way, like it comes from the side instead of appearing smoothly like any other normal hover — user2522053, Mar 06 '16 at 06:39
@user2522053: That is because you've put all the default properties of the element like `height`, `width`, `transition` etc inside the `.area:hover .mask`. Move all but the opacity setting to the default `.mask` selector like [here](https://jsfiddle.net/xn0gakor/) — Harry, Mar 06 '16 at 06:41

Pedram · Answer 1 · 2016-03-06T06:44:48.890

1

Use opacity: 0 to opacity: 1 instead of display: none and block. you can not use transition for uncountable property.

JSFiddle

edited Mar 06 '16 at 06:44

answered Mar 06 '16 at 06:39

Pedram

15,766
10
44
73

your welcome, I updated the `example` please look again, fixed that issue you told in comment. – Pedram Mar 06 '16 at 06:45
and please dont forget to accept this answer. – Pedram Mar 06 '16 at 08:49

CSS Transition not working again

1 Answers1