CSS圖像懸停動畫與流體三欄佈局

Question

我試圖做這個頁面在這裏純CSS懸停：http://www.bigideaadv.com/big_idea_v2/#work

我使用絕對定位在兩個圖像元素，並使用過渡性質與不透明度淡出嘗試他們進出懸停。但是由於每個家長都是流動的，他們就會消失。我目前將「關閉」圖像設置爲相對，將「開」圖像設置爲絕對。淡出很酷，但淡入不是因爲絕對定位的圖像沒有設置寬度和高度。我認爲這是原因。

我想要一個非css解決方案。一個JavaScript解決方案相當簡單，我可以鞭打一個，但我相信它可以用直接的CSS來完成。

任何人有任何想法？

結構：

<div id="work"> 
    <p class="align-center work-copy"><span class="clarendon-italic">our</span><br /> 
    <span class="proxima-nova">WORK</span></p> 

    <div id="clients"> 
     <div class="client_box"> 
      <a href="#modal-aaa" class="call-modal"> 
       <img src="wp-content/themes/skeleton/images/clients/aaa_logo_off.png" alt="American Arbitration Association" /> 
       <img src="wp-content/themes/skeleton/images/clients/aaa_logo.png" alt="American Arbitration Association" /> 
      </a> 
     </div> 
     <div class="client_box"> 
      <a href="#modal-art-of-shaving" class="call-modal"> 
       <img src="wp-content/themes/skeleton/images/clients/art_of_shaving_logo_off.png" alt="Art of Shaving" /> 
       <img src="wp-content/themes/skeleton/images/clients/art_of_shaving_logo.png" alt="Art of Shaving" /> 
      </a> 
     </div> 
     <div class="client_box"> 
      <a href="#modal-entenmanns" class="call-modal"> 
       <img src="wp-content/themes/skeleton/images/clients/entenmanns_logo_off.png" alt="Entenmanns" /> 
       <img src="wp-content/themes/skeleton/images/clients/entenmanns_logo.png" alt="Entenmanns" /> 
      </a> 
     </div> 

     <div class="client_box"> 
      <a href=""> 
       <img src="wp-content/themes/skeleton/images/clients/gdlsk_logo_off.png" alt="GDLSK" /> 
      </a> 
     </div> 
     <div class="client_box"> 
      <a href=""> 
       <img src="wp-content/themes/skeleton/images/clients/hale_and_hearty_logo_off.png" alt="Hale and Hearty" /> 
      </a> 
     </div> 
     <div class="client_box"> 
      <a href=""> 
       <img src="wp-content/themes/skeleton/images/clients/seviroli_logo_off.png" alt="Seviroli" /> 
      </a> 
     </div> 

     <div class="client_box"> 
      <a href=""> 
       <img src="wp-content/themes/skeleton/images/clients/aaa_logo_off.png" alt="American Arbitration Association" /> 
      </a> 
     </div> 
     <div class="client_box"> 
      <a href=""> 
       <img src="wp-content/themes/skeleton/images/clients/art_of_shaving_logo_off.png" alt="Art of Shaving" /> 
      </a> 
     </div> 
     <div class="client_box"> 
      <a href=""> 
       <img src="wp-content/themes/skeleton/images/clients/entenmanns_logo_off.png" alt="Entenmanns" /> 
      </a> 
     </div> 
    </div> 

    <p class="align-center team-arrow"><img src="wp-content/themes/skeleton/images/down_arrow.png" alt="Down arrow" /></p> 
</div> 

CSS：

.client_box img { 
    display: block; 
    margin: 0 auto; 
    width: 90%; 
    max-width: 260px; 
} 

#work .client_box a[href*="modal"] { 
    position: relative; 
    margin: 0 auto 0 auto; 
} 

#work a[href*="modal"] img { 
    position: relative; 
    top: 0; 
    left: 0; 
    -webkit-transition: opacity .3s ease-in-out; 
    -moz-transition: opacity .3s ease-in-out; 
    -o-transition: opacity .3s ease-in-out; 
    transition: opacity .3s ease-in-out; 
} 

#work a[href*="modal"] img:nth-child(2) { 
    position: absolute; 
} 

#work a[href*="modal"] img:nth-child(1) { 
    opacity: 1; 
} 

#work a[href*="modal"] img:nth-child(1):hover { 
    opacity: 0; 
} 

#work a[href*="modal"] img:nth-child(2) { 
    opacity: 0; 
} 

#work a[href*="modal"] img:nth-child(2):hover { 
    opacity: 1; 
} 

#work .client_box:nth-child(3n) { 
    border-right: 0; 
} 

Answer 1

你可以做到這一點 - 隨着透明度/轉換，操縱高度爲好。

#work a img { 
    position:relative; 
    margin:0 auto; 
    opacity:1; 
    display:block; 
    transition-property:display, opacity; 
    transition-duration:.5s; 
    transition-timing-function:ease-in-out; 
} 
#work a img:nth-child(2) { 
    opacity: 0; 
    height:0; 
    overflow:hidden; 
} 

/*hover*/ 
#work a:hover img:nth-child(1) { 
    opacity:0; 
    height:0; 
} 
#work a:hover img:nth-child(2) { 
    opacity:1; 
    height:auto; 
} 

初始淡入並不完美，但看起來不錯。

我不得不當前的代碼中改變一些繼承CSS，所以這裏是一個摘錄：http://jsfiddle.net/uRQxa/1/