'Text hover image in React

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([email protected]) 1x, url([email protected]) 2x) 7 7,pointer;
}

.hasCursorORANGE {
    cursor: -webkit-image-set(url([email protected]) 1x, url([email protected]) 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; //

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Text hover image in React

Sources

Related Questions