What is the best way to apply a hover effect to one element and have another element inherit that same

I am exploring how to implement hover-shadow effects on images within my cards. Although it is working fine, I am struggling with making the hover effect stay when I move my mouse to the title. It seems a bit off without this behavior.

Moreover, I wonder if there is a more "intelligent" way to achieve this effect in my code. Currently, it feels quite complex with all the positions and transformations involved.

.top-galleria-shadow {
    height: 100%;
    background: black;
    opacity: 0.6;
}

.top-galleria-shadow:hover {
    opacity: 0;
    transition: 0.6s;
}

.galleria-section, .most-popular-products-section {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.galleria-section > div {
    width: 285px;
    height: 285px;
}

.galleria-section > div:first-child {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:nth-child(2) {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:nth-child(3) {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:last-child {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section p {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
    z-index: 2;
    bottom: 60px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
<div class="top-galleria">
        <h3 class="block-title-h3">Lorem</h3>
        <p>Lorem</p>
        <div class="galleria-section">
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title1</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title2</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title3</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title4</p>
            </div>
        </div>

htmlcsscss-selectors

Answer №1

For this scenario, consider utilizing a sibling selector like

.top-galleria-shadow + p {
  pointer-events: none;
}

where you can incorporate pointer-events: none; to prevent it from responding to the cursor but still allow hovers and clicks to pass through to the element behind it:

.top-galleria-shadow {
    height: 100%;
    background: black;
    opacity: 0.6;
}

.top-galleria-shadow:hover {
    opacity: 0;
    transition: 0.6s;
}
.top-galleria-shadow + p {
  pointer-events: none;
}

.galleria-section, .most-popular-products-section {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.galleria-section > div {
    width: 285px;
    height: 285px;
}

.galleria-section > div:first-child {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:nth-child(2) {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:nth-child(3) {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:last-child {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section p {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
    z-index: 2;
    bottom: 60px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
<div class="top-galleria">
        <h3 class="block-title-h3">Lorem</h3>
        <p>Lorem</p>
        <div class="galleria-section">
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title1</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title2</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title3</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title4</p>
            </div>
        </div>

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

How to use Vanilla JavaScript to toggle a click event on a list item (LI) that

I have a script that scans through a webpage and identifies a unique string, for example: multus –a –um. The page contains several <LI> elements with various text content, including instances of multus –a –um. I need a solution to locate an & ...

javascripthtmlcss

Is there a way to determine the orientation of an image in React-Native, whether it is horizontal or vertical

When working with react-native, I aim to utilize the 'contain' feature for vertical images and the 'stretch' feature for horizontal images. What would be the best way to determine the orientation of an image as either horizontal or vert ...

javascriptandroidioscssreact-native

Does the default input default to text format?

I have a somewhat peculiar question. I'm currently experimenting with Javascript for a plugin and came across an interesting scenario. Let's say I have an input element that is structured like this: <input type='cc' id='cc&apo ...

javascripthtml

Line breaking by syllables using CSS

When it comes to CSS properties, the word-break attribute is able to split words across lines at specific points (such as the first character extending beyond a certain length). Surprisingly, there seems to be no existing CSS method (even with limited supp ...

htmlcsstypographyhyphenation

A step-by-step guide to implementing Google Analytics Event tracking using PHP

Implementing Google Analytics Events in Javascript can be done using the following code: ga('send', 'event', 'test', 'test','value'); I am trying to incorporate this feature throughout my entire project. ...

javascriptphphtmlgoogle-analytics

What is the best way to send an email with a randomly generated HTML output using a <button>?

I am currently working on a feature where a random HTML output is sent to me via email whenever a user clicks on a button on the website page. The user receives a code when they click the button, and I want that code to be emailed to my address automatical ...

javascriptphphtmlemailrandom

Using variables with Tailwind arbitrary values is not supported

Why is it that in tailwind, bg-[#5ad0a1] works but assigning the hex value to a variable such as const color = '#5ad0a1';, and then using bg-[${color}] does not work? <span className={`inline-flex items-center rounded-md bg-[${color}] px-2 py- ...

cssreactjsmaterial-uitailwind-css

Exploring the distinctions between width/height measurements and the image attribute in styling

What is the benefit of using a style image attribute instead of individually coding width and height for each image? ...

htmlcssimageheightwidth

How to prevent click events and still enable scrolling within a DIV using CSS/JS

Basically, I am looking to enable scrolling within a DIV while also disabling click events. Any suggestions on how this can be achieved? Appreciate any help! ...

javascriptjquerycss

How to effectively combine css() and delay() in jQuery?

fid: https://jsfiddle.net/k13sazuz/ Is there a way to create a delay chain for CSS rules using jQuery? $('.two').css('background','blue').delay(11800).css('background','red'); ...

javascriptjqueryhtmlcss

Footer division misbehaving

My goal is to add a footer to my website that includes a text field, but for some reason I'm encountering an issue with two of my divs not cooperating. You can observe this problem in this JSFiddle. Here is the CSS code for the footer: .footer { b ...

htmlcss

"Uncovering an issue with locating the 'div' variable in a

I'm facing an issue with the following code snippet: <script> function loadData() { var items = [<?php echo $jsItemArray ?>]; for (i = 0; i < items.length; i++) { var itemId = "\"#item-" +items[i]+ "\""; ...

jqueryhtmlajax

Styling text of various sizes to appear together in a div container

I'm having trouble getting my text to align in a single line. I've tried using vertical-align: middle and vertical-align: bottom... Can someone please assist me? http://jsfiddle.net/2wDEw/ Here is a simple example of what I have: ...

htmlcss

Unable to properly shut the sliding-over modal

I have implemented a customized version of the codrops slide & push menu (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) to create an overlay on my webpage. However, I am facing difficulty in closing it using another link. Any assistance on ...

jqueryhtmlcss

When attempting to call a function after an unsuccessful AJAX load, the Jquery

Our catalog results page includes an external JavaScript file that utilizes AJAX - I have a jQuery function designed to change the color of a span when it detects specific text. You can view the code below: function ReInitStockColor(){ $(function() { ...

javascriptjqueryhtmlajax

The component is converting a controlled text input to become uncontrolled

There's an error warning popping up, saying "A component is changing a controlled input of type text to be uncontrolled." I'm more used to class components, so functional components are new to me. All I did was: First, I set an initial state for ...

javascripthtmlreactjs

Setting the height to 100% on the body and html tags can lead to scrolling problems

After implementing the CSS code below, I have encountered some unexpected behavior: body, html{height:100%; overflow-x:hidden} Despite vertical scrollbars appearing as intended when the page exceeds screen height, detecting the scroll event on the body e ...

javascriptcss

Issue with automatic sorting of prices for products on the shopping platform, along with difficulty in retrieving accurate product details

Part of a script that tracks prices: # Imported libraries import pandas as pd from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.keys import Keys from selenium.webdriver.support.ui import WebDriverWait ...

htmlpython-3.xselenium-webdriver

Refreshing the page when the hide/show button is clicked with jQuery

I have a situation where I am using jQuery to toggle the visibility of a div by clicking on show/hide buttons. However, I am facing an issue where the code does not work as intended. Every time I click the buttons, the div reverts back to its original stat ...

javascriptjqueryhtmlforms

Automatically generated webpage smoothly scrolling downward

Within my application, I have been developing dynamic pages with a CSS property of overflow-y:auto applied to the page container. Everything seems to be working fine, The issue arises when the page loads and the height exceeds that of the container. While ...

javascriptjqueryhtmlcss