正面/背面DIV過渡穆斯等於USAToday

Question

我被要求執行一個div mouseover過渡，因爲它在USAToday（寫作時）。

基本上網站有一些箱子這種結構：

<div class="asset"> 
    <div class="front">'image and some text'</di> 
    <div class="back">'some other text'</div> 
</div> 

在頁面加載只有「前」的div所示。通過在任何「資產」上盤旋，'back'div覆蓋'front'div，當鼠標移出'back'時div淡出，再次顯示前面的框。

我不是一個網頁設計師，雖然我對網頁和JavaScript有足夠的瞭解。我確實分析了源代碼（使用螢火蟲），但我無法完全理解這種轉換是如何實現的。

我發現的解決方案之一是通過使用JQuery fadeIn/fadeOut，但我有問題：行爲被正確地複製，但後面的div出現在前面的div下面，而不是它。

你能否提出一種方法來複制確切的usatoday行爲？

Answer 1

的關鍵是具有塊元件與位置：內側位置元素相對然後：絕對：

http://jsfiddle.net/coma/FeVsr/12/

HTML

<div class="news"> 
    <a href="#" class="boxing" style="background-image:url(https://si0.twimg.com/profile_images/3162594037/e232a8ce35fe8ce856e4a52a16141f20.jpeg);"> 
     <div class="summary">...</div> 
     <div class="content">...</div> 
    </a> 
    <a href="#" style="background-image:url(https://si0.twimg.com/profile_images/3162594037/e232a8ce35fe8ce856e4a52a16141f20.jpeg);"> 
     <div class="summary">...</div> 
     <div class="content">...</div> 
    </a> 
</div> 

CSS

body { 
    font-family: Arial, Helvetica, sans-serif; 
} 

div.news { 
    padding: 10px; 
    background: #eee; 
} 

div.news:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 

div.news > a { 
    display: block; 
    float: left; 
    width: 200px; 
    border: 5px solid #fff; 
    margin: 0 8px 8px 0; 
    box-shadow: 0 0 3px rgba(0, 0, 0, .5); 
    position: relative; 
    background: #009BFF none no-repeat top; 
    background-size: cover; 
    font-size: 12px; 
    text-decoration: none; 
    color: #fff; 
} 

div.news > a > div.summary { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 50px; 
    padding: 5px; 
    overflow: hidden; 
    background-color: rgba(0, 0, 0, .7); 
    line-height: 1.4em; 
} 

div.news > a > div.content { 
    min-height: 200px; 
    position: relative; 
    opacity: 0; 
    background-color: inherit; 
    transition: opacity .5s; 
    padding: 25px 5px 5px 5px; 
    z-index: 1; 
    font-size: 13px; 
    line-height: 1.4em; 
} 

div.news > a:hover > div.content { 
    opacity: 1; 
} 

div.news > a:before { 
    content: "news"; 
    display: block; 
    padding: 3px; 
    background-color: inherit; 
    position: absolute; 
    top: 0; 
    left: 0; 
    text-transform: uppercase; 
    z-index: 2; 
} 

div.news > a.people { 
    background-color: #9600B4; 
} 

div.news > a.boxing { 
    background-color: #EB1E00; 
} 

div.news > a.business { 
    background-color: #00A53C; 
} 

div.news > a.people:before { 
    content: "people"; 
} 

div.news > a.boxing:before { 
    content: "boxing"; 
} 

div.news > a.business:before { 
    content: "business"; 
}