5

Tenho uma div com uma imagem na qual apliquei um efeito zoom e uma leve rotação! porém essa imagem deve fazer o zoom e a rotação dentro dos limites da DIV sem transbordar e sim ocultar as partes que excedam o tamanho da div.

imagem explicando: inserir a descrição da imagem aqui

Código:

* {
    	margin: 0;
    	padding: 0;
    	border: 0;
	}
	body {
    	font-family: "Open Sans", sans-serif;
	}
    ul, ol, li {
        list-style: none;
    }
	
	.imagem {
		background: #ddd;
		width: 14%;
		height: auto;
		display: inline-grid;
		position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%, -50%);
	}
	.imagem img {
		width: 100%;
        max-width:260px;
		border-radius: 10px;
		padding: 5%;
	}
	.imagem img {
	   width:100%;
		-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);
	}
	.imagem:hover > img {
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		transition: all 0.5s ease;
		-moz-transform: scale(1.5) rotate(-5deg) ;
		-webkit-transform: scale(1.5) rotate(-5deg) ;
		-o-transform: scale(1.5) rotate(-5deg) ;
		-ms-transform: scale(1.5) rotate(-5deg) ;
		transform: scale(1.5) rotate(-5deg);
	}
<div class="imagem">
	<img alt="folder" src="https://i.imgur.com/7s6gp01.jpg"/>
</div>

2
  • Já tentou colocar overflow: hidden; no seu elemento?
    – Woss
    Commented 16/05/2018 às 23:10
  • Ao invés do scale, tentou com a propriedade zoom? Não é tão recomendada, mas pode funcionar diferente do scale na questão de não sair para fora dos limites da div Commented 16/05/2018 às 23:21

2 Respostas 2

4

É possível resolver isso usando padding e um pseudo-elemento ::after. Vc tem que tirar a cor de fundo da div imagem e usar o pseudo-elemento como cor de backgroud. Depois faz um ajuste de padding para o overflow:hidden não cortar a imagem antes da hora.

Veja como ficou o resultado. (deixei os comentário no código)

* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    font-family: "Open Sans", sans-serif;
}
ul, ol, li {
    list-style: none;
}

.imagem {
    width: 14%;
    height: auto;
    display: inline-grid;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 0px 6px 6px; /* ajuste de padding para não cortar a imagem */
    overflow: hidden; /* esconde a imagem no :hover */
}

 /* elemento com a cor de fundo */
.imagem::after {
    content: "";
    position: absolute;
    left: -6px;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    z-index: -1;
}
.imagem img {
    width: 100%;
    max-width:265px;

    -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);
}
.imagem:hover > img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -moz-transform: scale(1.5) rotate(-5deg) ;
    -webkit-transform: scale(1.5) rotate(-5deg) ;
    -o-transform: scale(1.5) rotate(-5deg) ;
    -ms-transform: scale(1.5) rotate(-5deg) ;
    transform: scale(1.5) rotate(-5deg);
}
<div class="imagem">
    <img alt="folder" src="https://i.imgur.com/7s6gp01.jpg"/>
</div>

2
  • resolveu, porém como eu faria o mesmo com outra estrutura no html?
    – Arthur74
    Commented 17/05/2018 às 4:15
  • 1
    @Arthur74 cara editei completamente a pergunta. Ontem eu estava na casa da minha noivo no notebooke da minha sogra e não deu para fazer melhor hahah. Mas fiquei matutando nisso e consegui em um resultado muito melhor sem precisar mexer no html, apenas ajustei o padding e usei um pseudo elemento ::after. Olha ai que ficou praticamente idêntico a imagem!
    – hugocsl
    Commented 17/05/2018 às 12:00
0

Resolvi assim:

	* {
    	margin: 0;
    	padding: 0;
    	border: 0;
	}
	body {
    	font-family: "Open Sans", sans-serif;
	}
    ul, ol, li {
        list-style: none;
    }
	
	.imagem {
		background: #ddd;
		width: 14%;
		height: auto;
		display: inline-grid;
		position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%, -50%);
		overflow: hidden;
		border-radius: 10px;
	}
	.imagem img {
		width: 100%;
        max-width:255px;
	
		-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);
	}
	.imagem:hover > img {
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		transition: all 0.5s ease;
		-moz-transform: scale(1.5) rotate(-5deg) ;
		-webkit-transform: scale(1.5) rotate(-5deg) ;
		-o-transform: scale(1.5) rotate(-5deg) ;
		-ms-transform: scale(1.5) rotate(-5deg) ;
		transform: scale(1.5) rotate(-5deg);
	}
<div class="imagem">
		<img alt="folder" src="https://i.imgur.com/7s6gp01.jpg"/>
	</div>

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 .