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

Remove Hover Effect on Flatiron Index


HarrisonJohnson

Question

Hello, I've been searching for some answers all day and come close but nothing has worked so far. I'd like to entirely remove the hover effect that happens when I mouse over the thumbnail images on the Home page of my site which is set up as an Index in the Flatiron template. The url to my site is harrisonjohnson.work. Any help is much appreciated! 

Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hey there, I had the same question and after some digging I found this custom CSS to remove the text that appears when you hover: #grid .item a div.wrapper div.project-title h2 {   visibility:

Add to Home > Design > Custom CSS #grid .item.hovering .wrapper { opacity: 0 !important; }  

change the  opacity  0 to another number, you can try 2 or 3,  until you get the effect you want. 

8 answers to this question

Recommended Posts

  • 0

Hey there, I had the same question and after some digging I found this custom CSS to remove the text that appears when you hover:

#grid .item a div.wrapper div.project-title h2 {
  visibility: hidden;
  font-size: 0;
}

#grid .item a div.wrapper div.project-title h3 {
  visibility: hidden;
  font-size: 0;
}

I cannot for the life of me figure out how to remove the darkened overlay hover effect. I'm trying to make mine go lighter instead of darker, as seen on this site, featured on the Squarespace Flatiron template page.

But all I can manage is adding the light effect on top of the dark effect, which looks pretty awful. If anybody has ideas on how to cancel out the first hover effect, I'd be much obliged!

 

Link to post
  • 0
17 hours ago, jmorr4 said:

Hey there, I had the same question and after some digging I found this custom CSS to remove the text that appears when you hover:

#grid .item a div.wrapper div.project-title h2 {
  visibility: hidden;
  font-size: 0;
}

#grid .item a div.wrapper div.project-title h3 {
  visibility: hidden;
  font-size: 0;
}

I cannot for the life of me figure out how to remove the darkened overlay hover effect. I'm trying to make mine go lighter instead of darker, as seen on this site, featured on the Squarespace Flatiron template page.

But all I can manage is adding the light effect on top of the dark effect, which looks pretty awful. If anybody has ideas on how to cancel out the first hover effect, I'd be much obliged!

 

Can you share link to your site?

Link to post
  • 0
23 hours ago, jmorr4 said:

@tuanphan no, still haven't figured it out...any suggestions would be much appreciated!

Add to Home > Design > Custom CSS

#grid .item.hovering .wrapper {
    opacity: 0 !important; 
}

 

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...