JSFiddle - React, Tailwind, and code Playground

by Orik3ll0

HTML

<img id="image" src="http://www.indiaonrent.com/forwards/e/enjoy-a-ride-in-small-cars-so-cute/res/0gqbu1.jpg" />
<p id="text">
  Hello World!
</p>

CSS

#image {
  position: absolute;
  left: 0;
  top: 0;
}

#text {
  display: none;
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 180px;
}

JavaScript

var item = document.getElementById("image");
item.addEventListener("mouseover", func, false);
item.addEventListener("mouseout", func1, false);

function func() {
  document.getElementById("text").setAttribute("style", "display:block;")
}

function func1() {
  document.getElementById("text").setAttribute("style", "display:none;")
}