CODEWITHSUNDEEP
javascripthtmlcsspreloader
mmalak
mmalak

Reputation: 127

Onmouse hover effect with text description

I am setting up my first website, and I want to add one functionality. I mean onmouse effect, when mouse is over an image - it's displaying details of image, but not as a hover effect on the image, but a new block next to the mouse.

This website is develop using Django as a backend part, and bootstrap with javascript on frontend part. I was already looking for any solution, but I couldn't find anything useful.

I am especially looking for some hints, or some examples which might lead me into expected results.

Upvotes: 4

Views: 285

Answers (1)

António Almeida
António Almeida

Reputation: 10117

You can use CSS Animations, and + css selector to match a sibling <p>.
Here is an example:

function imgHover(obj, event) {
  let span = obj.querySelector('span');
  span.style.left = event.offsetX + 'px';
  span.style.top = event.offsetY + 'px';
}
.img-desc {
  position: relative;
  display: inline-block;
}

.img-desc span {
  opacity: 0;
  margin: 0 10px;
  transition: opacity 0.4s;
  position: absolute;
  pointer-events:none;
  white-space: nowrap;
  
  background-color: #000;
  border-radius: 3px;
  padding: 2px 4px;
  color: #FFF;
  font-family: sans-serif;
  font-size: 12px;
}

.img-desc:hover > span {
  opacity: 1;
}
<div class="img-desc" onmousemove="imgHover(this, event)">
  <img width="240" src="https://picsum.photos/id/237/536/354" />
  <span>Image description</span>
</div>

Upvotes: 1

Related Questions