Elementor Hexagon Image Hover Effect with Glassmorphism and Text Animation

 

 

Code Snippet for Hexagon Image Hover Effect:

<style>
.mdw-hexagonal-hover-effect{
    --mobile-animation-wait: true;
}
.mdw-hexagonal-hover-effect .elementor-widget-image{
    position: relative;
}
.mdw-hexagonal-hover-effect .elementor-widget-image:before{
    content: '';
    display: block;
    padding-top: 100%;
}
.mdw-hexagonal-hover-effect .elementor-widget-image > *{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.mdw-hexagonal-hover-effect .elementor-widget-image a{
    width: 100%;
    height: 100%;
}
.mdw-hexagonal-hover-effect img{
    filter: grayscale(0) sepia(0) brightness(1);
    transition: all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.mdw-hexagonal-hover-effect:hover img{
    transform: scale(1.5);
    filter: grayscale(0.5) sepia(0.75) brightness(0.75);
}
.mdw-hexagonal-hover-effect > .e-con{
    pointer-events: none;
    height: var(--min-height,50%);
}
html.elementor-html .mdw-hexagonal-hover-effect > .e-con{
    pointer-events: unset;
}
.mdw-hexagonal-hover-effect > .e-con > .e-con{
    opacity: 0;
    transform: scale(0.75);
    clip-path: polygon(0% 0px, 0px 0%, calc(100% - 50px) 0px, 100% 50px, 100% 100%,calc(100% - 0px) 100%, 50px 100%, 0px calc(100% - 50px));
    backdrop-filter: blur(20px);
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.mdw-hexagonal-hover-effect:hover > .e-con > .e-con,
html.elementor-html .mdw-hexagonal-hover-effect > .e-con > .e-con{
    opacity: 1;
    transform: scale(1);
}
.mdw-hexagonal-hover-effect span.letter{
    opacity: 0;
    transition: all 0.1s cubic-bezier(0.17, 0.67, 0.83, 0.67) calc(var(--delay) * 0.7s);
}
.mdw-hexagonal-hover-effect .mdw-hexagonal-hover-effect-heading span.letter{
    transition: all 0.1s cubic-bezier(0.17, 0.67, 0.83, 0.67) calc(var(--delay) * 0.1s);
}
.mdw-hexagonal-hover-effect:hover span.letter{
    opacity: 1;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
if(!MDWNonce116){
var MDWNonce116 = true
;(function($){
var selector = '.mdw-hexagonal-hover-effect'
$(document).ready(function(){
    
function getCSS(el, prop, def){
    var val = getComputedStyle(el[0]).getPropertyValue(prop).trim()
    return val ? val.trim() : def
}

$(selector).each(function(){
    var $this = $(this)
    $this.find('.elementor-widget-heading').each(function(){
        var heading = $(this).find('.elementor-heading-title'),
        words = heading.text().trim().split(/\s+/),
        len = heading.text().replace(/\s/g, "").length,
        arr = [...Array(len)].map((_, i) => i),
        randomArr = [],
        randomIndex,
        randomItem,
        delay,
        index = 0
        
        while (arr.length > 0) {
            randomIndex = Math.floor(Math.random() * arr.length),
            randomItem = arr.splice(randomIndex, 1)[0]
            randomArr.push(randomItem)
        }
        
        wrappedHTML = words.map(function(word){
            var letters = word.split('').map(function(letter){
                delay = randomArr[index]/(len-1)
                index++
                return `<span style="--delay: ${delay}" class="letter">${letter}</span>`
            }).join('')
            return `<span class="word">${letters}</span>`
        }).join(' ')
        
        heading.html(wrappedHTML)
    })
    
    $this.find('a').on('click', function(e){
        var mobileWait = getCSS($this, '--mobile-animation-wait', 'false') == 'true'
        if(mobileWait && $(window).width() < 768){
            e.preventDefault()
            link = $(this).attr('href')
            setTimeout(function(){
                window.location.href = link
            },(0.7+0.1)*1000)
        }
    })
})
})
})(jQuery)
}
</script>