Is it possible to prevent the fade out of the image when hovering over the text after hovering over the div or image, causing the text to fade in?

Using React and CSS.

I have set up my application to display a faded image on hover, with text that fades in over it. However, I am facing an issue where touching the text with my cursor removes the fade effect. Does anyone have a solution for preventing this from happening?

https://i.sstatic.net/qIvxB.gif

This is how my JSX file looks:

import React, { useState } from 'react';

function ProjectSquare(props) {
    return (
        <a href={props.project.linkString} target="_blank" rel="noopener noreferrer" style={{textDecoration: "none"}}>
                <div className="project-box">
                    <span className="project-text">foo</span>
                    <img src={props.project.imgString} alt={props.project.imgString} />
                </div>
        </a>
    );
}

export default ProjectSquare;

This is how my CSS file looks:

.project-box {
    height: 500px;
    margin-bottom: 80px;
    border-radius: 25px;
    overflow: hidden;
}

.project-box img:hover {
    -webkit-filter: brightness(20%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.project-text {
    -webkit-filter: opacity(0);
    color: white;
    position: absolute;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.project-box:hover .project-text {
    -webkit-filter: opacity(1);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.project-box img {
    object-fit: cover;
    z-index: -1;
}

Answer №1

Approach 1: To enhance the design, make the anchor tag a block element and apply hover effects to .project-box instead of img.

a.project-box-anchor {
  /* Set display property to inline-block for anchor tag */
  display: inline-block;
}

.project-box {
    height: 500px;
    margin-bottom: 80px;
    border-radius: 25px;
    overflow: hidden;
}

/* Change hover effect from image to whole project box */
.project-box:hover img {
    -webkit-filter: brightness(20%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.project-text {
    -webkit-filter: opacity(0);
    color: white;
    position: absolute;
    z-index: 1;
}

.project-box:hover .project-text {
    -webkit-filter: opacity(1);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.project-box img {
    object-fit: cover;
    z-index: -1;
}
<a class="project-box-anchor" href="https://google.com" target="_blank" rel="noopener noreferrer">
  <div class="project-box">
    <span class="project-text">foo</span>
    <img style="height:100px;" src="http://placekitten.com/g/200/200" alt="alt_text" />
  </div>
</a>

Approach 2: A bit more unconventional method

.project-text {
  pointer-events: none;
}

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

Organizing Results into Divs Based on Column Value Using AngularJs

I've been racking my brain trying to figure out the best way to organize and display my results in separate divs, specifically using Bootstrap col-md-4's. This is for a chat messaging app that I'm in the process of developing. I have rooms a ...

Tips for implementing styled components alongside Material UI input components

I'm currently facing an issue with Material UI input and I'm looking to customize its design using styled components. However, I've encountered a problem with the following code: import React from "react"; import styled from " ...

HTML Plant with background removed

I have been attempting to create a tree structure similar to the image provided. However, I am encountering difficulty in getting the background stripes to align properly for a specific row. When resizing the browser window, the stripes do not remain fixed ...

Pair objects that possess a specific attribute

I have a HTML snippet that I want to modify by adding the CSS class HideEdit to hide specific columns. <th class="rgHeader" style="text-align: left;" scope="col" _events="[object Object]" control="[object Object]" UniqueName="Edit"> This particular ...

Can you tell me what is creating the space between the elements in this form?

For an example, take a look at this link: I am puzzled by the gap between the form-group and the button, as well as between the different form-groups. When using Bootstrap 4 with flexbox activated, all my elements (inputs and buttons) collapse without any ...

Executing a function on the window object in JavaScript

I have come across the following code and am seeking guidance on how to get the last line to function correctly. The API I am using currently employs _view appended as its namespacing convention, but I would prefer to switch to something like arc.view.$f ...

Issues with Alignment of Navbar Elements in Bootstrap 3

When I test my website locally, the elements are aligned correctly as expected. However, when I view it on my live webpage, the elements are all left-aligned. I've attempted a solution from this source, but the issue persists. What confuses me is why ...

Error encountered: The module '@material-ui/core/styles' does not export 'alpha'

I recently encountered an issue while attempting to utilize the material-ui/lab date picker. Even after updating my material-ui version by executing npm install @material-ui/core@latest, I was unable to resolve the error. While this update fixed other is ...

several ngGrids and ngGridEventScroll

There are 2 separate ng grids on a single page, each with infinite scrolling that loads server-side data on ngGridEventScroll. scope.$on('ngGridEventScroll', function(event) { ... }); Each grid is designed to make its own unique server-side cal ...

Creating a custom calculator using Javascript

As a beginner in Javascript, I am seeking assistance in creating a simple calculator that can add numbers as buttons are clicked and display the running total. For example: If I click the button "20," it should display the number 20. Then, if I click the ...

How to insert a span element within a link tag in Next.js/React.js

Looking to create a breadcrumb using microdata in a Next.js and React.js project. Initially, I tried the following: <li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem"> <Link href={'/index&a ...

the division does not span the entire width

I am faced with a dilemma involving two div elements structured as follows: <div id="left"><p>.....</p><br/> <p>.....</p> </div> <div id="right"><img ..../></div> Accompanied by CSS styling: #l ...

Can I position two div elements next to each other, with one div partially offscreen, without utilizing display none or setting its width to zero?

Is it possible to position one div outside of the screen width while setting two divs side by side? I am looking to insert DIV2 above DIV1 with animation without adjusting its width or display. The goal is for DIV2 to enter the screen from the side alread ...

Display a division upon choosing an option

I am working on a project that involves a selection menu in the form of a drop-down list. <select> <option id="one" value="something">Car</option> <option id="two" value="anything">Plane</option> </select> Also, I ...

Error: Unable to access the 'map' property of undefined in React while trying to read this.props.rsl['data']

The problem I am encountering is related to the map function, which displays data in the console log console.log("iiiiiiiiii",this.props.rsl['data']). However, when I attempt to use the map function {this.props.rsl['data'].map(row=>{ ...

Problem with Ajax causing full-page reload

I currently have a webpage that utilizes JqueryUI-Mobile (specifically listview) in conjunction with PHP and some Ajax code. When the page loads initially, it displays a list generated from a MySQL DB. I want this list to refresh itself periodically witho ...

Handling invalid JSON data using JavaScript

Looking to extract data from this URL using Javascript. Here is a sample of the JSON content: {"ss":[["Thu","7:00","Final",,"BAL","19","ATL","20",,,"56808",,"PRE4","2015"],["Thu","7:00","Final",,"NO","10","GB","38",,,"56809",,"PRE4","2015"]]} Most tutori ...

What could be causing the bootstrap columns to automatically shift onto separate lines?

Check out my code snippet: html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; } .row { width: 100%; height: 80%; margin: 0px; padding: 0px; } body { background: #EFEFEF; } .container-fluid { wid ...

Can a video or image be displayed in HTML using an absolute path from a disk named E: while the localhost files are located in C:?

I'm attempting to construct a basic webpage utilizing HTML and PHP to display various videos, each video within its own videoplayer. The issue arises when I try to find the videos (they are stored in a folder on my secondary hard drive labeled E:&bso ...

It appears that the size of the textlabel in the HTML is not responsive to

When working with my HTML code, I've encountered an issue where I am unable to modify the height and width of a label using CSS. However, I have found that I am able to adjust the top and left positioning. HTML: <div id="loginname"> <l ...