html - Bootstrap/CSS 中的动画淡入淡出

Question

我想知道是否有一种方法可以在将鼠标悬停在图片上并使用 bootstrap/CSS 出现随附的按钮时实现图片的淡入效果。

这个设计机构 ( http://riotdesign.eu/en/blog/page/2/?_=1398082943473 ) 在他们的博客上做了这件事，看起来真的很酷。通过检查员查看代码，我无法辨别如何做到这一点。任何关于我在哪里可以了解此功能的指导将不胜感激。

Answer 1

可以通过css实现，这里是JS Fiddle Simple Demonstration下面是代码:

HTML:

<div id="parentDiv" class="myDiv">
    <div class="img" ></div>
    <div id="secondChild">Lorem Ipsum Colro dito pilo Lorem Ipsum Colro dito pilo Lorem Ipsum Colro dito pilo Lorem Ipsum Colro </div>
</div>

CSS:

.myDiv
{
    border: 1px solid blue;
    width:600px;
    height:200px;

}
.myDiv .img{
    position: absolute;
    margin:5px;
    width: 200px;
    height:180px;
    background:url("http://www.ideachampions.com/weblogs/Good-news11.jpg");
    background-position: center center;
    background-size: 200px 180px;
    -webkit-transition: all 2s;
    transition:all 2s;

}

.myDiv:hover .img{
    background-size: 300px 360px;
}
#secondChild
{
    position : absolute;
    margin-left: 250px;
    width:350px;
    height:100px;
}

希望这对您有所帮助。