html - 悬停时 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 { 宽度: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