0

Criei um efeito hover que dá um zoom scale(1.5) na imagem, porém quando ele sai do hover o border-radius da imagem torna a deixar a imagem quadrada antes de retornar a border-radius original. O problema só acontece no Chrome e Safari. Segue o meu código abaixo:

.hoverzoom {
	position: relative;
    min-width: 250px;
    overflow: hidden;
    border-radius: 8px;
}
.hoverzoom > img {
   width: 100%; 
	border-radius: 8px;
	-webkit-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	    -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	     -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	      -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	         transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
}
.hoverzoom:hover > img {
	-webkit-transform: scale(1.5);
	   -moz-transform: scale(1.5);
	    -ms-transform: scale(1.5);
	     -o-transform: scale(1.5);
	        transform: scale(1.5);
}
.hoverzoom .retina{
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;    
    background: none repeat scroll 0 0 rgba(31, 124, 43, 0.5);    
    border-radius: 8px;
    text-align: center;
    padding: 30px;
 
    -webkit-transition:	 all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	    -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	     -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	      -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	         transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); 
}
.hoverzoom:hover .retina {
    opacity: 1;
    box-shadow: rgba(0,0,0,.5);
    
}
<div class="hoverzoom">	
	<img src="https://i.stack.imgur.com/aipDU.jpg">
	<a href="#">
		<div class="retina"></div>
	</a>
</div>

Alguém sabe dizer o que está de errado?

2

1 Resposta 1

1

Isto acontece porque durante a transição (transition) os elementos child não são "mascarados". Mas no final da transição, a situação já se torna OK novamente.

Este é um bug conhecido em navegadores baseados em Webkit
border-radius clipping without a stacking context does not apply to composited children

Podes resolver este problema de duas formas, adicionando um z-index positivo, por exemplo z-index:1; ou um transform: translateZ(0); no elemento wrapper. Aqui está um exemplo abaixo:

.zoomTransition {
    -webkit-transition:  all .8s cubic-bezier(.190, 1.000, .220, 1.000);
        -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
         -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
          -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
             transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
}
.hoverzoom {
    position: relative;
    width: 250px;
    overflow: hidden;
    border-radius: 8px;
    z-index:0;
}
.hoverzoom img {
   width: 100%; 
    border-radius: 8px;
}
.hoverzoom:hover img {
    -webkit-transform: scale(1.5);
       -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
         -o-transform: scale(1.5);
            transform: scale(1.5);
}
.hoverzoom .retina{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;    
    background: none repeat scroll 0 0 rgba(31, 124, 43, 0.5);    
    border-radius: 8px;
    text-align: center;
    padding: 30px;
}
.hoverzoom:hover .retina {
    opacity: 1;
    box-shadow: rgba(0,0,0,.5);
}
<div class="hoverzoom" style="margin:auto">	
    <img src="//lorempixel.com/250/250/city" class="img-responsive center-block zoomTransition">
    <a>
        <div class="retina zoomTransition"></div>
    </a>
</div>

Fiz também alguns ajustes no código CSS, removendo a segunda adição de transições que era desnecessário e apontar estilos à imagem de uma maneira mais prática.

4
  • 1
    A entendi você agora. Muito bom, não sabia desse problema com Webkit. Muito obrigado parceiro, problema resolvido! Os ajustes também tão legais!
    – user69360
    21/03/2017 às 2:09
  • De nada amigo @FernandoS.Souza . Sempre pronto para ajudar ;) E essa é uma boa pergunta para estar aqui documentada, não sei porque tinham negativado a principio.
    – Chun
    21/03/2017 às 2:19
  • @FernandoS.Souza Considere marcar a minha resposta como correta para a destacar mais para os novos visitantes que estejam com o mesmo problema e procuram uma solução.
    – Chun
    21/03/2017 às 2:22
  • 1
    Já marquei como correta. E mais uma vez obrigado por sua ajuda! :P
    – user69360
    21/03/2017 às 2:32

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 .