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＆amp; div的{{1}} class="crewman_social"更改为：

bottom: 56px;
opacity: 1;

P.S：尝试使用Inspect element中的Chrome或Firebug中的Firefox来仔细阅读CSS＆amp; JS。

悬停时Div动画

2 个答案: