2

Eu não estou a perceber o porquê de esta transição (translate, a parte de subir) só funcionar para o <p> e não para o <span>, no firefox. Alguém me ajuda?

Jsfiddle aqui

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);
}
7
  • Aqui parece funcionar. Qual o efeito esperado? Aqui aparece o span e os <p> quando coloco o mouse na imagem.
    – Franchesco
    4/11/2014 às 16:35
  • Uhm, no Firefox teve resultado diferente...
    – Franchesco
    4/11/2014 às 16:36
  • Desculpe acabei de notar que só falha no firefox. O que eu queria é que o span tb tivesse o efeito de subir, assim como o <p>
    – Miguel
    4/11/2014 às 16:37
  • Exacto, foi o que também acabei de reparar
    – Miguel
    4/11/2014 às 16:38
  • 2
    Para funcionar no Firefox tens de adicionar -moz nas propriedades.
    – Franchesco
    4/11/2014 às 16:38

2 Respostas 2

1

Primeiro substitui com os prefixos do -moz tudo que tu quer o efeito, depois adiciona um display:block no span, fica assim:

.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;

}

O efeito talvez não funcione porque a tag span é um elemento inline, diferente do p que é block.

1
  • Isso resolveu, sem ser preciso o -moz-. Obrigado
    – Miguel
    4/11/2014 às 16:48
0

Se o erro for apenas no firefox, o prefixo -moz-:

-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;

Adicione também nas propriedades transform.

Geralmente quando CSS3 é adicionado -webkit-,-o-,-moz-.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .