HTML CSS 3 实现图片3d鼠标悬停效果cid1069-网页前端设计
html and css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body{
font-family: 'Roboto Condensed', sans-serif;
}
body{
background-image: url(dots.png);
}
.team .item {
text-align: center;
position: relative;
margin-bottom: 15px;
overflow: hidden;
}
.team .item:hover .info {
bottom: 50px;
}
.team .item:hover .team-img:after {
opacity: 1;
visibility: visible;
}
.team .item .team-img {
overflow: hidden;
border-radius: 4px;
position: relative;
}
.team .item .team-img:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
background: linear-gradient(to top, #111, rgba(0, 0, 0, 0.4));
opacity: 0;
visibility: hidden;
-webkit-transition: all .4s;
transition: all .4s;
}
.team .item .info {
position: absolute;
bottom: -500px;
left: 0;
padding: 0 15px;
width: 100%;
z-index: 4;
-webkit-transition: all .4s;
transition: all .4s;
}
.team .item .info h6 {
font-size: 16px;
color: #fff;
letter-spacing: 1px;
margin-bottom: 5px;
}
.team .item .info span {
font-size: 13px;
font-style: italic;
margin-bottom: 10px;
color: #EE3158;
}
.team .item .info p {
margin-bottom: 10px;
color: #a9a9a9;
}
.team .item .info .icon {
margin: 0 10px;
font-size: 12px;
color: #eee;
cursor: pointer;
}
.pink{
color: deeppink;
font-weight: bold;
}
</style>
</head>
<body>
<section class="team " data-background="https://code.5g-o.com/wp-content/uploads/2020/05/dots.png">
<div class="container">
<div class="row">
<br><br><br>
<div class="section-head text-center col-sm-12">
<h4>WEB DESIGN</h4>
<h2>OUR <span class="pink">TALENTED</span> TEAM</h2>
<br><br>
</div>
<div class="item col-md-4">
<div class="hover3d">
<div class="hover3d-child">
<div class="team-img">
<img src="https://code.5g-o.com/wp-content/uploads/2020/05/4.jpg" class="img-responsive" alt="">
</div>
<div class="info">
<div>
<h6>Alex Smith</h6>
<span>Project Manager</span>
<p>Lorem Ipsum is simply dummy text of the printing and type setting industry.</p>
<div class="social">
<a href="#0" class="icon">
<i class="fa fa-facebook-f"></i>
</a>
<a href="#0" class="icon">
<i class="fa fa-twitter"></i>
</a>
<a href="#0" class="icon">
<i class="fa fa-behance"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item col-md-4">
<div class="hover3d">
<div class="hover3d-child">
<div class="team-img">
<img src="https://code.5g-o.com/wp-content/uploads/2020/05/now.jpg" class="img-responsive" alt="">
</div>
<div class="info">
<div>
<h6>Alex Smith</h6>
<span>Project Manager</span>
<p>Lorem Ipsum is simply dummy text of the printing and type setting industry.</p>
<div class="social">
<a href="#0" class="icon">
<i class="fa fa-facebook-f"></i>
</a>
<a href="#0" class="icon">
<i class="fa fa-twitter"></i>
</a>
<a href="#0" class="icon">
<i class="fa fa-behance"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item col-md-4">
<div class="hover3d">
<div class="hover3d-child">
<div class="team-img">
<img src="https://code.5g-o.com/wp-content/uploads/2020/05/2c.jpg" class="img-responsive" alt="">
</div>
<div class="info">
<div>
<h6>Alex Smith</h6>
<span>Project Manager</span>
<p>Lorem Ipsum is simply dummy text of the printing and type setting industry.</p>
<div class="social">
<a href="#0" class="icon">
<i class="fa fa-facebook-f"></i>
</a>
<a href="#0" class="icon">
<i class="fa fa-twitter"></i>
</a>
<a href="#0" class="icon">
<i class="fa fa-behance"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.5g-o.com/wp-content/uploads/2020/05/jquery.hover3d.min_.js"></script>
<script>
$(".hover3d").hover3d({
selector: ".hover3d-child",
invert: true
});
</script>
</body>
</html>
获取源码: Hghnow
下载数:132人次, 文件大小: 519.7 KB, 上传日期: 2020年-11 月-26日
公众号回复:gcode 获取解压密码
3,979 人查阅
一键获取本网站前端代码设计的所有源码
获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
您需要先支付 6元 才能查看此处内容！立即支付