The hover effect and image opacity adjustment seem to be malfunctioning in my HTML/CSS code

Currently, I am in the midst of a web project and my goal is to implement a hover effect on the first card containing an image. The desired outcome is for the card to move upwards upon hovering, allowing the image to become fully visible with an opacity setting of 1. Despite numerous attempts, I have been unsuccessful in achieving this functionality. Below is the snippet of 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>
        .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"> 
            <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;">&#128073; Turn boring web forms
                                into friendly conversations</p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073; 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;">&#128073; Consistent 24/7
                                support across channels</p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073; Solve their problems
                                faster</p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073; 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">
                            </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;">&#128073; Generate more
                                qualified leads on autopilot</p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073;
                                Make proactive contact with visitors</p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073;
                                Boost your conversions
                            </p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073;
                                Turn your traffic into paying customers
                            </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">
                                <circle cx="12" cy="7" r="4">
                            </svg>
                        </div>
                        <div class="flex-grow">
                            <h2 class="text-gray-900 text-lg title-font font-medium" style="color: #4a4a4a;">
                                Smoothen your customer journey</h2>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073;
                                Make proactive contact with visitors</p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073;
                                Turn visitors into paying customers
                            </p>
                            <p class="leading-relaxed text-base" style="color: #8e9baf;">&#128073;
                                Qualify prospects automatically
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </section>
</body>

</html>

Despite my efforts in tweaking the code, the hover effect does not function as intended. Specifically, while the image moves upwards during hovering, the opacity property fails to change effectively. If anyone could assist me in identifying the root cause of this issue and proposing a solution to achieve the desired hover effect, it would be greatly appreciated.

javascripthtmlcsshovertailwind-css

Answer №1

The issue arises from the incorrect target in your CSS selector. Currently, the effect is being applied to div, but you are attempting to manipulate img:

// original code
.your-card:hover img 
   {
     transform: translate(0, -30px);
     transition: transform ease 0.5s;
     opacity: 1;
   }

This discrepancy is due to the presence of the class name with opacity-40. You can resolve it by adding another class name as shown below:

  1. Add a class name with opacity-40, for example: XDDDD
            vvvvv ADD HERE
<div class="XDDDD 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>
  1. Adjust your original CSS to target the class name XDDDD within the div:
.your-card:hover XDDDD 
   {
     transform: translate(0, -30px);
     transition: transform ease 0.5s;
     opacity: 1 !important;
   }

These changes should rectify the issue :)

Answer №2

If you want to create a hover effect using simple JavaScript, you can utilize the mouseover attribute as shown below:

<script>
document.getElementsByClassName('your-card').addEventListener("mouseover", (event) => {
     // Implementing hover effect for ".your-card"
     document.getElementsByClassName('your-card').style.transform = "translateY(-10px)";
     
     // Adjusting image opacity
     document.querySelector('img').style.transform = "translate(0, -30px)";
     document.querySelector('img').style.transition = "transform ease 0.5s";
     document.querySelector('img').style.opacity = "1";
});
</script>

Feel free to ask if you require further assistance!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to remove options in a Multiple Choice scenario by selecting the X icon beside each one

I'm working on a multiple choice quiz and I'd like to add a button or icon resembling X in front of each option (even in front of the radio button), so that when I click on it, only that specific option is deleted. How can I achieve this? For in ...

javascripthtmlcssbutton

Having trouble importing a module in my Node.js/Express application

I've encountered an issue while trying to import files into my node js server file. My usual method is correct in terms of paths, so I'm puzzled about what the error might be. import express from 'express' import mongoose from 'mon ...

javascriptnode.jsmongodbexpress

Guide to making a slider menu using html, css, and javascript

Just dipping my toes into the world of web development. I'm intrigued by the idea of creating a "slider menu" where users can view and select options by clicking on next or previous buttons (see example image below). While I've got some basic HTM ...

javascripthtmlcss

Using AJAX with the GET method, send a form submission to retrieve a response using XMLHTTPRequest

I am working on a form where users can select values from two dropdown menus. The options in the dropdowns are populated dynamically from a JavaScript file, which contains a list of exchange rates. I have written the code to calculate and display the resul ...

javascriptphpajax

Proper method for posting an object array through a form submission

I am currently integrating a payment service API into my application and following the instructions provided on their website. The documentation specifies that the POST body should have the following structure: api_hash=38be425a-63d0-4c46-8733-3e9ff662d62 ...

htmlajaxasp.net-mvchttppost

Eliminating redundant values from a JSON object that is nested within another

