So, I was looking around for an interesting way to make my contact buttons in my footer pop when you want to select them and I stumbled across a CodePen that made images 10% larger when you hovered over them.

I thought it would be fun to add it but it didn't make the image pop out enough.

The contact image links were currently grey images, for example:

So I thought maybe when you hover over the image it would also swap to a white version of the image. I looked around the internet for some ideas on how to handle it and most suggestions leaned towards using two images. One grey and one white version. The white version of the image will be invisible until you hover. I wasn't a fan of that that solution so I wondered if there was an image pallete changer of some sort, which is when I stumbled across -webkit-filter and -webkit-transform.

So I added the following CSS to my contact links:

.contact-icons:hover { 
	filter: none;  
	-webkit-filter:brightness(0) invert(1); 
	-webkit-transform: scale(1.2); 

} 

Which turned my image into this(Hover over to see the difference!):

It's a little thing, but small iterative changes like this make building a website a lot of fun and keeps me invested in the process.