CODEWITHSUNDEEP
javascriptcss
Mitchell van Zuylen
Mitchell van Zuylen

Reputation: 4135

Image overlay on mouse-over and mouse-height?

I want a overlay on an image, that goes up to the mouse height.

w3schools has a nice demo of an image overlay here, that goes a long way to what I want.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidebottom

Here the overlay height is defined as

.container:hover .overlay {
  height: 100%;
}

Is there a way to do define the height so that it goes up to the height of the image, assuming the mouse is over the image?

Upvotes: 0

Views: 190

Answers (1)

Stakvino
Stakvino

Reputation: 682

you can get this behavior using jQuery

$("div.container").mousemove(function(e){
  var avatarImg = $("#avatar");
  var avatarPosition = avatarImg.offset();
  var mousePositionX = e.pageX - avatarPosition.left;
  var mousePositionY = e.pageY - avatarPosition.top;
  var overlayNewHeight = avatarImg.height() - mousePositionY;
  $("div.overlay").height(overlayNewHeight);
});


$("div.container").mouseleave(function(){
  $("div.overlay").height(0);
});
.container {
  position: relative;
  width: 50%;
  margin-left: 100px;
  margin-top: 100px;
  border: black solid 1px;
}

#avatar {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<body>

<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="https://i.imgur.com/I80W1Q0.png" alt="Avatar" class="image" id="avatar">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
</body>

Upvotes: 1

Related Questions