How to Create a Click-to-Move Overlay Effect with Smooth Transitions in HTML, CSS & Javascript

Code & Create

Introduction:

In the world of web development, user experience is key. This simple yet powerful effect doesn’t just grab attention, it ensures your website feels more modern and polished. One effective way to enhance your website’s interactivity is by adding smooth, engaging effects. One such effect is the “Click-to-Move Overlay”—an overlay that smoothly moves over an element when clicked, revealing more details or offering actions. This effect not only grabs the user’s attention but also provides a seamless experience. In this blog, we’ll walk you through the steps of implementing this effect using HTML, CSS, and JavaScript.

What You’ll Learn:

How to create smooth transitions with CSS.
How to use JavaScript to dynamically manipulate DOM elements.
How to build an interactive overlay that reacts to user clicks.

1. Setting Up the HTML Structure

Before diving into styles and effects, let’s first set up the structure of our page. We’ll start with a container that holds multiple clickable cards. Each card will feature an icon and some text, representing a different location or piece of information. The goal here is to make the overlay appear when a card is clicked.

<div class=”container”>
<div class=”hover-overlay”></div>
<div class=”card” data-index=”0″>
<div class=”icon”>🏛️</div>
<div class=”content”>
<h2>Headquarters</h2>
<h3>Washington D.C.</h3>
<p>3650 M St NW, Washington, DC 20037, USA</p>
</div>
</div>
<div class=”card” data-index=”1″>
<div class=”icon”>🕌</div>
<div class=”content”>
<h2>Headquarters</h2>
<h3>New Delhi</h3>
<p>12, Hailey Rd, Hamdard Nagar, Mandi House, New Delhi, India</p>
</div>
</div>
<div class=”card” data-index=”2″>
<div class=”icon”>🏛️</div>
<div class=”content”>
<h2>Headquarters</h2>
<h3>Washington D.C.</h3>
<p>3650 M St NW, Washington, DC 20037, USA</p>
</div>
</div>
<div class=”card” data-index=”3″>
<div class=”icon”>🕌</div>
<div class=”content”>
<h2>Headquarters</h2>
<h3>New Delhi</h3>
<p>12, Hailey Rd, Hamdard Nagar, Mandi House, New Delhi, India</p>
</div>
</div>
<div class=”card” data-index=”4″>
<div class=”icon”>🏛️</div>
<div class=”content”>
<h2>Headquarters</h2>
<h3>Washington D.C.</h3>
<p>3650 M St NW, Washington, DC 20037, USA</p>
</div>
</div>
</div>

In this structure, the .container holds all the content. The .hover-overlay is an empty div that will be animated on click to match the size and position of the clicked card. Each .card has an icon and content with information about a location.

2. Styling the Cards and Overlay

Now that we have the basic structure, let’s move on to styling the cards and the overlay using CSS. By default, the overlay will be invisible (opacity set to 0), and it will be positioned above the cards. When a card is clicked, the overlay will smoothly transition to the card’s size and position.

<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #123a69;
font-family: Arial, sans-serif;
position: relative;
}
.container {
position: relative;
width: 420px;
}
h2, h3, p {
margin: 0px;
}
.card {
position: relative;
display: flex;
align-items: center;
width: 400px;
padding: 15px;
border-radius: 10px;
overflow: hidden;
margin: 10px;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.card:active {
transform: scale(0.98);
}
.icon {
width: 50px;
height: 50px;
background-color: #ddd;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 24px;
color: #fff; /* Icon color white */
}
.content {
flex: 1;
color: #fff; /* Text color white initially */
}
.content h2 {
font-size: 22px;
}
.content h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.content p {
margin: 5px 0 0;
font-size: 14px;
color: #ddd; /* Text color white initially */
}
.content.black-text {
color: black; /* Text color black when overlay is shown */
}
.content.black-text h2,
.content.black-text h3,
.content.black-text p {
color: black;
}
</style>

Here, we define the overall layout, setting up the container and styling each .card. The cards will look nice with some padding, rounded corners, and a transition effect when clicked (e.g., slightly shrinking when clicked).

Beginning C++ Programming — From Beginner to Beyond
Obtain Modern C++ Object-Oriented Programming (OOP) and STL skills. C++14 and C++17 covered. C++20 info see below.

3. Adding the Overlay Effect

The next key step is to create the actual overlay that will animate when a user clicks a card. The .hover-overlay is positioned absolutely on top of the cards, and by default, its opacity is 0 (hidden). When clicked, it will transition smoothly to match the card’s position and size.

.hover-overlay {
position: absolute;
top: 8px;
left: 0;
width: 100%;
background-color: #fff; /* White background */
transition: top 0.6s ease-in-out, height 0.6s ease-in-out; /* Smooth transition for both top and height */
pointer-events: none;
border-radius: 10px;
opacity: 0; /* Start hidden */
}

We set up a smooth transition for the top and height properties to create a fluid effect. The overlay starts hidden (opacity: 0), but it will appear with a smooth transition when a card is clicked.

4. Implementing the JavaScript Logic

Now that we have the HTML structure and CSS styles, let’s move on to JavaScript. The goal here is to dynamically adjust the overlay’s size and position when a user clicks on a card. JavaScript will calculate the height and position of the clicked card and animate the overlay accordingly.

<script>
const cards = document.querySelectorAll(“.card”);
const overlay = document.querySelector(“.hover-overlay”);
const contents = document.querySelectorAll(“.content”);
cards.forEach((card, index) => {
card.addEventListener(“click”, () => {
// Get the card height dynamically
const cardHeight = card.offsetHeight;
overlay.style.transition = “top 0.6s ease-in-out, height 0.6s ease-in-out”; // Slow transition for both
overlay.style.top = `${card.offsetTop}px`; // Position the overlay based on the card
overlay.style.height = `${cardHeight}px`; // Set overlay height same as card
overlay.style.opacity = “1”; // Show overlay
// Make the text black when overlay appears
contents.forEach(content => content.classList.remove(“black-text”)); // Reset
contents[index].classList.add(“black-text”);
});
});
</script>

Here’s how this works:

When a card is clicked, JavaScript fetches the card’s height and its position (offsetHeight and offsetTop).
The overlay is animated to match the card’s size and position, thanks to the smooth CSS transitions.
Additionally, the content’s text color is changed dynamically to black, making it stand out when the overlay appears.

If you’re new to PHP or want to strengthen your fundamentals, check out “Procedural Programming in PHP: A Step-by-Step Guide.” This guide will help you understand the core concepts of procedural PHP, making it easier to write clean and efficient code. Perfect for beginners and those looking to refine their PHP skills!

Bottom Line:

The “Click-to-Move Overlay” effect is a great way to add interactivity and polish to your website. By combining HTML, CSS, and JavaScript, we’ve created an interactive overlay that moves smoothly over elements, providing a modern, engaging user experience.

This effect is perfect for any website where you want to showcase additional information or actions in a stylish, interactive way. The smooth transitions make the interaction feel more natural, ensuring your users enjoy a seamless experience. Experiment with this effect and tweak the styles and behavior to fit your project’s needs.

If you enjoy this article or find it helpful. Please like, comment, and share this post.

[contact-form-7 id="172"]

ABOUT GNFUSION

Our website is dedicated to providing informative and engaging technical content for readers who are looking to expand their knowledge in various fields. Whether you’re a beginner or an expert, our content is designed to help you stay up-to-date on the latest trends and advancements in technology. So if you’re looking to expand your knowledge and stay ahead of the curve, you’ve come to the right place.