How to Add Logo Hover Effect Squarespace

Logo Hover Effect Squarespace

Most of the people like to animate their website logo, so it give an eye catching look. Therefore, Today I will explain you how to add logo hove effect on Squarespace 7.1.

Logo Hover Effect Squarespace

Increase Logo Size over Mouse Hovering

Here is the CSS, if you add to your Squarespace CSS it will grow the size of logo over mouse hovering. To add Custom CSS in Squarespace Go to Website, then Website Tools and then click on custom CSS. Now copy the code given below and paste there.

.header-title { transform: scale(.8); transition: 1s transform } .header-title:hover { transform: scale(1) }

Adding Shadow to Logo in Squarespace

To add the shadow to logo use the code given below:-

.header-title:hover { filter: drop-shadow(0 5px 9px #aaa) }

Next Post Previous Post
No Comment
Add Comment
comment url