Blog Article Style
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.
// box-shadow
@mixin box-shadow($params) {
-webkit-box-shadow: $params;
-moz-box-shadow: $params;
box-shadow: $params;
}// transition
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}// opacity
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}// border-radius
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}// transform
@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
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:
$padding: 15px;
$primaryColor: #2a6496;
$dateSize: 50px;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.
.post {
display: block;
position: relative;
background: white;
height: 470px;
overflow: hidden;
margin: $padding 0;
@include box-shadow(0px 1px 2px 0px rgba(0, 0, 0, 0.15));
@include transition(all 0.3s ease); .post-img{
height: 400px;
overflow: hidden; img {
height: 400px;
min-width: 100%;
@include transition(all 0.5s ease);
} .date {
position: absolute;
top: $padding;
right: $padding;
z-index: 1;
background: $primaryColor;
width: $dateSize;
height: $dateSize;
color: white;
text-align: center;
padding: .45*$padding 0;
line-height: 1.2;
@include border-radius(100%);
@include transition(all 0.3s ease); .month {
font-weight: $fontBold;
}
}
} .post-content {
position: absolute;
bottom: 0;
background: white;
width: 100%;
padding: $padding; .category {
position: absolute;
top: -2.45*$padding;
left: 0;
background: $primaryColor;
padding: 0 $padding;
line-height: 2.5*$padding;
color: white;
text-transform: uppercase;
} .title {
margin-bottom: .75*$padding;
font-size: 1.75em;
text-shadow: none;
} .sub-title {
font-style: normal;
padding-bottom: $padding;
} .description {
height: 0;
overflow: hidden;
@include transition(all 0.3s ease);
} .post-meta {
display: block;
background: white; .timestamp {
display: inline-block;
margin-right: $padding;
} .comments a {
font-weight: $fontNormal;
}
}
} &:hover {
@include box-shadow(0px 1px 35px 0px rgba(0, 0, 0, 0.3));
@include transition(all 0.3s ease); .post-img {
.date {
background: white;
color: $primaryColor;
@include transition(all 0.3s ease);
} img {
@include transform(scale(1.1));
@include opacity(60);
@include transition(all 0.5s ease);
}
} .post-content {
.description {
height: 130px;
@include transition(all 0.3s ease);
} .title {
color: $primaryColor;
text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
}
}
}
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.
<div class="post">
<a href="blog-article.html" class="post-img">
<div class="date">
<div class="month">Aug</div>
<div class="day">15</div>
</div>
<img src="{..image..}" alt="" />
</a>
<div class="post-content">
<div class="category">Photos</div>
<a href="blog-article.html"><h2 class="title">Country of Colors</h2></a>
<h5 class="sub-title">An upcoming superpower</h5>
<p class="description">India is a vast South Asian country with diverse terrain – from Himalayan peaks to Indian Ocean coastline – and history reaching back 5 millennia.</p>
<div class="post-meta">
<span class="timestamp"><i class="fa fa-clock-o"></i> 6 mins ago</span>
<span class="comments"><i class="fa fa-comments-o"></i><a href="#"> 39 comments</a></span>
</div>
</div>
</div>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.
