Make this Advanced Card Hover Effect with Image Reveal in Elementor

 

 

Code Snippet for Card Hover Effects:

<style>
.mdw-hover-effect-144{
	--disable-bg-color: #F5F5F5;
	--disable-text-color: #D9D9D9;
	--image-on-tablet: true;
	--card-entrance-transition: 0.4s;
	--card-hover-transition: 0.3s;
	--image-hover-transition: 0.3s;
}
html:not(.elementor-html) .elementor-widget-html{
	display: none;
}
.mdw-hover-effect-144-main{
    animation: none !important;
}
html:not(.elementor-html) .mdw-hover-effect-144-card{
	transform: translateY(100%);
	opacity: 0;
}
.mdw-hover-effect-144.mdw-loaded .mdw-hover-effect-144-card{
	transform: translateY(0%);
	opacity: 1;
	transition: all var(--card-entrance-transition,0s) ease calc(var(--d) * 0.1s);
	cursor: pointer;
}
.mdw-hover-effect-144.mdw-image-disabled .elementor-widget-image{
    display: none !important;
}
.mdw-hover-effect-144 .elementor-widget-image:nth-child(2){
    z-index: 10;
}
.mdw-hover-effect-144-card .elementor-widget-image > *{
    transition: all var(--image-hover-transition,0s) cubic-bezier(0.37, 1.1, 0.63, 1);
}
.mdw-hover-effect-144-card:hover .elementor-widget-image:nth-child(1) > *{
	transform: translate(-150%,-106%) rotate(-16deg);
}
.mdw-hover-effect-144-card:hover .elementor-widget-image:nth-child(2) > *{
	transform: translate(-50%,-124%) rotate(1deg);
}
.mdw-hover-effect-144-card:hover .elementor-widget-image:nth-child(3) > *{
	transform: translate(50%,-106%) rotate(12deg);
}
.mdw-hover-effect-144-text{
	will-change: transform;
	transition: all var(--card-hover-transition,0s) ease-in-out !important;
	transform: translateY(15px);
}
.mdw-hover-effect-144-card:hover .mdw-hover-effect-144-text{
	transform: translateY(0);
	filter: drop-shadow(0px 0px 30px rgba(0,0,0,0.15));
}
.mdw-hover-effect-144-text .elementor-widget-heading:nth-child(1){
	clip-path: polygon(0 0, calc(100% - 35px) 0, 100% 100%, 0% 100%);
	margin-bottom: -1px;
}
.mdw-hover-effect-144-card.disabled .elementor-widget-heading > *,
.mdw-hover-effect-144 .elementor-heading-title{
	transition: all var(--card-hover-transition,0s) ease-in-out;
}
.mdw-hover-effect-144-card.disabled .elementor-widget-heading > *{
	background-color: var(--disable-bg-color) !important;
}
.mdw-hover-effect-144-card.disabled .elementor-heading-title{
	color: var(--disable-text-color) !important;
}
.mdw-hover-effect-144-text .elementor-heading-title{
    white-space: nowrap;
}
@media(min-width: 1025px){
.mdw-hover-effect-144-main > .e-con:last-child .mdw-hover-effect-144-card,
body.elementor-editor-active .mdw-hover-effect-144-main > .e-con:nth-last-child(2) .mdw-hover-effect-144-card{
    margin-bottom: 0;
}
}
@media(max-width: 1024px){
.mdw-hover-effect-144-main > .e-con:last-child .mdw-hover-effect-144-card:last-child,
body.elementor-editor-active .mdw-hover-effect-144-main > .e-con:nth-last-child(2) .mdw-hover-effect-144-card:nth-last-child(2){
    margin-bottom: 0;
}
.mdw-hover-effect-144-card:hover .elementor-widget-image:nth-child(1) > *{
	transform: translate(-150%,-122%) rotate(-16deg);
}
.mdw-hover-effect-144-card:hover .elementor-widget-image:nth-child(2) > *{
	transform: translate(-50%,-142%) rotate(1deg);
}
.mdw-hover-effect-144-card:hover .elementor-widget-image:nth-child(3) > *{
	transform: translate(50%,-122%) rotate(12deg);
}
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
if(!MDWNonce144){
var MDWNonce144 = true,
selector = '.mdw-hover-effect-144',
fontsReady = false,
isAnimated = []

function getValue(el, prop){
    computedStyle = $(window)[0].getComputedStyle(el[0])
    return computedStyle.getPropertyValue(prop)
}

$(document).ready(function(){
$(selector).each(function(){
var $this = $(this),
cards = $this.find('.mdw-hover-effect-144-card'),
imageOnTablet = getValue($this, '--image-on-tablet').trim() === 'true',
windowWidth = $(window).width(),
delay = 1

function isTablet(){ return windowWidth < 1024 }

for(var i=cards.length-2; i>=0; i-=2){
    if(isTablet()){
        cards.eq(i+1).get(0).style.setProperty('--d', delay++)
        cards.eq(i).get(0).style.setProperty('--d', delay++)
    }else{
        cards.eq(i).get(0).style.setProperty('--d', delay++)
		cards.eq(i+1).get(0).style.setProperty('--d', delay++)  
    }
}
cards.on('mouseenter', function(){
	if (isTablet()) return
	cards.not($(this)).addClass('disabled')
})
cards.on('mouseleave', function(){
	if (isTablet()) return
	cards.removeClass('disabled')
})
cards.on('click', function(){
	if($(this).find('a').length){
		window.location.href = $(this).find('a').attr('href')
	}
})
$(window).on('load resize', function(){
    windowWidth = $(window).width()
	if(isTablet()) cards.removeClass('disabled')
	isTablet() && !imageOnTablet ? $this.addClass('mdw-image-disabled') : $this.removeClass('mdw-image-disabled')
})
})
})
function runEntrance(){
$(selector).each(function(i){
    if(isAnimated[i] && fontsReady) $(this).addClass('mdw-loaded')
})
}

function runEntrance2(){
$(selector).find('.mdw-hover-effect-144-main').each(function(i){
    if($(this).hasClass('animated')) isAnimated[i] = true
})
runEntrance()
}

$(window).on('load focus visibilitychange scroll', function(e){
runEntrance2()
if(e.type == 'load' || (e.type == 'visibilitychange' && document.visibilityState === 'visible')){
    setTimeout(runEntrance2, 50)
    setTimeout(runEntrance2, 100)
    setTimeout(runEntrance2, 500)
    setTimeout(runEntrance2, 1000)
}
})

document.fonts.ready.then(function(){
    fontsReady = true
    runEntrance()
})
}
</script>