Stunning Image Gallery with Hover Effects & Animated Lightbox – Elementor Tutorial

How To Make A Vertical 3D Gallery Slider

So if you follow along in the video, I refer to this blog post for you to enter code at ...

Read More

How To Make A Horizontal 3D Gallery Slider

So if you follow along in the video, I refer to this blog post for you to enter code at ...

Read More

How To Make A Auto Rotating 3D Carousel

So if you follow along in the video, I refer to this blog post for you to enter code at ...

Read More

How To Make A 3D Carousel For Products

So if you follow along in the video, I refer to this blog post for you to enter code at ...

Read More

So if you follow along in the video, I refer to this blog post for you to enter code at certain point into the HTML widget, so below is everything you will need!

Alternatively

You can download the complete template here

The Following are the css class names I used in the tutorial:

				
					reboot-card-effect-section

reboot-card-effect-heading

reboot-card-effect-info

reboot-card-effect-close

reboot-card-effect

The Following code goes into the HTML widget:

				
					<style>
.reboot-card-effect-section{
    --big-width: 500px;
    --big-height: 650px;
    --rotation-diff: 5deg;
    --translate-diff: 120px;
    --transition: 0.3;
    --init-transition: 1.5;
    --big-transition: 0.5;
    --actual-height: var(--big-height);
}
.reboot-card-effect-section .reboot-card-effect{
    top: calc(-1px*var(--extra-height,0));
}
.reboot-card-effect-section .reboot-card-effect:before{
    position: fixed;
    height: 100vh;
    width: 100vw;
    inset: 0;
    z-index: 1;
    backdrop-filter: blur(20px);
    transition: all calc(1s*var(--big-transition)) ease-in-out;
}
.reboot-card-effect-section:not(.active) .reboot-card-effect:before{
    pointer-events: none;
}
.reboot-card-effect-section:not(.popup) .reboot-card-effect:before{
    opacity: 0;
}
.reboot-card-effect-section:not(.init) .reboot-card-effect > .e-con,
.reboot-card-effect-section:not(.init) .reboot-card-effect > .e-container{
    opacity: 0;
    filter: blur(20px) saturate(0%);
    pointer-events: none;
}
.reboot-card-effect-section .reboot-card-effect > .e-con,
.reboot-card-effect-section .reboot-card-effect > .e-container{
    transform-origin: 50% 100%;
    cursor: pointer;
    will-change: opacity, filter;
}
body.elementor-editor-active .reboot-card-effect-section .reboot-card-effect > .e-con,
body.elementor-editor-active .reboot-card-effect-section .reboot-card-effect > .e-container,
body.elementor-editor-preview .reboot-card-effect-section .reboot-card-effect > .e-con,
body.elementor-editor-preview .reboot-card-effect-section .reboot-card-effect > .e-container{
    opacity: 1;
    filter: none;
    pointer-events: initial;
}
.reboot-card-effect-section:not(.init) .reboot-card-effect .e-con .e-con,
.reboot-card-effect-section:not(.init) .reboot-card-effect .e-container .e-container{
    box-shadow: none;
}
.reboot-card-effect-section .reboot-card-effect .e-con .e-con,
.reboot-card-effect-section .reboot-card-effect .e-container .e-container{
    will-change: box-shadow;
    height: var(--min-height, 320px);
    overflow: hidden;
    transition: all calc(1s*var(--transition)) ease-in-out;
}
.reboot-card-effect-section .reboot-card-effect .e-con .e-con:before,
.reboot-card-effect-section .reboot-card-effect .e-container .e-container:before{
    transform: all calc(1s*var(--big-transition)) ease-in-out;
}
.reboot-card-effect-section .reboot-card-effect .e-con.fixed,
.reboot-card-effect-section .reboot-card-effect .e-container.fixed{
    position: fixed;
    top: calc(1px*var(--card-y,0));
    left: calc(1px*var(--card-x,0));
    z-index: 10;
    transition: all calc(1s*var(--big-transition)) ease-in-out;
}
.reboot-card-effect-section .reboot-card-effect .e-con.fixed .e-con,
.reboot-card-effect-section .reboot-card-effect .e-container.fixed .e-container{
    transition: all calc(1s*var(--big-transition)) ease-in-out;
}
.reboot-card-effect-section .reboot-card-effect .e-con.big .e-con,
.reboot-card-effect-section .reboot-card-effect .e-container.big .e-container{
    height: var(--actual-height);
    width: var(--big-width);
}
.reboot-card-effect-section .reboot-card-effect .e-con .elementor-widget,
.reboot-card-effect-section .reboot-card-effect .e-container .elementor-widget{
    overflow: hidden;
}
.reboot-card-effect-section .reboot-card-effect .e-con.big .elementor-widget > *,
.reboot-card-effect-section .reboot-card-effect .e-container.big .elementor-widget > *{
    transform: translateY(0%);
    transition: all 0.5s ease-in-out calc(1s*var(--big-transition));
}
.reboot-card-effect-section .reboot-card-effect-heading{
    margin-bottom: calc(1px*var(--extra-height,0)) !important;
}
.reboot-card-effect-section .reboot-card-effect-heading .elementor-widget-container{
    overflow: hidden;
}
.reboot-card-effect-section:not(.init) .reboot-card-effect-heading .elementor-heading-title{
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
}
.reboot-card-effect-section .reboot-card-effect-heading .elementor-heading-title{
    transform: translateY(0%);
    transition: all 0.7s ease-in-out calc(1s*var(--init-transition) - 0.8s);
}
body.elementor-editor-active .reboot-card-effect-section .reboot-card-effect-heading .elementor-heading-title,
body.elementor-editor-preview .reboot-card-effect-section .reboot-card-effect-heading .elementor-heading-title{
    opacity: 1;
    pointer-events: initial;
    transform: translateY(0%);
}
.reboot-card-effect-section:not(.popup) .reboot-card-effect-close{
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease-in-out;
}
.reboot-card-effect-section .reboot-card-effect-close{
    cursor: pointer;
    transition: all 0.5s ease-in-out calc(1s*var(--big-transition));
}
.reboot-card-effect-section .reboot-card-effect-close .elementor-icon{
    display: block;
}
.reboot-card-effect-section .reboot-card-effect-close i:before,
.reboot-card-effect-section .reboot-card-effect-close i:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.6em;
    height: 0.03em;
    background: currentColor;
    transform: translate(-50%,-50%) rotate(45deg);
}
.reboot-card-effect-section .reboot-card-effect-close i:after{
    transform: translate(-50%,-50%) rotate(-45deg);
}
.reboot-card-effect-section .reboot-card-effect-info{
    transition: all 0.1s linear;
    pointer-events: none;
}
.reboot-card-effect-section .reboot-card-effect-info:not(.showing){
    opacity: 0;
}
.reboot-card-effect-section .reboot-card-effect-info .elementor-button{
    width: 100%;
    height: var(--container-widget-width, 90px);
    display: flex;
    align-items: center;
}
.reboot-card-effect-section .reboot-card-effect-info .elementor-button-text{
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px){
.reboot-card-effect-section{
    --big-width: 380px;
    --big-height: 500px;
    --rotation-diff: 15deg;
    --translate-diff: 5px;
}
}

