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;
}