Jump to content

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

Recommended Posts

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


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

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

#caption:hover {
      display: none;


Thank you!

Edited by MougousLab
Link to comment
  • 2 years later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.