如何向这些轮播投资组合图片添加透明的悬停叠加层

Question

https://jsfiddle.net/dmaltron87/odpeLLv6/

Trying to make it so a simple overlay with text appears when I hover over the images, but I can't get anything to work with this code. I found this in a demo tutorial and edited for my site, but my javascript understanding/skills are still pretty basic. I'm not too picky about the end result, just want ideas.

tried something like this, and added a css overlay with opacity=0 then hover at .75. straightforward, but didn't work.

<div class="container">
  <img src=".." alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Answer 1

You'll need to capture the mouseenter() and mouseleave() events and add some dynamic content.

Here's an example:

 $(".carousel img").on("mouseenter", function() { //start hover let me = $(this); let position = me.position(); //create overlay let overlay = $('<div class="overlay"></div>'); //set position and size overlay.css({ left: position.left, top: position.top, height: me.height(), width: me.width() }); //append overlay me.after(overlay); }); //remove hover when the overlay is de-hovered $(".carousel").on("mouseleave", ".overlay", function() { //end hover $(this).remove(); }); 

 .overlay { background: url(http://via.placeholder.com/200x200/00AA00?text=Overlay) no-repeat center; opacity: 0.7; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="carousel"> <img src="http://lorempixel.com/200/200/sports/1/" /> <img src="http://lorempixel.com/200/200/sports/2/" /> <img src="http://lorempixel.com/200/200/sports/3/" /> </div>