Text hover image in React

Question

i'm new to React and i'm trying to make an image popup when you hoover over text in React.

Here I leave the code in plain html and css, hopping you could help me, to make it work in React. Since I don't understand how to get the handlers to change the css of the image or if there's a better way to solve it in React. Thanks

 * { 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(i-circle--white@2x.png) 1x, url(i-circle--white@2x.png) 2x) 7 7,pointer; }.hasCursorORANGE { cursor: -webkit-image-set(url(i-circle--orange@2x.png) 1x, url(i-circle--orange@2x.png) 2x) 7 7,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; //

Answer 1

The answer was to use Css hoover. Here's the answer to my example.

 .img-container { position: relative; visibility: hidden; opacity: 0; transition:opacity.5s; z-index: 0; top: -60px; left: 0px; }.text-tag { font-family: Nexa; font-weight:bolder; display: flex; z-index: 2; font-size: 1.8rem; line-height: 2rem; color: var(--font_color); }.text-tag:hover.img-container{ opacity: 1; visibility:visible; transition:opacity.8s;

Text hover image in React

Question

1 answers

solution1
0 ACCPTED 2022-03-03 02:08:42

Text hover image in React

Question

1 answers

solution1 0 ACCPTED 2022-03-03 02:08:42

solution1
0 ACCPTED 2022-03-03 02:08:42