网站想达到以下的效果，不知道咋写

在制作网站中
想要达到鼠标悬停之后有另一个从底部浮现并覆盖的效果

img

img

用hover+css3动画就行，简单示例如下

<!doctype html>
<style>
    .gameitem{position:relative;overflow:hidden;display:inline-block;margin-left:10px}
    .gameitem img{display:block}
    .gameitem .intro{position:absolute;top:220px;left:0;transition:all .3s linear;background:rgba(0,0,0,.6);color:#fff;padding:5px}
    .gameitem:hover .intro{top:0px}
</style>
<div class="gameitem">
    <img src="http://lvyou168.cn/upimg/customer/201758161754_192.jpg" class="destinations_imgs" alt="尔湾光谱购物中心">
    <div class="intro">
        <h3><strong>美国</strong> - 尔湾光谱购物中心</h3>
        <h4>Irvine Spectrum Center</h4>
        <p>尔湾光谱购物中心位于美国南加州橙县中心，您将在此体验到南加州最好的娱乐、生活方式和购物氛围。130多家商店加上33米高的摩天轮以及非同凡响的旋转木马，游客可在这里各得所好。</p>
    </div>
</div>
<div class="gameitem">
    <img src="http://lvyou168.cn/upimg/customer/201758161754_192.jpg" class="destinations_imgs" alt="尔湾光谱购物中心">
    <div class="intro">
        <h3><strong>美国</strong> - 尔湾光谱购物中心</h3>
        <h4>Irvine Spectrum Center</h4>
        <p>尔湾光谱购物中心位于美国南加州橙县中心，您将在此体验到南加州最好的娱乐、生活方式和购物氛围。130多家商店加上33米高的摩天轮以及非同凡响的旋转木马，游客可在这里各得所好。</p>
    </div>
</div>

img


有其他问题可以继续交流~

可以通过给这个最大的元素绑定两个事件就可以完成
1.鼠标离开事件：onmouseout
2.鼠标悬停事件：onmouseover

最简单的看一下jquery的动画，鼠标悬停之后触发动画。
有帮助的话采纳一下哦！

第一步：给父元素设置相对定位，溢出隐藏 overflow: hidden
第二步：给子元素设置绝对定位，移动到父元素下方
第三步：给子元素设置：hover效果，改变绝对定位的top值就可以达到效果