Скачать с ютуб How to create site title hover effects in Squarespace / Site Logo Hover Effects Squarespace Tutorial в хорошем качестве

How to create site title hover effects in Squarespace / Site Logo Hover Effects Squarespace Tutorial

Make the title or logo on your Squarespace website even more awesome with hover effects! In this tutorial, you’ll learn how to create a logo that grows, how to add a highlight to site title text, how to change the color of the title on a hover, and we’ll play around with some fun filters that will create a grayscale to full color image and add a shadow too. - - If this is your first time using CSS for Squarespace awesome! 🎉 I have a lot more to teach you - check out my free class on basic CSS for Squarespace here: insidethesquare.co/learn - - 01:30 Logo / Title That Grows: .header-title { transform: scale(.8); transition: 1s transform } .header-title:hover { transform: scale(1) } - - 02:39 Logo / Title Shadow: .header-title:hover { filter: drop-shadow(0 5px 10px #aaa) } - - 03:17 Grey to Color Logo Change - Without opacity change: .header-title { filter: grayscale(1); transition: 1s all } .header-title:hover { filter: grayscale(0); transition: 1s all } - - 03:44 Grey to Color Logo Change - With opacity change: .header-title { filter: grayscale(1); opacity: .5; transition: 1s all } - - 04:14 Inverted Logo Colors: .header-title:hover a{ filter:invert(1); transition: 1s all } - - 05:14 Change Title Color .header-title:hover a { color:Red!important; transition: 1s all } - - 06:05 Logo / Title Highlight: .header-title:hover { background: yellow } - - 💌 Join my Squarespace email list: https://insidethesquare.co/email ❤️ Like this tutorial? Buy me a coffee to say thanks: https://buymeacoffee.com/insidethesquare ⭐️ Free Class on CSS for Squarespace: https://insidethesquare.co/learn 🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options. 📑 Get access to my collection of CSS codes for Squarespace: ttps://insidethesquare.co/css 🎨 Creating colors with code: 🔡 Free guide to font and text properties: https://insidethesquare.co/textguide - - The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