Div animated when hover

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" СМЧ касаемо bottom & opacity для div с class="crewman_social" изменений:

bottom: 56px; 
opacity: 1; 

PS: Попробуйте использовать Inspect element в Chrome или Firebug в Firefox проштудировать до CSS & JS.