Create an Animated Text Hover Effects in Elementor

 

 

JavaScript code snippet:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var $ = jQuery,
    className = 'stair'

$(document).ready(function(){

    $( '.' + className ).each(function(){

        var texts = [],
        heading = $(this).find('.elementor-widget-heading'),
        last
        
        heading.each(function(){ texts.push($(this).prev().html()) })
        heading.each(function(i){ $(this).prepend(texts[i]) })
        heading.eq(0).prepend(heading.eq(0).html())
        heading.find('.elementor-heading-title').eq(0).text('')
        
        last = heading.last().clone()
        $(this).find('.elementor-widget-wrap').append(last)

        heading = $(this).find('.elementor-widget-heading')

        heading.last().find('.elementor-heading-title').eq(0).text('')
        heading.last().find('.elementor-widget-container').eq(0).clone().appendTo( heading.last() )
        heading.last().find('.elementor-widget-container').eq(0).remove()
    })
})
</script>

 

 

 

CSS code snippet:

<style>
body{
    --height: 58px;
}
.stair{
    width: 100%;
}
.stair .elementor-widget-wrap{
    display: block !important;
    width: auto;
}
.stair .elementor-widget-heading{
    margin: 0;
    overflow-y: clip;
    transform-origin: left;
    margin-top: 18px;
    height: var(--height);
}
.stair .elementor-heading-title{
    height: var(--height);
    line-height: var(--height);
}
.stair .elementor-widget-heading:nth-child(odd) {
  transform: skew(60deg, -30deg) scaleY(0.667);
}
.stair .elementor-widget-heading:nth-child(even) {
  transform: skew(0deg, -30deg) scaleY(1.333);
}
.stair .elementor-widget-container{
    transition: all 0.5s ease-in-out;
    position: relative;
}
.stair.center .elementor-widget-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}
.stair.right .elementor-widget-wrap {
    margin-left: auto !important;
}
.stair .elementor-widget-wrap:hover .elementor-widget-container{
        transform: translateY(-100%);
}
</style>

 

 

 

CSS code snippet (inside inner section):

selector{
    --height: 58px;
}
selector .elementor-widget-heading{
    margin-top: 18px;
}
selector .elementor-widget-heading:last-child .elementor-widget-container{
    margin-left: 131px;
}

@media (max-width: 767px){
selector{
    --height: 20px;
}
selector .elementor-widget-heading{
    margin-top: 5px;
}
selector .elementor-widget-heading:last-child .elementor-widget-container{
    margin-left: 42px;
}
}