Book List

by Semih Muyaoğlu

HTML

<ul>
    <li>
        <img src="http://craigmod.com/images/journal/coccyx/aba-01.png" title="" />
        <div>
            <ul>
                <li><span class="iconicstroke-fullscreen icomini"></span>Önizleme</li>
                <li><span class="iconicstroke-info icomini"></span>Detay</li>
                <li><span class="entypo-basket icomini"></span>Sepete Ekle</li>
            </ul>
        </div>
        <h3>14.50 TL</h3>
    </li>
    
    <li>
        <img src="http://craigmod.com/images/journal/coccyx/aba-02.png" title="" />
        <div>
            <ul>
                <li><span class="iconicstroke-fullscreen icomini"></span>Önizleme</li>
                <li><span class="iconicstroke-info icomini"></span>Detay</li>
                <li><span class="entypo-basket icomini"></span>Sepete Ekle</li>
            </ul>
        </div>
        <h3>14.50 TL</h3>
    </li>
    <li>
        <img src="http://craigmod.com/images/journal/coccyx/aba-03.png" title="" />
        <div>
            <ul>
                <li><span class="iconicstroke-fullscreen icomini"></span>Önizleme</li>
                <li><span class="iconicstroke-info icomini"></span>Detay</li>
                <li><span class="entypo-basket icomini"></span>Sepete Ekle</li>
            </ul>
        </div>
        <h3>14.50 TL</h3>
    </li>
    <li>
        <img src="http://craigmod.com/images/journal/coccyx/aba-04.png" title="" />
        <div>
            <ul>
                <li><span class="iconicstroke-fullscreen icomini"></span>Önizleme</li>
                <li><span class="iconicstroke-info icomini"></span>Detay</li>
                <li><span class="entypo-basket icomini"></span>Sepete Ekle</li>
            </ul>
        </div>
        <h3>14.50 TL</h3>
    </li>
    
    
</ul>

CSS

@import url(http://weloveiconfonts.com/api/?family=entypo|iconicstroke);

body { font-family:arial; font-size:.8em;}


/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

/* iconicstroke */
[class*="iconicstroke-"]:before {
  font-family: 'IconicStroke', sans-serif;
}

.icomini { position:absolute; left:10px; font-size:1.2em; }

ul { margin:0; padding:0; list-style:none; width:960px; }
ul > li { margin:5px; float:left; width:200px; text-align:center; height:320px; position:relative; overflow:hidden; border:1px solid #e2e2e2; -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
 }
ul > li > img { border-bottom:1px solid #efefef; padding-bottom:10px; width:150px; height:auto; position:Absolute; left:25px; top:10px; z-index:1;}
ul > li:hover {  }
ul > li > h3 { position:Absolute; bottom:0; left:0; width:200px; height:40px; line-height:40px; text-align:center; font-size:1.3em; font-family:'Trebuchet MS'; font-weight:100; }
ul > li > div { display:block; position:Absolute; left:0; top:0; z-index:99; width:200px; height:320px; background:rgba(0,0,0,.3); opacity:0; transition: all 1s cubic-bezier(0.03, 0.96, 0.52, 0.98);
 -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
ul > li:hover > div {opacity:1; transition: all 0.4s cubic-bezier(0.03, 0.96, 0.52, 0.98);



 }


ul > li > div > ul { width:180px;list-style:none; margin:0 10px; padding:0 0 10px 0; position:absolute; left:0; bottom:-150px; transition: all 2s cubic-bezier(0.03, 0.96, 0.52, 0.98); opacity:0;}
ul > li > div > ul > li { float:left; height:auto; width:180px; padding:12px 0; border:0; margin:0 5px 5px 0; background:rgba(255,255,255,1); -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; font-weight:bold; text-transform:uppercase; font-size:.85em; border-bottom:3px solid #e2e2e2; transition: all .5s cubic-bezier(0.03, 0.96, 0.52, 0.98); }

ul > li > div > ul > li:hover { background:rgba(114,184,244,1);...