Hover Scroll Image
Adjust value in code block by changing variable value. Border and Icon value adjust in builder.
<style> /* Adjust Screen height and bottom Vale Here */ :root{ --hover-bottom-value: -1350px; --screen-height: 600px; /* Adjust Hove Icon Value */ --icon-hoverup-height: -100px; } .scroll-screen { height: var(--screen-height); overflow: hidden; } .scroll-screen__image{ width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: all 1s ease-in-out; } .scroll-screen:hover .scroll-screen__image { object-position: bottom center; transition: all 2s ease; } .scroll-screen:hover .scroll-screen__icon{ transform: translatey(var(--icon-hoverup-height)); opacity:0.3; transition: all 2s ease; } .scroll-screen__icon{ transition: all 2s ease; } </style>