CSS3 hover悬停圆形图片滑动展开文字内容【原创】

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需远程调用两个CSS样式文件，并引入一个本地CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="css/demo.css">

接着设置好页面元素的样式，代码如下：

.demo{
	padding: 2em 0;
}
.our-team{
    overflow: hidden;
    border-radius: 50%;
    position: relative;
}
.our-team img{
    width: 100%;
    height: auto;
    position: relative;
    right: 0;
    transition: all 0.4s ease-in-out 0s;
}
.our-team:hover img{
    right: 60%;
}
.our-team .team-content{
    width: 80%;
    height: 100%;
    background: #f1f1f1;
    padding: 20% 30px 0;
    position: absolute;
    top: 0;
    right: -80%;
    transition: all 0.4s ease-in-out 0s;
}
.our-team:hover .team-content{
    right: 0;
}
.our-team .title{
    font-size: 22px;
    color: #8e0c80;
    margin: 0 0 10px 0;
}
.our-team .post{
    display: block;
    font-size: 12px;
    font-weight: 900;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.our-team .description{
    font-size: 14px;
    color: #333;
}
.our-team .social{
    padding: 0;
    margin: 0;
    list-style: none;
}
.our-team .social li{
    display: inline-block;
    margin-right: 10px;
}
.our-team .social li:last-child{
    margin-right: 0;
}
.our-team .social li a{
    display: block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #999;
    border-radius: 4px;
    text-align: center;
    transition: all 0.3s ease-in-out 0s;
}
.our-team .social li a:hover{ color: #fff; }
.our-team .social li a.fa-qq:hover{ background: #3b5a9b; }
.our-team .social li a.fa-weixin:hover{ background: #2baae1; }
.our-team .social li a.fa-weibo:hover{ background: #f63d26; }
.our-team .social li a.fa-youtube:hover{ background: #c3181e; }
@media only screen and (max-width: 990px){
    .our-team{ margin-bottom: 50px; }
}
@media only screen and (max-width: 360px){
    .team-content{ padding: 15% 15px 0; }
    .our-team .social li{ margin-right: 0; }
}

页面的body部分，分别将3个部分的内容放入不同的div容器里，代码如下：

<div class="demo">
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-sm-6">
				<div class="our-team">
					<img src="img/1.jpg" alt=""/>
					<div class="team-content">
						<h3 class="title">要求</h3>
						<span class="post">对宇宙发出指令</span>
						<p class="description">第一个阶段，是做出要求，对宇宙发出指令，让宇宙了解你想要些什么，宇宙就会自动回应你的想法。</p>
						<ul class="social">
							<li><a class="fa fa-qq" href="#"></a></li>
							<li><a class="fa fa-weixin" href="#"></a></li>
							<li><a class="fa fa-weibo" href="#"></a></li>
						</ul>
					</div>
				</div>
			</div>

			<div class="col-md-4 col-sm-6">
				<div class="our-team">
					<img src="img/2.jpg" alt=""/>
					<div class="team-content">
						<h3 class="title">信念</h3>
						<span class="post">要相信还没有实现的事</span>
						<p class="description">第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念，就是我的说法，要相信还没有实现的事，“你的愿望就是我的命令”，宇宙就会开始运作安排，从而满足你心中的愿望。</p>
						<ul class="social">
							<li><a class="fa fa-qq" href="#"></a></li>
							<li><a class="fa fa-weixin" href="#"></a></li>
							<li><a class="fa fa-weibo" href="#"></a></li>
						</ul>
					</div>
				</div>
			</div>

			<div class="col-md-4 col-sm-6">
				<div class="our-team">
					<img src="img/3.jpg" alt=""/>
					<div class="team-content">
						<h3 class="title">接受</h3>
						<span class="post">帮助自己具有拥有它们的感觉</span>
						<p class="description">第三步，就是这个过程最后一步，接受。开始感觉好极了，想想要是你想要的事物已经出现，那会是什么感觉。</p>
						<ul class="social">
							<li><a class="fa fa-qq" href="#"></a></li>
							<li><a class="fa fa-weixin" href="#"></a></li>
							<li><a class="fa fa-weibo" href="#"></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>