JSFiddle - React, Tailwind, and code Playground

by mswilson4040

HTML

<div id="people">
  <div class="person" onmouseenter="onMouseEnter(this)" onmouse>
    <img src="https://via.placeholder.com/150" />
    <div class="info">
      some information...
    </div>
  </div>
  <div class="person">
    <img src="https://via.placeholder.com/150" />
    <div class="info">
      some information...
    </div>
  </div>
  <div class="person">
    <img src="https://via.placeholder.com/150" />
    <div class="info">
      some information...
    </div>
  </div>
  <div class="person">
    <img src="https://via.placeholder.com/150" />
    <div class="info">
      some information...
    </div>
  </div>
  <div class="person">
    <img src="https://via.placeholder.com/150" />
    <div class="info">
      some information...
    </div>
  </div>
  <div class="person">
    <img src="https://via.placeholder.com/150" />
    <div class="info">
      some information...
    </div>
  </div>
</div>

CSS

#people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
#people .person .info {
  display: none;
}

JavaScript

function onMouseEnter (evt) {
	const info = evt.querySelector('.info');
  info.style.display = 'block';
}
function onMouseLeave (evt) {
	const info = evt.querySelector('.info');
  info.style.display = 'block';
}