Using hover feature to make image full opacity and make text disappear

Hi there,

I am trying to emulate the members page of this website with the text overlay and images. So far I have this code which allows me to make the image full color when the mouse hovers over it, but I want to include text disappearing when I hover over it as well. 

Here is the example website I want my page to look like: https://www.bakerlab.org/index.php/members/

Here is the code I have so far

<style>

.image-block {
      -webkit-filter: opacity(50%); 
    filter: white(50%);
}

.image-block:hover {
      transition: filter .5s ease-in-out; 
    -webkit-filter: opacity(100%);
    filter:opacity(100%);
}

#caption:hover {
      display: none;
}
</style>

Thank you!

@tuanphan

Can you share link to members page?

5 minutes ago, tuanphan said:

Can you share link to members page?

https://hen-goldfish-a2cr.squarespace.com/members

Text only appears when hovering? or you want?

I want the text to appear when not hovering, and then disappear when someone hovers to expose just the picture. Just like this link: https://www.bakerlab.org/index.php/members/

I would like the text to become transparent and the picture to be at 100% opacity when hovering. When not hovering I want 50% white layer and text. Thank you so much! 🙂

Add to Members Page settings > Advanced > header

<style>
  .image-block:hover .image-card-wrapper {
    opacity: 0;
    transition: all ease-in-out 0.5s;
}
</style>

@MougousLab were you able to figure it out the code? I am trying to do the same things but using gallery block on the index page.

thank you!

On 5/13/2022 at 1:49 AM, camilla.ciappina said:

@MougousLab were you able to figure it out the code? I am trying to do the same things but using gallery block on the index page.

 

thank you!

If you share link to page where you use gallery block, we can check easier

Do you have to use code to have text appear on a image when you move curser across?