一个比较好看的卡片小特效

2019年10月08日| 作者:策策| 浏览:22次


直接看效果




用于展示图时,鼠标经过出现标题与介绍,并且有出现时有过渡效果,外观还是比较好看的...... 不啰嗦了,直接上代码:


html:


<a href="#">
        <figure>
            <img src="images/img.jpg" alt="" />
            <figcaption>
                <h3>你的背影,我的故事</h3>
                <p>你的背影,我的故事.你的背影,我的故事.你的背影,我的故事.你的背影,我的故事.</p>
            </figcaption>
        </figure>
    </a>


CSS:


* {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        a {
            display: inline-block;
            text-decoration: none;
            color: #000;
            text-align: center;
        }

        figure,img {
            width: 200px;
            height: 140px;
        }

        figure {
            overflow: hidden;
        }

        figcaption {
            height: 96px;
            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), #FFFFFF);
            transform: translateY(-46px);
            transition: .5s;
            padding: 0 12px;
        }

        h3 {
            font-size: 16px;
            line-height: 44px;
        }

        a:hover figcaption {
            transform: translateY(-98px);
        }


直接用移动就可以实现,相对于用position来说更简单一些。




文章标签:CSS

本文选自策策的原创文章,转载请注明内容来源:CeceBlog(https://cecebk.cn/post/36.html)

评论:




作者动态
制作主题,网站,设计,收徒 联系站长
标签列表