Galnova Card animation

Card animation with masonry

by Keith Jeter

HTML

<script src="//jsfiddle.net/galnova/8oojox8z/52/embed/js,html,css,result/dark"></script>
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<div class="container">
    <div class="row" id="items">
        
        <div class="col-xs-12 col-lg-6 item-select">

        <div class="a_card">
                <div class="circ"><img src="http://galnova.com/2015/img/a_dw.png" alt="Dreamweaver Logo" title="Dreamweaver Logo" /></div>
                <div class="a_card-image">
                    <img class="img-responsive" />
                    <h2>Adobe Dreamweaver</h2>
                </div>
								
                <div class="meda"></div>
								
                <div class="a_card-content">
                    <p>Lorem Ipsum lorem ipsum</p>
                </div>
                
                <div class="row a_card-action nill">
                 <a href="#" class="btn btn-primary col col-md-6 apt">Action</a>
                 <span class="col-xs-12 col-md-6"><i class="fa fa-heart im"></i>This is your world</span>
                </div>
            </div>
        </div>


        <div class="col-xs-12 col-lg-6 item-select">
            <div class="a_card">
                <div class="circ"><img src="http://galnova.com/2015/img/a_ps.png" alt="Photoshop Logo" title="Photoshop Logo" /></div>
                <div class="a_card-image">
                    <img class="img-respons
                    ive" />
                    <h2>Adobe Photoshop</h2>
                </div>

                <div class="meda"></div>
								
                <div class="a_card-content">
                    <p>Lorem Ipsum lorem ipsum</p>
                </div>
                
         ...

CSS

body { background: #888; }

.nill { padding: 0; margin: 0; }

.a_card {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background: #fff;
    border-top-left-radius: 10px;
    border-radius: 10px!important;
}

.a_card:first-child { margin-top: 20px; }
.a-card:last-child { margin-bottom: 20px; }

.a_card {
    margin: 10px 0 10px 0;
    min-width: 320px;
    box-sizing: border-box;
    /*border-radius: 3px;*/
    background-clip: padding-box;
}
.a_card span.a_card-title, h2 {
    color: #003366;
    font-size: 18px;
    font-weight: bold;
    min-width: 200px;
    margin-left: 50px;
    margin-top: -5px;
    /* text-transform: uppercase; */
}

.a_card .a_card-image {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    overflow: hidden;
}
.a_card .a_card-image img {
    background-clip: padding-box;
    position: relative;
    z-index: -1;
}
.a_card .a_card-image span.a_card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 16px;
}
.a_card .a_card-content {
    padding: 10px;
    border-radius: 0 0 2px 2px;
    background-clip: padding-box;
    box-sizing: border-box;
}
.a_card .a_card-content p {
    margin: 0;
    color: inherit;
}
.a_card .a_card-content span.a_card-title {
    line-height: 48px;
}
.a_card .a_card-action {
    border-top: 1px solid rgba(160, 160, 160, 0.2);
    padding: 10px;
    padding-bottom: 8px;
}
.a_card-action i.im { margin: 5px; margin-left: 0; color: lightblue; }
.a_card-action span { margin-top: 5px; }
.a_card .a_card-action a {
    /*color: #ffab40;
    margin-right: 16px;
    transition: color 0.3s ease;
    text-transform: uppercase;*/
}
.a_card .a_card-action a:hover {
    /*color: red;*/
    text-decoration: none;
}

.a_card-image { background: #cce6ff; width: 100%; min-height: 60px; }

.m-r { margin-right: 8px; }

.circ { 
    border-radius: 50%;
    background: #fff;
    width: 65px;
    height: 65px;
    position:...

JavaScript

$('#items').masonry({
	//columnWidth: '.span3',
	transitionDuration: '0.4s',
	itemSelector: '.item-select'
});