Dressing Room Vanity Mirror Border Effect with CSS

A quick guide to a fun border effect in CSS.

Dressing room vanity mirror.

While creating my website I had the idea to surround all important content and links with a “dressing room mirror” border that changed color or “lit up” when the content was hovered over. Here’s how I did it.

The Desired Effect

We first need to create a border around some element, and then specify styling attributes of that border to achieve this effect. We will also need a “hover” selector to accomplish the color change which I also covered in this post.

The border attribute on className “content.”

Right now the <h1> tag has a className “content” which we have added a border to in the CSS file. The border attribute has several potential styles listed here. For our purposes, I will use the “dotted” style to achieve the circular shapes needed for this effect.

Not quite

To get the large globular light bulb look, we need to bump up the size of the border, and we do that by placing a font size before the style keyword like so:

Now we need to change the color of the border. I want its resting state to be a color that indicates the “bulbs” are off until the cursor hovers over them. For this I chose a light gray in order to achieve that effect without clashing with the rest of my page’s theme. I also would suggest adding some padding so the content within the border doesn’t look to cramped.

Using the “hover selector” we can create an effect that changes the color of the border when the cursor hovers over the content within.

Remember to use the hover selector on a separate line of code attached to the className you would like to alter. By changing the border color using the hover selector we achieve the effect of lights blinking on and off. But the transition is a little jarring. We can ease the color changing by adding the “transition” attribute to our first “content” code block (the one without the hover selector!), attaching it to our border attribute and establishing an appropriate speed for the transition like so:

Further Reading

--

--

--

Full stack developer and stand-up comic.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to query Google Cloud Firestore in parallel using Python

Apps For My Mac

Aziz Ansari Addressed Trump In His ‘SNL’ Opening Monologue

Multi Cloud Connectivity Using Google VPN and Mikrotik

Introducing Front Cache of ARCUS Spring

What happens when you type ls -l in the shell?

Why do I see a green screen when executing a model that contains

The Story of the IT-depression, birds and EJDB 2.0

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sam Hall

Sam Hall

Full stack developer and stand-up comic.

More from Medium

All About CSS Media Query.

“Connect Four” Game in Pure CSS (no JavaScript!)

CSS Reset theory — What, How and Why Not?

How does the browser interpret global CSS values?