CSS3 list with hover UI FX

CSS3 list with hover UI FX

by Andrew Pougher

HTML

<h1 class="page-header">Top 5 locations</h1>
<ol class="spn-numbers">
    <li class="lead"><span class='address-container'>Address Details</span></li>
     <li class="lead"><span class='address-container'>Address Details</span></li>
     <li class="lead"><span class='address-container'>Address Details</span></li>
     <li class="lead"><span class='address-container'>Address Details</span></li>
     <li class="lead"><span class='address-container'>Address Details</span></li>
    
</ol>
<hr>

CSS

.animate-spin {
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
    display: inline-block
}

ol ol {
    margin: 0 0 0 2em
}

ol.spn-numbers>li>.address-container {
    width: 48%;
    min-width: 200px;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 15px
}

ol.spn-numbers>li>.address-container address {
    float: right !important;
    width: 200px
}

ol.spn-numbers {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
}

.spn-numbers li {
    position: relative;
    display: block;
    padding: .4em .4em .4em 5em;
    margin: .5em 0;
    color: #444;
    text-decoration: none;
    transition: all .3s ease-out;
    border-bottom: 1px solid #ddd
}

.spn-numbers li:hover {
    -moz-box-shadow: 0 0 10px 0 #aaa;
    -webkit-box-shadow: 0 0 10px 0 #aaa;
    box-shadow: 0 0 10px 0 #aaa
}

.spn-numbers li:hover:before {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg)
}

.spn-numbers li:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -1.3em;
    text-align: center;
    color: #888;
    font-size: 2.5em;
    line-height: 2.2em;
    height: 2.2em;
    width: 1.5em;
    transition: all .3s ease-out
}

hr.drop-shadow {
    border: 0;
    height: 5px;
    background: -webkit-radial-gradient(50% 0, ellipse farthest-side, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.0) 100%);
    background: -moz-radial-gradient(50% 0, ellipse farthest-side, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.0) 100%);
    background: -ms-radial-gradient(50% 0, ellipse farthest-side, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.0) 100%);
    background: -o-radial-gradient(50% 0, ellipse farthest-side, rgba(0, 0, 0, 0.3) 0, rgba(0,...

JavaScript

/* just playing.
$(".address-container").hover(function(){
$(this).toggleClass("animate-spin")
});
*/