Foundation 5 Related Posts

by Charles Butler

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/foundation.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/foundation.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic"></script>
<div class="related-posts-box clearfix">
    <div class="related-posts-image">
        <img class="related" src="http://surface.surgd.com/fiddle/related-posts-1.jpg" alt="OptimaHost" />
        <div class="related-posts-target"> <a href="#"><div class="circle-icon medium"><i class="fa fa-search"></i></div></a>

        </div>
    </div>
    <div class="related-meta">In <a href="#!">Hosting</a> 2 days ago <a href="#!"><i class="fa fa-comments"></i> 37</a>
    </div>
    
<h4>Semantic replacements for common uses</h4>

    <p>In enim justo rhoncus ut imperdiet a venenatis vitae justo.</p>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 600, 600italic);
 body {
    padding: 60px;
    font-family:"Open Sans", Arial, sans-serif;
}
/* Panels */
 .related-posts-box {
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-color: #efefef;
    border-bottom-color: #E8522F;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    background: #FFF;
    color: #333333;
}
.related-posts-box:before {
    content:"";
    position: absolute;
    left: 50%;
    margin-left: -40px;
    top: -2px;
    background: #E8522F;
    width: 80px;
    height: 4px;
}
.related-posts-box:after {
    content:"";
    position: absolute;
    right: 40px;
    bottom: -1px;
    background: #E8522F;
    width: 80px;
    height: 1px;
}
.related-posts-box p {
    font-size: 0.8rem;
}
img.related {
    margin: 0 auto;
    display: block;
    text-align: center;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    -moz-transform: scale(1.5, 1.5);
    -o-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
}
.related-posts-image {
    position: relative;
    text-align: center;
    overflow: hidden;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.related-posts-image .related-posts-target {
    position: absolute;
    left: 50%;
    margin-left: -20px;
    top: -40px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.related-posts-box:hover .related-posts-image .related-posts-target {
    top: 50%;
    margin-top: -20px;
}
.related-posts-box:hover .related-posts-image img.related {
    opacity: 0.7;
    transform:...

JavaScript

$(document).foundation();