Hover Effect with Title over Image Block

Hello,

I would like to add a hover effect on the image block to display the project title. Basically the same thing that works well on the Portfolio page. I haven't found in the forum if anyone has figured out a solution using custom code?

I am attaching a place on the homepage where I would like to have this hover effect inserted. Also, I'm attaching the same effect that works well on the Portfolio page. I would basically like to achieve the same thing on the homepage. 

https://dreisicht.squarespace.com/
pw: SF2024

Thank you very much for your help!
Natasa

11 minutes ago, hello_studiofrey said:

Hello,

I would like to add a hover effect on the image block to display the project title. Basically the same thing that works well on the Portfolio page. I haven't found in the forum if anyone has figured out a solution using custom code?

I am attaching a place on the homepage where I would like to have this hover effect inserted. Also, I'm attaching the same effect that works well on the Portfolio page. I would basically like to achieve the same thing on the homepage. 

https://dreisicht.squarespace.com/
pw: SF2024

Thank you very much for your help!
Natasa

You can try adding to Home > Design > Custom Css

section[data-section-id="661e9aa92a1d6413ca9b2fdb"] .sqs-block.image-block.sqs-block-image .sqs-block-image-link:after {
  content: '';
  display: block;
  background: rgb(218,213,206);
  opacity: 0;
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

section[data-section-id="661e9aa92a1d6413ca9b2fdb"] .sqs-block.image-block.sqs-block-image .sqs-block-image-link:hover:after {
  opacity: 0.6;
  transition: opacity 0.5s;
}

Here is my testing

Let me know how it works on your site

@Beyondspace

Thank you very much for the code and your help! I appreciate it.

The overlay works well and I was able to insert the title, however, as those are two projects, I would need different titles for each. Also, I'm not sure how to adjust the code to display the text in the middle and in a different font? Could you please help me out with that?

Thank you very much!

@hello_studiofrey To make text align center, you can add CSS code like this (and don't remove your current code)

section[data-section-id="661e9aa92a1d6413ca9b2fdb"] .sqs-block.image-block.sqs-block-image .sqs-block-image-link:after {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
}

To change text, I see you used a code like this, just change text in the code

Thank you @tuanphan for your help!
 

The text is now centered, which is perfect, but if I change the text in the "content" it will change for both images, however they are two different projects with two headings. It would be ideal if the headings were not set via the code, as our client would be able to swap the projects on the homepage at will and not have to edit the code each time. However, if this is not possible, then of course at least via code should be an option. Thank you! 

On 5/3/2024 at 3:03 PM, hello_studiofrey said:

Thank you @tuanphan for your help!
 

The text is now centered, which is perfect, but if I change the text in the "content" it will change for both images, however they are two different projects with two headings. It would be ideal if the headings were not set via the code, as our client would be able to swap the projects on the homepage at will and not have to edit the code each time. However, if this is not possible, then of course at least via code should be an option. Thank you! 

If you don't want to use code to add text, and you don't use ALT, you can add text via ALT, then I will give code to turn ALT to text. What do you think?

@tuanphan there are texts in ALT, could you please share code to turn ALT to text? thank you so much!

@tuanphan any feedback on a mentioned code? thank you

On 5/6/2024 at 6:50 PM, hello_studiofrey said:

@tuanphan there are texts in ALT, could you please share code to turn ALT to text? thank you so much!

Use this to Last Line in Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(function(){

   $('.fe-661e9aa92a1d6413ca9b2fda .image-block img').each(function(){
       $el = $(this);
       var style = $el.attr('style');
       $el.attr('style','');
       $el.parent().attr('style',style);
    }); //Moves the inline styles

  $(".fe-661e9aa92a1d6413ca9b2fda img").each(function(){
            var title = this.alt;
          $('<div class="t-caption">'+ title +'</div>').insertAfter($(this).parent());
        });
 }); 
</script>
<style>
  .t-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    z-index: 99999;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dad5ce;
    opacity: 0;
    pointer-events: none;
}

div.image-block:hover .t-caption {
    opacity: 0.8;
}
</style>

Thank you very much @tuanphan the code works well but it has one issue, the code will stretch my left photo wide. Please see the screenshots below of the picture without the code and after inserting the code. How can I fix this? Thanks! 

On 5/27/2024 at 2:12 PM, hello_studiofrey said:

Thank you very much @tuanphan the code works well but it has one issue, the code will stretch my left photo wide. Please see the screenshots below of the picture without the code and after inserting the code. How can I fix this? Thanks! 

Use this code under code I sent

<style>
  section[data-section-id="661e9aa92a1d6413ca9b2fdb"] .image-block.sqs-block-image .design-layout-fluid .fluid-image-container .content-fill img {
    height: auto !important;
}
</style>

Thank you for the code @tuanphan, now the picture is not centred but it only shows the top of the image. Please see the screenshot attached. For now I "fixed" it by cropping the image into square format but it would be great if there's some adjustment in the code possible so that it always takes the middle part of the image. I know you can adjust this normally in the edit mode but I tried it and it doesn't work. 

On 5/30/2024 at 7:32 PM, hello_studiofrey said:

Thank you for the code @tuanphan, now the picture is not centred but it only shows the top of the image. Please see the screenshot attached. For now I "fixed" it by cropping the image into square format but it would be great if there's some adjustment in the code possible so that it always takes the middle part of the image. I know you can adjust this normally in the edit mode but I tried it and it doesn't work. 

You can create a test page with original image, I can check code again easier.

@tuanphan here is a test page with original image: https://dreisicht.squarespace.com/home-2  (pw: SF2024) thank you!

On 6/10/2024 at 3:09 PM, hello_studiofrey said:

@tuanphan here is a test page with original image: https://dreisicht.squarespace.com/home-2  (pw: SF2024) thank you!

I still can't find a way to fix this. I will try test and let you know when you found a solution

@tuanphan any luck in finding the solution?