Estoy tratando de ocultar la parte inferior de la imagen de la niña cuando se activa el fondo 3D. Traté de agregar el overflow: hidden; a la clase test-imgplace y no se ve bien.
¿Hay una mejor manera de arreglarlo?
Mira lo que hice en JSFIDDLE
.card .image { height: 275px; width: 183px; background-size: cover; background-position: center center; } .imgtest { position: absolute; z-index: 1; text-align: center; top: 0; left: 100px; border: solid 1px; pointer-events: none; } .test-imgplace { margin: 0 auto; position: relative; overflow: hidden; } .card .text { height: 20%; margin: 0; color: #fff; display: flex; align-items: center; justify-content: center; text-transform: uppercase; font-size: 50px; position: absolute; right: 0; left: 0; top: 0; bottom: 0; } .card { width: 183px; height: 275px; margin: auto auto; background: #383030; border-radius: 5px; overflow: hidden; text-align: center; } .card-content { transform-style: preserve-3d; } body { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .hover-in { transition: .3s ease-out; } .hover-out { transition: .3s ease-in; } .card-hover { margin: 0; } <div class="test-imgplace"> <img src="https://christianluneborg.com/imgs/test-woman.png" class="imgtest"> <div class="card-hover"> <div class="card"> <div class="card-content"> <div class="image" style="background-image: url(https://christianluneborg.com/imgs/test-woman-bg.png);"></div> </div> </div> </div> </div>