FORGOT YOUR DETAILS?

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
下载数:114人次, 文件大小: 519.7 KB, 上传日期: 2020年-11月-26日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

2,959 人查阅

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
下载 (4)

您需要先支付 6元 才能查看此处内容!立即支付





 

TOP

获取源码,用于学习交流。记得 B站/点赞 /投币/转发 非常谢谢!

一键获取本站点所有源码