JSFiddle - React, Tailwind, and code Playground

by Rafael_

HTML

<li id="hover-trigger">Hover en mĂ­</li>
<li>Pero yo no sirvo</li>


    <div class="wrapper" id="wrapper">
        <div class="text-box">
            <img src="img/show/dolor.jpg" alt="" id="show-img">
            <h2 id = "titulo-wrapper">Align image an text</h2>
            <p id="show-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
      Sunt perferendis porro tenetur nesciunt dicta tempora libero fugiat consectetur 
      nobis accusantium culpa velit ex exercitationem molestias, suscipit rem eligendi 
      doloribus! Ea!</p>    
        </div>
    </div>

CSS

@keyframes opacidad {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.transition {
animation: opacidad 2s;}

JavaScript

// Get a reference to the hover-trigger element and the wrapper element
const hoverTrigger = document.getElementById("hover-trigger");
const wrapper = document.getElementById("wrapper");

// Add a mouseover event listener to the hover-trigger element
hoverTrigger.addEventListener("mouseover", function () {
    // Add the "transition" class to the wrapper element when hovered
    wrapper.classList.add("transition");
});

// Add a mouseout event listener to remove the class when the mouse leaves the trigger element
hoverTrigger.addEventListener("mouseout", function () {
    // Remove the "transition" class from the wrapper element
    wrapper.classList.remove("transition");
});