@media (min-width: 768px){
body.fixed{
    overflow: hidden;
}
.reboot-card-effect-section .reboot-card-effect:before{
    content: "";
}
.reboot-card-effect-section.init .reboot-card-effect > .e-con,
.reboot-card-effect-section.init .reboot-card-effect > .e-container{
    transform: rotate(calc(var(--index) * var(--rotation-diff))) translate(calc(var(--translate-diff)*var(--index)), 0);
    animation: reboot-card-initialization calc(1s*var(--init-transition)) ease-in-out;
}
@keyframes reboot-card-initialization{
0%{ transform: none; opacity: 0; filter: blur(20px) saturate(0%);}
100%{ transform: rotate(calc(var(--index)* var(--rotation-diff))) translate(calc(var(--translate-diff)* var(--index)), 0); }
}
@-webkit-keyframes reboot-card-initialization {
0%{ transform: none; opacity: 0; filter: blur(20px) saturate(0%);}
100%{ transform: rotate(calc(var(--index)* var(--rotation-diff))) translate(calc(var(--translate-diff)* var(--index)), 0); }
}
@-moz-keyframes reboot-card-initialization {
0%{ transform: none; opacity: 0; filter: blur(20px) saturate(0%);}
100%{ transform: rotate(calc(var(--index)* var(--rotation-diff))) translate(calc(var(--translate-diff)* var(--index)), 0); }
}
@-o-keyframes reboot-card-initialization {
0%{ transform: none; opacity: 0; filter: blur(20px) saturate(0%);}
100%{ transform: rotate(calc(var(--index)* var(--rotation-diff))) translate(calc(var(--translate-diff)* var(--index)), 0); }
}
@keyframes reboot-card-initialization {
0%{ transform: none; opacity: 0; filter: blur(20px) saturate(0%);}
100%{ transform: rotate(calc(var(--index)* var(--rotation-diff))) translate(calc(var(--translate-diff)* var(--index)), 0); }
}
.reboot-card-effect-section .reboot-card-effect .e-con.fixed.big,
.reboot-card-effect-section .reboot-card-effect .e-container.fixed.big{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.reboot-card-effect-section .reboot-card-effect .e-con.hover .e-con,
.reboot-card-effect-section .reboot-card-effect .e-container.hover .e-container{
    transform: translateY(-60px);
}
.reboot-card-effect-section .reboot-card-effect .e-con.defocus .e-con,
.reboot-card-effect-section .reboot-card-effect .e-container.defocus .e-container{
    filter: saturate(0%);
}
.reboot-card-effect-section .reboot-card-effect .e-con:not(.big) .e-con:before,
.reboot-card-effect-section .reboot-card-effect .e-container:not(.big) .e-container:before{
    opacity: 0;
}
.reboot-card-effect-section .reboot-card-effect .e-con.big .e-con,
.reboot-card-effect-section .reboot-card-effect .e-container.big .e-container{
    transform: translate(calc((var(--width, 240px) - var(--big-width))/2), calc((var(--min-height, 320px) - var(--actual-height))/2 - calc(1px*var(--y,0))));
}
.reboot-card-effect-section .reboot-card-effect .e-con .elementor-widget,
.reboot-card-effect-section .reboot-card-effect .e-container .elementor-widget{
    width: calc(var(--big-width) - 20px*2);
    max-width: unset;
}
.reboot-card-effect-section .reboot-card-effect >.e-con:not(.big) .elementor-widget > *,
.reboot-card-effect-section .reboot-card-effect > .e-container:not(.big) .elementor-widget > *{
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: all 0.5s ease-in-out;
}
}

@media (max-width: 767px){
.reboot-card-effect-section{
    --big-width: 240px;
    --big-height: 320px;
}
.reboot-card-effect-section .reboot-card-effect > .e-con,
.reboot-card-effect-section .reboot-card-effect > .e-container{
    position: static !important;
    transition: filter calc(1s*var(--init-transition)) ease-in-out,
                opacity calc(1s*var(--init-transition)) ease-in-out;
}
.reboot-card-effect-section .reboot-card-effect .e-con .e-con,
.reboot-card-effect-section .reboot-card-effect .e-container .e-container{
    box-shadow: none;
}
}    
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
if(!rebootNonce107){
var rebootNonce107 = true
$(document).ready(function(){

var wrapper = [],
    containers = [],
    info = [],
    initLock = [],
    clickLock = []

function getCSS(el, property, defaultValue = 0){
    var val = getComputedStyle(el.get(0)).getPropertyValue(property)
    return val ? val.trim() : defaultValue;
}

function initialAnimation(el, i, initTransition){
    var offset = 200,
        initialTime = new Date(),
        currentTime, interval, timeDiff, bottomContainerIndex
        
    if(el.offset().top < $(window).scrollTop() + $(window).height() - offset) {
        el.addClass('init')
        if( !containers[i].length ) return
        if(initLock[i]) return
        initLock[i] = true
        interval = setInterval(function(){
            currentTime = new Date()
            timeDiff = currentTime - initialTime
            bottomContainerIndex = containers[i].eq(0).hasClass('fixed') ? containers[i].length - 1 : 0
            extraHeight = containers[i].length == 1 ? 0 : containers[i].eq(bottomContainerIndex).get(0).getBoundingClientRect().bottom - wrapper[i].get(0).getBoundingClientRect().top - parseFloat(getCSS(wrapper[i], 'padding-top')) - containers[i].height()
            el.get(0).style.setProperty('--extra-height', extraHeight)
            wrapper[i].get(0).style.setProperty('--card-y', wrapper[i].offset().top + parseFloat(getCSS(wrapper[i], 'padding-top')) - $(window).scrollTop())
            wrapper[i].get(0).style.setProperty('--card-x', ($(window).width() - containers[i].width())/2)
            if(timeDiff > 3*initTransition){
                initLock[i] = false
                clearInterval(interval)
            }
        }, 10)
    }
}

$(window).on('load scroll resize', function(e){
$('.reboot-card-effect-section').each(function(i){
    var $this = $(this),
        initTransition = parseFloat(getCSS($this, '--init-transition', 1.5))*1000,
        bigHeight = parseFloat(getCSS($this, '--big-height', '650px')),
        actualHeight = bigHeight,
        maxHeight = 0.8,
        maxItems, startPoint, increase
        
    initialAnimation($this, i, initTransition)
    
    if($(window).width() > 1450){
        maxItems = 9   
    }else if($(window).width() > 1320){
        maxItems = 8
    }else if($(window).width() > 1180){
        maxItems = 7
    }else if($(window).width() > 1024){
        maxItems = 6
    }else{
        maxItems = 6
    }
    startPoint = containers[i].length > maxItems ? (1 - maxItems)/2 : (1 - containers[i].length)/2
    increase = containers[i].length > maxItems ? (maxItems - 1)/(containers[i].length - 1) : 1
        
    containers[i].each(function(i){
        $(this).get(0).style.setProperty('--index', startPoint+i*increase)
    })
    
    if( bigHeight > $(window).height()*maxHeight ){ actualHeight = $(window).height()*maxHeight }
    $this.get(0).style.setProperty('--actual-height', actualHeight + 'px')
    
    if(e.type !== 'scroll'){
        clickLock[i] = true
        setTimeout(function(){
            clickLock[i] = false
        }, initTransition)
    }
})
})

function hoverIn($this, containers){
    if(!$this.hasClass('fixed')){
        $this.addClass('hover')
        containers.addClass('defocus')
        $this.removeClass('defocus')
    }
}
    
$(window).on('mousemove', function(e){
$('.reboot-card-effect-section').each(function(i){
    
    var $this = $(this),
        x = e.pageX - $this.offset().left,
        y = e.pageY - $this.offset().top,
        cards = $(e.target).closest('.reboot-card-effect > .e-con, .reboot-card-effect > .e-container')

    info[i].css('transform', 'translate(' + x + 'px,' + y + 'px)')
    
    if( !cards.length || cards.hasClass('fixed') ){
        info[i].removeClass('showing')
    }else{
        info[i].addClass('showing')
        hoverIn(cards, containers[i])
    }
})
})

$('.reboot-card-effect-section').each(function(i){
    
    var $this = $(this),
        close = $this.find('.reboot-card-effect-close'),
        bigTransition = parseFloat(getCSS($this, '--big-transition', 0.5))*1000
        
    wrapper[i] = $this.find('.reboot-card-effect')
    containers[i] = wrapper[i].children('.e-con, .e-container')
    info[i] = $this.find('.reboot-card-effect-info')
    initLock[i] = false
    clickLock[i] = false
        
    containers[i].hover(function(){
        hoverIn($(this), containers[i])
    }, function(){
        $(this).removeClass('hover')
        containers[i].removeClass('defocus')
    })
        
    containers[i].on('click', function(){
        var t = $(this)
        if($(window).width() < 768) return
        if(t.hasClass('fixed')) return
        if(clickLock[i]) return
        clickLock[i] = true
        wrapper[i].get(0).style.setProperty('--card-y', wrapper[i].offset().top + parseFloat(getCSS(wrapper[i], 'padding-top')) - $(window).scrollTop())
        wrapper[i].get(0).style.setProperty('--card-x', ($(window).width() - containers[i].width())/2)
        containers[i].removeClass('fixed defocus')
        t.addClass('fixed')
        setTimeout(function(){ t.addClass('big') }, 10)
        $this.addClass('popup active')
        $('body').addClass('fixed')
        info[i].removeClass('showing')
        setTimeout(function(){
            clickLock[i] = false
        }, bigTransition+10)
    })
    
    wrapper[i].on('click', function(e){
        if($(e.target).closest('.e-con, .e-container').hasClass('reboot-card-effect')){ close.trigger('click') }
    })
    
    close.on('click', function(){
        if(clickLock[i]) return
        clickLock[i] = true
        containers[i].removeClass('big')
        $this.removeClass('popup')
        setTimeout(function(){
            containers[i].removeClass('fixed')
            $this.removeClass('active')
            $('body').removeClass('fixed')
            clickLock[i] = false
        }, bigTransition+10)
    })
})
})
}
</script>
Hello! How can I help you today?