海报 demo

效果

思路

1.设置两张图片和底部的搜索栏

<ul>
    <li>
        <img src="https://goo.gl/sGrO7g" alt="">
        <div class="info">
            <p>Drama</p>
            <div class="button"></div>
        </div>
    </li>

    <li>
        <img src="https://goo.gl/Cjq6Sj" alt="">
        <div class="info">
            <p>Action, Drama, Sci Fi</p>
            <div class="button"></div>
        </div>
    </li>
</ul>

2.设置图片的放大动画和阴影效果

        li:hover img {
            cursor: pointer;
            box-shadow: 0 1em 2em rgba(0,0,0,0.2);
            transform: scale(1.1);
        }

3.设置搜索栏的下滑动画和阴影效果

  li:hover .info {
            bottom: -4.75em;
            box-shadow: 0 1.5em 6em r