Hover transition times in Avenue!

Site URL: http://www.brndnyn.com

Hello-

So I've been trying to change the transition time for my index titles that go over the images. I'm currently using Avenue as my template. 

As it is now, the hover makes the opaque color and text appear a little too quick- I'd like to change that to a slower fade in. However, none of the other code I could find for hover transitions worked for this template. I can't seem to find the tag that effects the title. 

I'm also trying to get my main title and navigation links to ease out when the mouse is no longer hovering, if that's possible.  

Would love any help! 

Thanks 🙂

I am an Avenue user also and I have wondered about this to, how to change the hover effect timer also. I will work on it for both of us how about that?

my random views derrick Lee parker

I think I found something already. 

/*creates opaque rollover effect for regular image blocks*/
.image-block:hover {
background-color: #00000; opacity: 0.6; transition: all .3s ease-in-out;}

Change the .3s to be slower or faster. Larger the number the slower it takes to make the transition. It will need to be modified for index page thumbnails. 

Quote

53 minutes ago, derricksrandomviews said:

I think I found something already. 

/*creates opaque rollover effect for regular image blocks*/
.image-block:hover {
background-color: #00000; opacity: 0.6; transition: all .3s ease-in-out;}

Change the .3s to be slower or faster. Larger the number the slower it takes to make the transition. It will need to be modified for index page thumbnails. 

Tried this- doesn't seem to work for me. 😞 

I believe I need to isolate what CSS title the project titles are under.

This helped me a lot! If anyone else is looking for answers. 

https://beaverhero.com/avenue-squarespace/

the code I used to make the titles fade in:

Quote

#projectThumbs .project:hover .project-title {
  transition: 0.5s
}