Interactive Landing Page Design with Elementor| Step-by-Step Tutorial

Facebook
Email
WhatsApp

Thumbnails Centered CSS

				
					selector{
position: absolute;
left: 0;
bottom: -1vh;
width: 150px;
transform: translateX(-50%);
}
selector img{
cursor: pointer;
transition: 0.5s;
}
selector img:hover{
transform: translateY(-12px)
}
				
			

JavaScript snippet for thumbnails

				
					<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var $ = jQuery;
$(document).ready(function(){
$('[data-vincent]').on('click', function(){
var vincent = $(this).attr('data-vincent')
var bColor = $(this).attr('data-color')
$('.watch img').attr('src', vincent ).attr('srcset', '')
$(".watch-section").css("background-color", bColor);
})
})
</script>
				
			

Thumbnail Custom Attribute

				
					data-vincent|image_url
				
			

BG Color Custom Attribute

				
					data-color|color_code
				
			

Background Transition CSS

				
					.watch-section{
-webkit-transition: all 1s !important;
transition: all 1s !important;
}
				
			
Hostinger domain & hosting ireland