What This Does

• Keeps the service title in the correct position
• On hover, the title moves up smoothly
• Description and “Read More” fade in and move up smoothly
• No overlap, no jump, no messy animation
• Works on desktop, always visible on mobile

Step 1: Add CSS Classes in Elementor

For each service box:

1️⃣ Service Container
Select the container that wraps one service
Go to Advanced → CSS Classes
Add:

svc

2️⃣ Title
Select the title widget
Go to Advanced → CSS Classes
Add:

svc-title

3️⃣ Description
Select the text widget (description)
Go to Advanced → CSS Classes
Add:

svc-desc

4️⃣ Button (“Read More”)
Select the button widget
Go to Advanced → CSS Classes
Add:

svc-btn

Repeat for all 3 services.

Step 2: Add the CSS Code

Paste the CSS below in one of these locations:

Page → Advanced → Custom CSS (recommended)
OR Appearance → Customize → Additional CSS

/* =========================================
SERVICES – FINAL CLEAN HOVER (NO OVERLAP)
========================================= */

.svc{
position: relative;
cursor: default;
}

/* ======================
TITLE (BASE STATE)
====================== */

.svc .svc-title{
margin: 0 0 10px 0 !important;
padding-left: 30px;
transition: transform 0.7s ease;
}

/* ======================
DESC + BUTTON (HIDDEN, IN FLOW)
====================== */

.svc .svc-desc,
.svc .svc-btn{
padding-left: 0;
opacity: 0;
transform: translateY(8px);
max-height: 0;
overflow: hidden;
pointer-events: none;
transition:
opacity 0.6s ease,
transform 0.7s ease,
max-height 0.7s ease;
}

.svc .svc-desc{
margin: 0 0 10px 0;
}

/* ======================
HOVER STATE
====================== */

.svc:hover .svc-title{
transform: translateY(-8px);
}

.svc:hover .svc-desc,
.svc:hover .svc-btn{
opacity: 1;
transform: translateY(0);
max-height: 200px;
pointer-events: auto;
}

/* ======================
MOBILE / TABLET
====================== */

@media (max-width: 1024px){
.svc .svc-desc,
.svc .svc-btn{
opacity: 1;
transform: none;
max-height: none;
pointer-events: auto;
}

.svc .svc-title{
transform: none;
}
}

Step 3: Test

Preview the page on desktop → hover each service
Check mobile → content is visible without hover
Clear cache if needed