Div動畫時懸停

Question

我想做一個響應網站，但我是新的HTML5和CSS3。 結果我在找你可以看到在這個鏈接上，在「團隊」部分的圖片效果：http://evatheme.com/templates/white/index.html#team

我已經嘗試使用過渡的寬度和背景，我也相當困惑如何讓其他元素出現並在懸停時消失。

任何人都可以幫助我嗎？或者給我一些關於我有什麼搜索的提示？

這是代碼我在測試：

CSS：

#test { 
    width:300px; 
    height:100px; 
    background:blue; 
    transition:width 2s; 
    -webkit-transition:width 2s; /* Safari */ } 

#teste { 
    width:px; 
    height:100px; 
    background:red; 
    transition:width 2s; 
    -webkit-transition:width 2s; /* Safari */ } 

.teste:hover { width:300px; } 

HTML：

<div id="test"> 
    <div id="teste" class="teste"></div> 
</div> 

感謝您的幫助。

Answer 1

第一

這是非法的： #teste { width:px; 瀏覽器簡單地忽略這一點。

我會嘗試做這樣的事情：

#test { 
width:300px; 
height:100px; 
background:blue; 
} 

#teste { 
width:300px; 
height:100px; 
background:red; 
opacity:0; 
-webkit-transition: all 500ms linear; 
-moz-transition: all 500ms linear; 
-ms-transition: all 500ms linear; 
-o-transition: all 500ms linear; 
transition: all 500ms linear; 
} 
#test:hover #teste { 
opacity: 1; 
} 

Working JsFiddle Example

Answer 2

在現場您所提供的鏈接..三個社會圖標在div與class="crewman_social"：

<div class="crewman_item"> 
    ... 
    <div class="crewman_social"> 
     <a href="javascript:void(0);"> 
      <i class="fa fa-google-plus"></i> 
     </a> 
     <a href="javascript:void(0);"> 
      <i class="fa fa-twitter"></i> 
     </a> 
     <a href="javascript:void(0);"> 
      <i class="fa fa-facebook-square"></i> 
     </a> 
    </div> 
</div> 

...與CSS：

.crewman_item .crewman_social { 
position: absolute; 
z-index: 30; 
left: 0; 
bottom: 0; 
width: 100%; 
opacity: 0; 
text-align: center; 
transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out; 
-webkit-transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out; 
} 

而且在上空盤旋div與class="crewman_item"，關於CSS以bottom & opacity爲div與class="crewman_social"變化：

bottom: 56px; 
opacity: 1; 

PS：嘗試在Firefox使用ChromeInspect element或Firebug細讀通過CSS & JS。