Como puede ver en la imagen adjunta , la imagen del avión se está moviendo hacia la izquierda intencionalmente. Pero no quiero que su posición se salga de la alineación. Quiero tener algo así como un efecto de paralaje pero al pasar el mouse como lo está haciendo este sitio web. https://digitalsilk.com/ . Acabo de comenzar el desarrollo del sitio web.
Quiero saber cómo puedo tener estas transiciones de imagen desde https://digitalsilk.com/ . Pero no soy capaz de recrear esa transición. Tengo problemas con una cosa que mueve la imagen trasera del avión un poco hacia la izquierda sin mover su posición (como un efecto paralelo). Puede ver la galería de la página principal del sitio web adjunta en la vista de escritorio.
<div id="outter-image"> <div class="tilt-box"> <div class="tilt-bg-image-box"> <img class="bg-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/tecnam_bg.webp" /> </div> <img class="overlay-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/webp/Tecam_recent_mockup-min.webp" /> </div> </div> <style> .overlay-image { top: -20px; right: -20%; position: absolute; width: 60%; aspect-ratio: auto 299 /566; height: 120%; transition: transform .6s ease-in-out, opacity .5s; opacity: 0; transform: perspective(1000px) rotateY( -60deg); } .tilt-bg-image-box { transition: transform .6s ease-in-out, opacity .5s, -webkit-transform .6s ease-in-out; } .bg-image { transition: transform 1s .4s linear, opacity .5s, -webkit-transform 1s .4s } .tilt-box:hover .bg-image { transform: translate3d(-8%, 0, 0); } .tilt-box:hover .overlay-image { opacity: 1; -webkit-transform: perspective(1000px) rotateY( -20deg); transform: perspective(1000px) rotateY( -20deg); } .tilt-box:hover .tilt-bg-image-box { transform: perspective(1000px) rotateY(20deg); } .tilt-box:hover .bg-image { transition: transform 4s .4s linear, opacity .5s, -webkit-transform 4s .4s } </style>El truco es establecer el width de la envoltura de la imagen y overflow:hidden .
Sé que la imagen del avión está cortada un poco. Necesita escalar la imagen y colocarla un poco diferente. O cambiar la imagen en sí.
Cuando verifiqué su código, le recomendaría que también envolviera todo en algún envoltorio con tamaño fijo. No se ve como esperabas en pantalla completa.
<div id="outter-image"> <div class="tilt-box"> <div class="tilt-bg-image-box"> <img class="bg-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/tecnam_bg.webp" /> </div> <img class="overlay-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/webp/Tecam_recent_mockup-min.webp" /> </div> </div> <style> .overlay-image { top: -20px; right: -20%; position: absolute; width: 60%; aspect-ratio: auto 299 /566; height: 120%; transition: transform .6s ease-in-out, opacity .5s; opacity: 0; transform: perspective(1000px) rotateY( -60deg); } .tilt-bg-image-box { width: 600px; height: auto; overflow: hidden; transition: transform .6s ease-in-out, opacity .5s; } .bg-image { transition: transform 1s .4s linear, opacity .5s; } .tilt-box:hover .bg-image { transform: translate3d(-8%, 0, 0); } .tilt-box:hover .overlay-image { opacity: 1; -webkit-transform: perspective(1000px) rotateY( -20deg); transform: perspective(1000px) rotateY( -20deg); } .tilt-box:hover .tilt-bg-image-box { transform: perspective(1000px) rotateY(20deg); } .tilt-box:hover .bg-image { transition: transform 4s .4s linear, opacity .5s; } </style>