Jquery

Hi,

I'm not so sure what you want to do..

I'm using this script when I have 1 image
Demo
https://miketricking.github.io/bootstrap-image-hover/
Download
https://github.com/miketricking/bootstrap-image-hover

I'm using magnific-popup when have 2 images
Demo
https://dimsemenov.com/plugins/magnific-popup/
Download
https://github.com/dimsemenov/Magnific-Popup

Hello,
to explain a little more on what I was asked to created a pop menu with clickable links. Ex.user hovers over square email with words "Benefits" another image would pop up with a list of benefits: FMLA, Sick time, Voting, etc and user at that time can click on FMLA, or Voting....
But the second image box would not show until Benefits box is hovered over.

Basically, we have 5 categories and each category would have 6-10 choices, the second box would serve as a preview of each items in the main category. Does that help to understand what we are trying accomplish?

Hi,

I would use popover for this

Using Bootstrap popover allow to add html content not only text.
How popover is triggered : click | hover | focus | manual
Documentation
https://getbootstrap.com/docs/4.0/components/popovers/#options 

Here is a way to display HTML content from content_wrapper div into the popover

$('#mypopover').popover({
  html : true,
        container: 'body',
        content:function(){
         return $('#content_wrapper').html();
        }
});

Select allOpen in new window

This what it used for shopping cart and I think it may work with your project.

Here is a tutorial on how to do it
https://www.webslesson.info/2018/04/shopping-cart-by-using-bootstrap-popover-with-ajax-php.html