Fade Hover Effect

by Keith Jeter

HTML

<div class="outer">
    <div class="inner">
        <div class="one col"><span>asdsadsad</span></div>
        <div class="two col"><span>asdsadsad</span></div>
        <div class="three col"><span>asdsadsad</span></div>
        <div class="three col"><span>asdsadsad</span></div>
        <div class="one col"><span>asdsadsad</span></div>
        <div class="two col"><span>asdsadsad</span></div>
        <div class="three col"><span>asdsadsad</span></div>
        <div class="three col"><span>asdsadsad</span></div>
    </div>
</div>

CSS

body { padding: 0; margin: 0; }

.outer .inner { margin: 10px 10px; }

.col {
    display: block;
    cursor: pointer;
    float: left;
    margin: 10px;
    border-radius: 20px;
    width: calc(100% * 1 / 4 - 20px);
    min-width: 100px;
    height: 300px;
    min-height: 100px;
    color: #fff;
    overflow: hidden;
    background-color: #4581d0;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes clr {
    from { background-color: #4581d0; }
    to { background-color: #abd5ff; }
}

/* Standard syntax */
@keyframes clr {
    from { background-color: #4581d0; }
    to { background-color: #abd5ff; }
}

.col:hover { 
    color: #262626; 
    background-color: #abd5ff;
    -webkit-animation-name: clr;
    -webkit-animation-duration: .5s;
    
    -moz-animation-name: clr;
    -moz-animation-duration: .5s;
    
    animation-name: clr;
    animation-duration: .5s;
}

.col span { width: 100%; text-align: center; margin: auto; }