下面是效果图

微信订阅号：Rabbit

HTML代码

<!-- 主容器 --><div class="box">

    <!-- 图片 -->
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/pic.png" alt=""/>

    <!-- 内容 -->
    <div class="box-inner-content">
        <h3 class="title">Rabbit</h3>
    <span class="post">Web Developer</span>
    </div></div>

CSS代码

/* 初始化 */body,html {    font-size: 100%;
}
* {    padding: 0;    margin: 0;    box-sizing: border-box;
}body {    background: #494A5F;    font-weight: 500;    font-size: 1.05em;    font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}/* 外层容器 */.box {    margin: 100px auto;    width: 400px;    height: 400px;    overflow: hidden;    position: relative;
}.box:before {    content: "";    display: block;    border: 30px solid rgba(255, 255, 255, 0.3);    position: absolute;    top: 5px;    left: 5px;    bottom: 5px;    right: 5px;    opacity: 1;    z-index: 2;    transition: all 0.3s ease 0s;
}.box:hover:before {    top: 0;    left: 0;    right: 0;    bottom: 0;    border: 10px solid rgba(255, 255, 255, 0.18);
}.box:after {    content: "";    display: block;    border: 8px solid #fff;    position: absolute;    top: 35px;    left: 35px;    bottom: 35px;    right: 35px;    opacity: 1;    z-index: 1;    transition: all 0.5s ease 0s;
}.box:hover:after {    top: 0;    left: 0;    bottom: 0;    right: 0;    opacity: 0;
}/* 图片 */.box img {    width: 100%;    height: auto;    transform: scale(1.2);    transition: all 0.5s ease 0s;
}.box:hover img {    transform: scale(1);
}/* 文字内容 */.box .box-inner-content {    position: absolute;    left: 45px;    bottom: 125px;    right: 45px;    text-align: center;    color: #fff;    opacity: 0;    transition: all 0.3s ease 0s;
}.box:hover .box-inner-content {    opacity: 1;    bottom: 20px;    text-shadow: 0 0 10px #000;
}/* 标题 */.box .title {    font-size: 26px;    font-weight: bold;    margin: 0;
}/* 文本 */.box .post{    display: block;    font-size: 16px;    font-style: italic;    margin-bottom: 10px;
}

这里用了像素设定容器的大小，如果用bootstrap等框架的话，可以设置成响应式。

因为图片设置成100%，所以会自适应外层容器的大小。

需要注意的是外层容器的position一定要设置成relative。

主要用到CSS3的transition属性，我这里没设浏览器前缀，现在大多数浏览器都已经兼容这个属性了。如果不放心又不嫌麻烦的话，最好还是把各浏览器前缀加上。

HTML与CSS 目录：HTML与CSS

上一篇：【JavaScript】解决IE8下，用js不能选择class的情况

下一篇：【CSS】按钮特效

作者：滑滑兔
链接：https://www.jianshu.com/p/1219241adee0