Just diving into the world of React and attempting to create a cool image popup effect when you hover over text in my project. I could really use some guidance on how to make it function within React, as the logic seems a bit different from plain HTML. Any help or insights would be greatly appreciated! Here's the code snippet for reference:
Check out this video for an example using plain HTML
* {
margin: 0;
padding: 0;
box-sizing: border-box;
vertical-align: middle;
}
:root {
/* COLORS */
--background1: #5a5d59;
--background2: #323432;
--font_color: #cececd;
}
/* CUSTOM CURSOR */
.hasCursor {
cursor: -webkit-image-set(url(mailto),pointer;
}
.hasCursorORANGE {
cursor: -webkit-image-set(url(mailto),pointer;
}
/* BODY */
.main-body {
background: linear-gradient(to top left, var(--background1), var(--background2));
height: 100vh;
padding: 0 7rem;
padding-top: 45vh;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
/* COUNTER*/
counter-reset: section;
}
/* TEXT */
.text-tag > p {
position: relative;
z-index: 2;
font-size: 60px;
letter-spacing: 1px;
color: var(--font_color);
}
/* COUNTER*/
.text-tag > p::after {
position: relative;
top: -45px;
padding-left: 15px;
font-size: 18px;
counter-increment: section;
content: counter(section,decimal-leading-zero);
}
/* IMAGE POSITIONING */
.img-container {
position: relative;
z-index: 0;
top: -230px;
left: 15px;
opacity: 0;
visibility: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#CodingTrends nº2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-body hasCursor">
<div class="text-tag">
<p onmouseover="imageIn(getImage1)" onmouseout="imageOut(getImage1)" class="hasCursorORANGE">Ceramics</p>
<div class="img-container">
<img src="/img_1.png" alt="Ceramic Vase">
</div>
</div>
<div class="text-tag">
<p onmouseover="imageIn(getImage2)" onmouseout="imageOut(getImage2)" class="hasCursorORANGE">Oil Painting</p>
<div class="img-container">
<img src="/img_2.jpg" alt="Classic painting - The Girl with a Pearl Earing">
</div>
</div>
<div class="text-tag">
<p onmouseover="imageIn(getImage3)" onmouseout="imageOut(getImage3)" class="hasCursorORANGE">Sculpture</p>
<div class="img-container">
<img src="/img_3.png" alt="Classic Greek Sculpute of a bust">
</div>
</div>
</div>
<script>
var getImage1 = document.getElementsByClassName("img-container") [0];
var getImage2 = document.getElementsByClassName("img-container") [1];
var getImage3 = document.getElementsByClassName("img-container") [2];
function imageIn(img) {
img.style.opacity = "1";
img.style.visibility = "visible";
img.style.transition = "opacity .5s";
}
function imageOut(img) {
img.style.opacity = "0";
img.style.visibility = "hidden";
img.style.transition = "opacity .5s";
}
</script>
</body>
</html>This is the React Code but I really don't know if its the correct approach. Please try to see the video to understand the issue.
class Index extends React.Component {
state = {
img: "assets/test/img_1.png",
img2: "assets/test/img_2.jpg",
img3: "assets/test/img_3.png",
imageChange: "nothing"
}
getImage1 = document.getElementsByClassName("img-container") [0];
getImage2 = document.getElementsByClassName("img-container") [1];
getImage3 = document.getElementsByClassName("img-container") [2];
imageAppear(img) {
console.log(img.className);
img.style.opacity = "1";
img.style.visibility = "visible";
img.style.transition = "opacity .5s";
}
imageDissappear(img) {
img.style.opacity = "0";
img.style.visibility = "hidden";
img.style.transition = "opacity .5s";
}
render() {
var getImage1 = document.getElementsByClassName("img-container") [0];
var getImage2 = document.getElementsByClassName("img-container") [1];
var getImage3 = document.getElementsByClassName("img-container") [2];
return (
<>
<section className="pb-16 bg-blueGray-200 relative pt-32">
<div
className="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
style={{ transform: "translateZ(0)" }}
>
<svg
className="absolute bottom-0 overflow-hidden"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="text-blueGray-200 fill-current"
points="2560 0 2560 100 0 100"
></polygon>
</svg>
</div>
<div class="main-body hasCursor">
<div class="text-tag">
<p class="hasCursorORANGE"
onMouseEnter={() => {this.imageAppear(getImage1)}}
onMouseOut={() => {this.imageDissappear(getImage1)}} >Ceramics</p>
<div class="img-container" >
<img src={this.state.img} alt="Ceramic Vase"></img>
</div>
</div>
<div class="text-tag">
<p class="hasCursorORANGE" >Oil Painting</p>
<div class="img-container">
<img src={this.state.img2} alt="Classic Painting"></img>
</div>
</div>
<div class="text-tag">
<p class="hasCursorORANGE" >Sculpture</p>
<div class="img-container">
<img src={this.state.img3} alt="Sculpture"></img>
</div>
</div>
</div>
</section>
</>
)
}
}
export default Index; //