Home >  > bootstrap图片滑动效果

bootstrap图片滑动效果

0

一、找图片的网站
https://www.pexels.com/search/website/

二、滑动效果的图片
1.成果展示

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Card Image Hover</title>
 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <link rel="stylesheet" href="Style.css">
 
</head>
<body>
    
 
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-4">
                <div class="card shadow" style="width: 20rem;">
                    <div class="inner">
                        <img class="card-img-top" src="Stock/pexels-4.jpeg" alt="Card image cap">
                    </div>
                    <div class="card-body text-center">
                      <h5 class="card-title">Design</h5>
                      <p class="card-text">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                      </p>
                      <a href="#" class="btn btn-success">Learn More...</a>
                    </div>
                  </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow" style="width: 20rem;">
                    <div class="inner">
                            <img class="card-img-top" src="Stock/pexels-5.jpeg" alt="Card image cap">
                    </div>
                    
                    <div class="card-body text-center">
                      <h5 class="card-title">Responsive</h5>
                      <p class="card-text">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                      </p>
                      <a href="#" class="btn btn-success">Learn More...</a>
                    </div>
                  </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow" style="width: 20rem;">
                    <div class="inner">
                            <img class="card-img-top" src="Stock/pexels-3.jpeg" alt="Card image cap">
                    </div>
                    
                    <div class="card-body text-center">
                      <h5 class="card-title">UI/UX</h5>
                      <p class="card-text">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                      </p>
                      <a href="#" class="btn btn-success">Learn More...</a>
                    </div>
                  </div>
            </div>
        </div>
    </div>
 
</body>
</html>

css代码

.container{
    margin-top: 8%;
}
 
.inner{
    overflow: hidden;
}
 
.inner img{
    transition: all 1.5s ease;
}
 
.inner:hover img{
    transform: scale(1.5);
}

http://www.dailywebtuition.com/bootstrap-card-image-hover-effect/
参考:https://www.youtube.com/watch?v=k8ioDxSEjZU

本文暂无标签

发表评论

*

*