CODEWITHSUNDEEP
htmlcsscss-transitions
Rowan
Rowan

Reputation: 485

CSS Transitions Not Working?

What I'm trying to do here is get a transition when this div is hovered over.

Everything works fine, its just the transition that does nothing. I've tried using the transition properties with transition: all, transition: opacity and transition: background. But none of them work.

It's the display property that's doing it. Because when I take that out, it works. How else can I get around this? Because I obviously want to keep the display property, as it works on all browsers, young and old.

Here's what I've got at the moment:

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0);
    color: #fff;
    display: none;
    -webkit-transition: background 2s;
    -o-transition: background 2s;
    -moz-transition: background 2s;
    transition: background 2s;
}

a:hover .matrix-overlay {
    display: block;
    background: rgba(0,0,0,0.5);
}

I don't mind if I'm using opacity or background or whatever to control the fading, I just don't know what else to do.

Upvotes: 3

Views: 21249

Answers (4)

user2514117
user2514117

Reputation: 43

You can try the following:

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0.7);
    color: #fff;
    opacity: 0;
    pointer-events:none;
    transition: opacity 0.2s ease 0s;
}

a:hover .matrix-overlay {
    pointer-events:auto;
    opacity: 1;
    transition: opacity 0.15s ease 0s;
}

Using pointer-events:none and opacity:0 together will have nearly the same effect as display:none, but now the transition should work fine.

Upvotes: 0

Rowan
Rowan

Reputation: 485

Here's what I ended up doing:

    .matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0.7);
    color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease 0s;
    -o-transition: opacity 0.2s ease 0s;
    -moz-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
}

a:hover .matrix-overlay {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: opacity 0.15s ease 0s;
    -o-transition: opacity 0.15s ease 0s;
    -moz-transition: opacity 0.15s ease 0s;
    transition: opacity 0.15s ease 0s;
}

Upvotes: 3

clairesuzy
clairesuzy

Reputation: 27624

you could use clip instead of display, as the element is absolutely positioned

Working Example

e.g.

.matrix-overlay {
    ...other properties, not display ...
    clip: rect(1px 1px 1px 1px); /* IE7 */
    clip: rect(1px,1px,1px,1px);

}

a:hover .matrix-overlay {
    ..other properties, not display ...
     clip: rect(auto); /* IE7 */
     clip: auto;
}

I put in the quirky IE7 code clip code for information, although IE doesn't do transitions anyway and you could feed it the display codes if you wanted to, but this way keeps them the same ;)

Upvotes: 0

scurker
scurker

Reputation: 4753

Looks like the display property isn't supported with CSS transitions (also see this SO question).

With that in mind, you have several options. You could initially set the width/height to 0 in your pre-transition, or offset the element off the page (something like margin-left: -9999px;), or set the opacity to 0.

In your case, I would probably use this:

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0);
    color: #fff;
    display: block;
    margin-left: -9999px; /* hide element off the page */
    -webkit-transition: background 2s;
    -o-transition: background 2s;
    -moz-transition: background 2s;
    transition: background 2s;
}

a:hover .matrix-overlay {
    margin-left: 0; /* reset element position */
    background: rgba(0,0,0,0.5);
}

Upvotes: 5

Related Questions