Hello everyone!
Hari ini kita akan membuat sebuah container yang menarik di Elementor, dengan sedikit bumbu CSS dan JavaScript! Semua telah dijelaskan di YouTube.
Dukung EstehC.
Content Show/ Hide CSS
selector{
--text-position: -500px;
--heading-position: -50px;
--button-position: 70px;
}
selector, selector .single-card p, selector .single-card a, selector .single-card h2{
transition: .5s all ease-in-out;
}
selector .single-card p, selector .single-card a{
position: relative;
bottom: var(--text-position);
}
selector .single-card a{
transition: 0.5s all linear;
position: relative;
top: 500px;
}
selector .single-card:hover p, selector .single-card:hover a{
bottom: 0px;
}
selector .single-card:hover a{
top: var(--button-position);
}
selector .single-card h2{
position: relative;
bottom: var(--heading-position);
}
selector .single-card:hover h2{
bottom: 0px;
}
Image Changing with JavaScript
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var $ = jQuery;
//Image One
var ImgOne = "url(...)";
//Image Two
var ImgTwo = "url(...)";
$(document).ready(function(){
$('#card-one').hover(function(){
$('#main-parent').css("background-image", ImgOne)
}, function(){
$('#main-parent').css("background-image", "")
});
$('#card-two').hover(function(){
$('#main-parent').css("background-image", ImgTwo)
}, function(){
$('#main-parent').css("background-image", "")
})
})
</script>