创建响应内容悬停元素

Question

需要技巧现在，我需要你为客户创造 Concrete5网站这个“内容悬停元素”帮助..

这里是我的地盘至今：testi4.aada.fi

还有就是我的工作，现在这一个悬停元素应该像这样工作：http://testi4.aada.fi/files/7514/1802/2403/kwh_hover.png

，我不知道如何来管理代码..

有此象，w母鸡用户把鼠标放在它上面用户应该得到其他div在该图像的内容..

任何提示都超过欢迎！

//米卡

Answer 1

简单悬停效果，如果需要一些额外的动画，使用jQuery。

.wrapper { 
 
    width: 33%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
    border: 1px solid #ddd; 
 
    position: relative; 
 
} 
 
.hover { 
 
    display: none; 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    background-color: #ddd; 
 
} 
 
.wrapper:hover .hover { 
 
    display: block; 
 
}

<div class="wrapper"> 
 
    <img src="http://lorempixel.com/400/200/animals" /> 
 
    <div class="hover"> 
 
    some text here; 
 
    </div> 
 
</div> 
 
<div class="wrapper"> 
 
    <img src="http://lorempixel.com/400/200/sports" /> 
 
    <div class="hover"> 
 
    some text here; 
 
    </div> 
 
</div> 
 
<div class="wrapper"> 
 
    <img src="http://lorempixel.com/400/200/city" /> 
 
    <div class="hover"> 
 
    some text here; 
 
    </div> 
 
</div>