Creating a HTML/CSS code as a beginner

Creating Custom Image Motion. (As a beginner)

Today, I wanted to share a technical breakthrough I had while building my site. I needed to add motion to an image I created in Illustrator—a Call to Action (CTA) for my “GEM BLOG.” Since I am using the free version of Elementor, I couldn’t use the built-in motion templates. Instead of giving up, I decided to dive into some custom coding (even though I’m not a pro coder yet!). I added an HTML widget to my homepage and pasted a custom script. Voila! The image appeared smoothly.

This post is really important for the students of “GEM TRADER” course. So read on….

The Problem

Initially, I wanted the promotional image to pop up after 3 seconds and disappear after 15 seconds. However, I realized 15 seconds wasn’t long enough for a reader to take action, and the image vanished too abruptly.

The Solution

I developed a custom HTML/CSS/JS snippet to handle the timing and transitions perfectly.

What I Learned:

• setTimeout: This is measured in milliseconds ($1000ms = 1s$).
• Opacity: Setting opacity: 0 hides the image, while the transition property makes it fade in and out elegantly.
• The “Flash” Issue: I learned that browsers sometimes show the image for a split second before the code hides it. I fixed this by setting the initial state more strictly in the CSS.

The Final Evolution of the Code

After a few tweaks to the timing and the “slide-up” motion, here is the final version I used.

(Note: Ensure you add the CSS ID gem-promo-image to your Image Widget settings in Elementor for this to work!)

HTML

<style>
/* Base state: Hidden and moved down slightly for a 'pop' effect */
#gem-promo-image {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px);
    transition: opacity 1.5s ease-in-out, transform 1.5s ease-out;
}

/* Visible state: Triggered by the script */
#gem-promo-image.show-image {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const promoImage = document.getElementById('gem-promo-image');
    if (promoImage) {
        // STEP 1: APPEAR after 3 seconds
        setTimeout(function() {
            promoImage.classList.add('show-image');
        }, 3000);

        // STEP 2: DISAPPEAR after 1 minute (60s + 3s delay)
        setTimeout(function() {
            promoImage.classList.remove('show-image');
        }, 63000);
    }
});
</script>

Why This Matters

As part of the “GEM TRADER” course in our trading pathway, you will eventually need to build a website for yourself. Don’t shy away from these technical challenges—they give your site a professional edge!

Wish you all well. Happy gem hunting and selling!