The same transition does not work on different elements

Asked

Viewed 119 times

2

I don’t understand why this transition (Translate, the up part) only works for the <p> and not to the <span>, in firefox. Someone help me?

Jsfiddle here

HTML:

<div id="severalWork">
  <a href="#">
    <img src="http://krystalmilton.weebly.com/uploads/1/4/9/7/14972372/4978277.jpg?185">
    <div class="detailsHover">
        <span>span span</span>
        <p>para<br />para</p>
    </div>
  </a>
</div>

CSS:

#severalWork a {
    display: inline-block;
    width: 100px;
    height: 100px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

#severalWork a img {
    position: absolute;
    left: 0;
    opacity: 1;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    width: 100%;
}

.detailsHover {
    height: 100% !important;
    width: 100%;
    position: relative;
    background-color:rgba(255, 255, 255, 0.7);
    bottom: 0;
    opacity: 0;
    -webkit-transition: opacity 0.35s, background-color 0.35s;
    transition: opacity 0.35s, background-color 0.35s;
    overflow:hidden;
}

.detailsHover span {
    font-size: 12px;
    top: 30%;
    position: relative;
    text-transform: uppercase;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0) scale(1.1);
    transform: translate3d(0,20px,0) scale(1.1);
}

.detailsHover p {
    font-size: 14px;
    top: 30%;
    position: relative;
    text-align: center;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0) scale(1.1);
    transform: translate3d(0,20px,0) scale(1.1);
}


#severalWork a:hover img {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

#severalWork a:hover .detailsHover {
    opacity: 1;
}

#severalWork a:hover .detailsHover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
}

#severalWork a:hover .detailsHover span {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
}
css css-transitions

  • Here it seems to work. What is the expected effect? Here appears the span and the <p> when I place the mouse in the image.

  • Uhm, Firefox had different result...

  • Sorry I just noticed that only firefox fails. What I wanted is for the tb span to have the effect of going up, as well as the <p>

  • That’s right, that’s what I just noticed, too

  • 2

    To work on Firefox you have to add -moz on the estates.

  • It’s strange because the effects of image and span work

  • Nop, even with '-Moz-' doesn’t work... I think the only solution is to set the position as absolute

Show 2 more comments

2 answers

1


First replace with -Moz prefixes everything you want the effect for, then add a display:block in span, looks like this:

.detailsHover span {
font-size: 12px;
top: 30%;
position: relative;
text-transform: uppercase;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-moz-transition: opacity 0.35s, -moz-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-moz-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
display:block;

}

The effect may not work because the span tag is an inline element, unlike the p that is block.

  • That solved, without needing the -moz-. Thank you

0

If the error is only in firefox, the -Moz prefix-:

-webkit-transition: opacity 0.35s, background-color 0.35s;
-o-transition: opacity 0.35s, background-color 0.35s;
-moz-transition: opacity 0.35s, background-color 0.35s; /*para firefox*/
transition: opacity 0.35s, background-color 0.35s;

Also add to Transform properties.

Usually when CSS3 is added -Webkit-,-o-,-Moz-.

Browser other questions tagged css css-transitions

You are not signed in. Login or sign up in order to post.