How To Make Custom cursor over a specific section Using Elementor Free

Quick Summary

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

In this tutorial, You'll learn How to Create a FREE eCommerce / Online Shop Website with WordPress, Elementor and WooCommerce. This Masterclass is for Complete Beginners.

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

In this tutorial, I’ll show you how to create a fully professional and Amazing looking eCommerce website for completely FREE. We’ll be using only the best & free resources to create this online shop. We’ll use a FREE Theme, a FREE Page Builder & All FREE Plugins.

To create this Online Shop, we’ve taken all the features and inspiration from world’s top eCommerce websites like Amazon, AliExpress, Walmart, flipkart and so on.

Though we’ll be using all the FREE resources, it will have all the basics and necessary features like a fully professional eCommerce website.

You can sell any type of products – Physical products, Digital products, Products with different colors & sizes… You can name it.

We’ll cover all the advanced techniques: Like, People can add products into cart very easily, then their shipping cost & tax rate will be automatically calculated based on their location.

On checkout, people can pay using different payment methods like paypal,credit cards or your local payment gateways. So people don’t need to go to any third party website, they can pay directly on your website.

Tools and Links Used

Hostinger Fast, beginner friendly WordPress hosting.

Get Hosting

Elementor The free page builder this tutorial is built with.

Get Elementor

Elementor Pro The Pro upgrade used throughout this tutorial.

Get Elementor Pro

Project Files Download the resources used in this tutorial.

Download Files

Kitpapa Ready made Elementor template kits.

Get Templates

Kitninja eCommerce Elementor template kits.

Get Templates

Prompt Used in This Tutorial

Cursor Box Elements Style CSS

<style>
.icon .elementor-icon{
    border: 1px solid rgb(255 255 255 / 30%)!important;
}

.icon:hover .elementor-icon{
    border-color: #2563eb!important;
}

.portfolio-box .portfolio-hover .elementor-spacer-inner{
       transition: all 1s ease;
    }
.portfolio-box:hover .portfolio-hover .elementor-spacer-inner{
        height: 400px!important;
    }
.portfolio-box img{
        transform: scale3d(1, 1, 1);
    transform-style: preserve-3d;
    transition: all 1s ease;
}

.portfolio-box:hover img{
    transform: scale3d(1.3, 1.3, 1)
} 

.portfolio-box .title .elementor-heading-title{
     transition: all 0.3s ease;
}

.portfolio-box:hover .title .elementor-heading-title{
    color: #4277eb!important;
}

</style>

Cursor Box Elements Style CSS Classes

icon
portfolio-box
portfolio-hover
title

Cursor Circle Style CSS

.box .cursor{
    transform: translate3d(-10px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  transform-style: preserve-3d;
  transition: all 0.1s ease, opacity 0.3s ease;
  opacity: 0;
  color: #0056ff; /* match your blue */
}

.box:hover .cursor{
    transform: translate3d(-50px, -50px, 0px) scale3d(1, 1, 1);
  opacity: 1;
}

.cursor {
    position: fixed;
    pointer-events: none;
    transform: translate(-50%, -50%);
    will-change: transform;
    transform-style: preserve-3d;
    
}


.circel-text{
    animation: circle 12s linear infinite;
}

@keyframes circle{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.icon-plane{
    transform: translate(-50%, -50%);
}

@media (max-width: 1024px){
.cursor {
    display: none;
    }
}

Cursor Circle Style CSS Classes

box
cursor
circel-text
icon-plane

Cursor over a specific section JS Code

<script>


const cursor = document.querySelector('.cursor');
const portfolioBoxes = document.querySelectorAll('.portfolio-box');


if (cursor && portfolioBoxes.length > 0) {
  
  portfolioBoxes.forEach(box => {
    
    box.addEventListener('mouseenter', () => {
      cursor.style.opacity = '1';
    });
    
   
    box.addEventListener('mousemove', e => {
      cursor.style.top = `${e.clientY}px`;
      cursor.style.left = `${e.clientX}px`;
    });
    
    box.addEventListener('mouseleave', () => {
      cursor.style.opacity = '0';
    });
  });
}

</script>

How To Make Custom cursor over a specific section Using Elementor Free

Quick Summary

Tools and Links Used

Prompt Used in This Tutorial

Get Your FREE Freelancing Roadmap

Related Tutorials

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel