Improving Your Website with Hover Effects

Hover effects are a great way to present secondary information in an expressive and visually appealing way. One of the problems with these sorts of effects is finding inspiration for them so that you are not doing the same old on-mouse-over effects over and over again. I have made a repo compiling all of the hover effects in Tympanus’s demo into a single Github repo using SCSS. It include 30+ effects that are inspirational and ready for production usage.

Tympanus released a variety of inspirational hover effects for developers and designers to use in their website. The effects range from subtle, to not so subtle, but the majority of the hover effects are very appealing to the eye.

They originally only released the CSS and HTML to get these hover effects to work, but I took those effects and translated them into extensible SCSS.

Here is one that shifts up and fades in secondary text when you hover over it:

Holy Sadie Hover Effect

 

And the following hover effect will reveal text as the box shift down:

Strange Dexter Hover Effect

 

The best part about these being in SCSS, is that you can override the variables that control color, speed, delay, and more!

Once included in your project, usage is simple as well. The following code snippet is all you need to use the Holy Sadie effect demonstrated above:

<div class="hover-effect">
  <figure class="effect-sadie">
    <img src="img/coffee.jpg" alt="coffee cup"/>
    <figcaption>
      <div>
        <h2>Holy <span>Sadie</span></h2>
        <p>Sadie never took her eyes off me. She had a dark soul.</p>
      </div>
      <a href="#">View more</a>
    </figcaption>
  </figure>
</div>

 

My SCSS version of the hover effects are available on Github.

You can see a full preview of the SCSS implementation here.