Currently, I am working on rendering a list of Labels from a local JSON file. However, I am facing the issue of duplicates and I want each label to appear only once. I attempted to use Array.filter() and other methods to achieve this line: "Categories": ob ...

javascriptjqueryarraysjsonduplicates

Guide on NodeJS: Harnessing the power of nested functions to ensure synchronous execution

Imagine two functions, A and B, both interacting with a MySQL database using connection.query(...) methods. Function A utilizes a while loop to navigate through the response it receives. Subsequently, function B is invoked with the response from function ...

javascriptnode.jsexpressasync-await

Are you struggling with the issue of Function components not being able to be given refs? When you try to access the ref, it just fails. Perhaps you should consider using React.forwardRef

I have implemented the "styled" feature from Material UI to add styles to my components. Right now, I am in the process of cleaning up code to remove console errors. Initially, I encountered this warning message: "Warning: React does not recognize the con ...

javascriptcssreactjsmaterial-uistyled-components

Using Express middleware in a TypeScript Express application

I'm currently converting the backend of an ExpressJS application to Typescript. While working on the auth.routes.ts file, I encountered an issue with the middleware (authMiddleware). It seems like there might be a typing error, as the same code in the ...

javascripttypescriptexpressmiddleware

Determining the repetition and placement of background images when employing multiple backgrounds

Is it possible to apply two background images to the same div? I want one image to repeat along the x-axis and the other to appear only once. I've tried using multiple background images, but I'm not sure how to target specific rules for each bac ...

cssbackgroundbackground-image

Ways to make <li> elements display inline with React Bootstrap Rows and Columns

I have some content that I need to format and display in a horizontal list. When I only use HTML elements in the list, it appears horizontally as expected. However, when I incorporate React Bootstrap grid layout components like Row and Column, the list dis ...

htmlreactjsbootstrap-4react-bootstrap

Running multiple instances of setTimeout() in JQuery

I'm looking for a way to delay the execution of 10 lines of independent jQuery code with 2 seconds between each line. I initially tried using setTimeout() on each line, but is there a more elegant solution for this scenario? The jQuery DELAY method do ...

javascriptjquerydelaysettimeout

What is the process for accessing the data attributes of div elements and then transferring them to a cookie?

Although this question may have been answered before, I couldn't find a specific solution. Imagine I have the following div elements... <div class="listings-area"> <div itemtype="http://schema.org/Product" itemscope=""> <a class="lis ...

javascriptjqueryhtmlcss

How can you verify the presence of an object containing specific data within an array using JavaScript?

Currently, I am working with the Vue programming language and have some demo code to showcase: <template> <button @click="checkInList">Check</button> </template> <script> import { ref } from "@vue/reactivity& ...

javascriptvue.jsvuejs3

Text in various styles is layered on top of an image, ensuring that text in one style does not overlap text in another style

Struggling with placing text over an image? Trying to achieve different text styles but ending up with overlapping lines? Here's a snippet of HTML that works with only one text style: <li style="" class="portfolio-content-CV"> <div class ...

htmlcss

Dynamically insert innerHTML content into table rows using JavaScript in PHP is a fantastic way to customize

Having trouble with innerHTML in this scenario, looking to achieve something along these lines: <table width="100%" border="0" id="table2"> <?php include("connection.php"); $sql=mysql_query("select* from b1"); while($res=mys ...

javascriptphphtmldominnerhtml

What is the process of dynamically loading CSS into an HTML document?

In my C# program, I am utilizing a web browser control and setting its HTML property programmatically by loading it from an HTML string variable. While this setup works almost perfectly, I have noticed that it loses the reference to the CSS file. I believe ...

c#javascriptcss

Increase the padding for each child element within its corresponding parent

Is it possible to add padding to child items within each "folder" element without using JavaScript if there is more than one? This scenario would be hardcoded as follows: folder folder inner { padding-left: 14px; } folder folder folder inner { pad ...

htmlcss

The process of obtaining and sending a token from an HTML page while submitting a form request to a Laravel 5 application involves a few key steps

My application consists of the client side being written in HTML and Angularjs, while the server-side is using Laravel 5. Every time I submit my form, I send the models using $http to a route in my Laravel 5 app, but I continuously encounter the error: pr ...

javascriptangularjslaravel-5csrf-protection

Creating a sleek and functional dashboard using HTML and leveraging the power of Bootstrap 4

I'm working on styling my HTML dashboard with Bootstrap 4. I want the text to be big and have minimal white space, but not too cluttered. <html> <head> <meta charset="utf-8"> <meta name="viewport" conte ...

htmlcsstwitter-bootstrapbootstrap-4