Today I wanted to share a blog article hover effect with you. This hover effect is for a list of articles you have in your blog articles directory. It is designed to be displayed in grid format. I found the original version of this effect on a pen by Ajay Sunarthi. But that involved some javascript and standard CSS that I didn’t want to deal with. I re-created the same effect with some SASS (SCSS) using some of my favorite mixins for browser compatibility.

The Mixins

Since I started getting serious about SASS (SCSS), I decided to craft a master mixins sheet. This sheet involved a lot of the most commonly used functions for browser compatibility and effects that I use in templates. Here are a few that you will need for this effect to work. These mixins are pretty self explanatory. You can learn more about mixins on the SASS official site.

The Variables

For the sake of consistency and to make it easier for you, always setup some variables. In SASS, variables are easy to use and you can call them anytime you need. But one mistake many make with variables is the labeling. Make sure your labels are consistent and something you and your team can easily refer to. If you’re a theme developer, make sure it’s something generic. Ex: $primaryColor,$secondaryColor, $primaryFont, $headerFont, etc. Here are a few we will be using today:

The Main Style

Now we bring all those mixins and variables into our main stylesheet. Here we start off with the post class and this will be our main container. The beauty of putting it in a single class is that we can easily use it in any grid system; be it Bootstrap, Foundation, 960gs or even your own. The following code is crafted in such a way that it takes some of the formatting from your default template style. If a heading size, paragraph size, etc. doesn’t work for you, then adjust the code accordingly.

The HTML

The stylesheet/SASS code is just sitting and doing nothing if you don’t use it with your HTML. Here is the simple HTML that accompanies your code. As stated above, you can use it with your favorite grid system. Just make sure the SASS does not compete with other styles you have.

As stated before, all the code is wrapped up in one class, thereby making it easier for you to reuse or call anywhere in your site. SASS compiler makes it so that all other styling defined makes it based on that one proceeding class.

Final Words

This is a simple style that you can use in any of your projects. You can use it for your portfolio style or blog as we did. I will be including this style in a open-source template we hope to release very soon. You can see this effect in action by clicking the button below. See you at the next tutorial.

Miso template includes this blog style. Download it free at Github.

A creative thinker & UX designer striving to bring forth deserving tools to the lime light. Co-founder of @BeeBackApp.