Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
MougousLab

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

Question

Posted (edited)

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!

Edited by MougousLab

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

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! 🙂

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...