The same transition does not work on different elements

Navigation
2

I'm not realizing why this transition (translate) only works for <p> and not for <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"><divclass="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);
}
    
asked by anonymous 04.11.2014 / 17:31

2 answers

1

First replace with the -moz prefixes everything you want the effect to, then add a display: block no span, look 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, other than the p block.

    
04.11.2014 / 17:45
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;

Add also in transform properties.

Usually when CSS3 is added -webkit -, - o -, - moz -.

    
04.11.2014 / 17:40
Block pages with login in AngularJS with asynchronous call What does the error mean: realloc (): invalid pointer: 0xb78094d8?