Beautiful Portfolio Image Scroll Effect Without Plugin | Elementor and Elementor Pro

CSS Classes:

Image Class: website-img
Box Container: website-box

CSS:

/* box container */
.website-box {
height: 300px;
overflow: hidden;
}


/* website image position */
.website-img img{
object-fit: contain;
object-position: 0px 0px;
transition: object-position 6s ease;
}

Javascript

<script>
var imgBox = document.querySelectorAll('.website-img img');
for(i=0; i<imgBox.length;i++){
imgBox[i].addEventListener('mouseenter', function(hover){
var imgHeight = this.scrollHeight;
var scrollheight = imgHeight - 300;
hover.target.style.objectPosition = `0px -${scrollheight}px`;

});

imgBox[i].addEventListener('mouseleave', function(hover){
hover.target.style.objectPosition = '0px 0px';


});
}

</script>
 
Scroll to Top