I’m working on a web project, and I’m trying to create a hover effect on the first card that includes an image. When I hover over the card, I want the card to move up and the image to become fully visible (opacity set to 1). I’ve tried several approaches, but I can’t seem to get it working correctly. Here’s my HTML and CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<style>
/* #arrow {
position: relative;
transition: top ease 0.5s;
}
#arrow:hover {
top: -15px;
}
#arrow:hover img {
transform: translate(0, -15px);
transition: transform ease 0.5s;
} */
.your-card {
position: relative;
transition: transform 0.3s;
}
.your-card:hover {
transform: translateY(-10px);
}
.your-card:hover img {
transform: translate(0, -30px);
transition: transform ease 0.5s;
opacity: 1;
}
</style>
</head>
<body>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap justify-center"> <!-- Added justify-center -->
<div class="flex flex-col text-center w-full mb-32">
<h1 class="sm:text-3xl font-normal" style="color: #2e66f4; font-size: 2.7rem;">Here's Why <span
class="bg-yellow-300 font-bold text-black px-2" style="border-radius: 6px;">Zephurus
Right</span> For You<span class="text-red-600 font-bold">.</span></h1>
<h2 class="font-light mb-1 mt-5 font-serif pr-16" style="color: #999; font-size: 1.2rem;">Don't waste
your time anymore</h2>
</div>
<div class="flex flex-wrap -m-16">
<!-- First Card -->
<div class="p-4 w-[532px] h-[300px] your-card" id="arrow">
<div
class="flex border-2 rounded-lg border-gray-200 border-opacity-50 p-8 sm:flex-row flex-col hover:shadow-lg">
<div
class="w-32 h-48 sm:mr-8 sm:mb-0 mb-4 flex rounded-full flex-shrink-0 left-0 absolute top-10 opacity-40 card-image">
<img src="./Image2-fotor-bg-remover-20231027103626.png" alt="ecommerce">
</div>
<div class="flex-grow ml-24 my-10">
<h2 class="text-gray-900 title-font font-medium mb-3 text-xl" style="color: #4a4a4a;">
Automate your sales process</h2>
<p class="leading-relaxed text-base" style="color: #8e9baf;">👉 Turn boring web forms
into friendly conversations</p>
<p class="leading-relaxed text-base" style="color: #8e9baf;">👉 Get your meetings and
sales calls scheduled</p>
</div>
</div>
</div>
<!-- Second Card -->
<div class="p-4 w-[532px] h-[300px] mt-20">
<div class="flex border-2 rounded-lg border-gray-200 border-opacity-50 p-8 sm:flex-row flex-col">
<div
class="w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-10 h-10" viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div class="flex-grow">
<h2 class="text-gray-900 text-lg title-font font-medium mb-3" style="color: #4a4a4a;">
Perfect your customer support</h2>
<p class="leading-relaxed text-base" style="color: #8e9baf;">👉 Consistent 24/7
support across channels</p>
<p class="leading-relaxed text-base" style="color: #8e9baf;">👉 Solve their problems
faster</p>
<p class="leading-relaxed text-base" style="color: #8e9baf;">👉 No wait time, quick
response</p>
</div>
</div>
</div>
</div>
<!-- Second Row -->
<div class="flex flex-wrap -m-4">
<!-- Third Card -->
<div class="p-4 w-[532px] h-[300px]">
<div class="flex border-2 rounded-lg border-gray-200 border-opacity-50 p-8 sm:flex-row flex-col">
<div
class="w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-8 h-8" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<div class="flex-grow">
<h2 class="text-gray-900 text-lg title-font font-medium mb-3" style="color: #4a4a4a;">Power
up your marketing</h2>
<p class="leading-relaxed text-base" style="color: #8e9baf;">👉 Generate more
qualified leads on autopilot</p>
<p class="leading-relaxed text-base" style="color: #8e9baf;">👉
Make proactive contact with visitors.</p>
<p class="leading-relaxed text-base" style="color: #8e9baf;">👉
Boost your conversions
</p>
<p class="leading-relaxed text-base" style="color: #8e9baf;">👉
Turn your traffic into paying
</p>
</div>
</div>
</div>
<!-- Fourth Card -->
<div class="p-4 w-[532px] h-[300px]">
<div class="flex border-2 rounded-lg border-gray-200 border-opacity-50 p-8 sm:flex-row flex-col">
<div
class="w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-10 h-10" viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div class="flex-grow">
<h2 class="text-gray-900 text-lg title-font font-medium" style="color: #4a4a4a;">
Smoothen your customer</h2>
<h2 class="text-gray-900 text-lg title-font font-medium mb-2" style="color: #4a4a4a;">
journey</h2>
<p class="leading-relaxed text-base" style="color: #8e9baf;">👉
Make proactive contact with visitors.</p>
<p class="leading-relaxed text-base" style="color: #8e9baf;">👉
Turn visitors into paying customers
</p>
<p class="leading-relaxed text-base" style="color: #8e9baf;">👉
Qualify prospects automatically
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
I’ve tried variations of the code, the image moves up when hovering but the hover effect doesn’t work as expected, and the image opacity change is not taking effect. Can someone please help me identify what might be causing this issue and provide a solution to achieve the desired hover effect?
2
Answers
The effect does not work because your CSS selector is the wrong target, now the result is caused by div, but you are trying to control img:
The reason is caused by the class name with
opacity-40, you can add another class name as shown below :XDDDDof div:I think it will work 🙂
you can use the
mouseoverattribute in simple javascript like this:Let me know if you need any more help!