Jump to content

Hover transition times in Avenue!

Recommended Posts

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



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 🙂

Link to comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply
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.

Link to comment


This topic is now archived and is closed to further replies.

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