Show text block from button trigger?

https://aia-24.squarespace.com/art-1-1
PW: notyet

You can see the first image block has a (+) button example, and the following white text blocks are all on top of images of the same size. What I'm hoping to achieve is all image blocks are visible and the text blocks overlaying them are hidden until the (+) button is hovered on, then that images text block appears. it should be the forward most block so that it is on top of the pinned block in the center, and the link in the text box should be clickable. The text block should disappear again when mousing off the image boundary.

I have looked everywhere I can think of to find a plugin that I might be able to adapt to make this work, but no luck.

I'm guessing this would be a code block on top of each image, with the button and caption content inside the code block? I would also like to be able to specify each time if the (+) button is on the bottom left or bottom right. Super extra points if the text box "grows" out of the button as focal point to fill the block parameters!

Can anyone help me code this? 

I don't see (+) button. Can you take a screenshot?

On 4/20/2024 at 5:37 AM, tuanphan said:

I don't see (+) button. Can you take a screenshot?

absolutely, the example (+) is shown here:

(1)

Initial: Hide all white text box (eg: Anti•Venom at LMCC, 2020 Collection,..)

Hover image with plus: Show all text box

OR

(2)

Initial: Hide all white text box

Hover image with plus: only displays 1 text box corresponding to the plus image?

If (2), you can use this code to Website > Website Tools > Code Injection > Footer. This code will hide Anti Venom at LMCC text box, and make it appears when hover image with plus.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $('div#block-2152ecce8d89d712a2a1').hover(function(){
   $(".fe-block-a2839a16dafe47fe9870").addClass("show");
  }, function(){
   $(".fe-block-a2839a16dafe47fe9870").removeClass("show");
  })
  });
</script>
<style>
.fe-block-a2839a16dafe47fe9870 {
    display: none;
}
  .show {
      display: block !important;
  }
  .show {
      z-index: 999999 !important;
  }
</style>

thank you @tuanphan I may be able to adapt that code to fit what I'm looking to do, but if you check the page you can see the hover freaks out when I put the button and the text block together (which is what I was trying to describe). I changed the code you gave to use the (+) block as the on hover trigger, and moved the text block up to over that image. 

I'm going to be using to on many images with different text blocks, so I think a code block solution would make more sense instead of calling out a dozen different block IDs in the footer injection?

Could your code be adapted to work in a code block that I can set the size of by dragging the corners to match the image its overlaying, and the code block would show the (+) and then the text overlay on hover? Then I could use this code block over and over on each image with new text each time?

@tuanphan do you think this is possible?

Try this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('div#block-a2839a16dafe47fe9870').appendTo('.fe-block-2152ecce8d89d712a2a1');
});
</script>
<style>
  .fe-block-2152ecce8d89d712a2a1 .html-block {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    z-index: 99999999999;
}

.fe-block-2152ecce8d89d712a2a1 {
    position: relative;
}

.fe-block-2152ecce8d89d712a2a1:hover .html-block {
    opacity: 1;
}
</style>

@tuanphan I'm confused. is this meant to be the code block solution now instead of the footer injection? What I was trying to describe in my latest comment is an adaptable and repeatable code block that contains the (+) button image, the overlay text, and the code trigger that makes it appear once the (+) is hovered, filling the space of the code block. I will use this to overlay different info on each image block on this page and other similar pages. Please let me know if I'm being unclear!

@tuanphan any thoughts?