A quick guide to a fun border effect in CSS.
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.
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.
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:
