Question

我试图在使用透视图时获得完整的背景色。最初，我将高度设置为50％，悬停时我希望它可以覆盖整个图像，但不会发生。我已经设置了高度悬停到100％即可得到，但是却显示出意外的结果。我在下面附加了代码。我们将为您提供帮助。

.box-img img{
    max-width: 100%;

}
.box-img::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 50%;
       transition: all 1s ease 0s;
    transform: perspective(400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform-origin: 50% 100% 0;
    visibility: hidden;
    opacity: 0;
    background: pink;
}
.box{
    position: relative;
}
.box-content {
   width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px 20px;
    text-align: center;
    color: #fff;
    overflow: hidden;
    visibility: hidden;
    z-index: 1;
    transition: all 0.3s ease 0.2s;
}
.box:hover .box-img::after {
   transform: perspective(400px) rotateX(-180deg) rotateY(0deg) rotateZ(0deg);
    transform-origin: 50% 100% 0;
    visibility: visible;
    opacity: 1;
    height: 100%;
}
.box:hover .box-content {
    opacity: 1;
}

.box:hover .box-content {
    visibility: visible;
}
.box:hover .box-title {
    transform: scale(1);
}
.box-content .box-title {
    transform: scale(0);
    transition: all 1s ease 0s;
}
.box:hover .description {
    opacity: 1;
}
.box-content .description {
    margin-top: 20px;
    font-size: 15px;
    opacity: 0;
    transition: all 1s ease 0s;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!DOCTYPE html>

<html lang="en">
   
<head>
        

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="box">
                <div class="box-img">
                <img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/kG-5Wkc/caucasian-middle-aged-businessman-using-tablet-pc-in-new-york-city_vk1jgtle__F0000.png" alt="">
            </div>
                <div class="box-content">
                    <h3 class="box-title">Web Designer</h3>
                    <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac tincidunt diam. Fusce augue nunc.</p>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

使用透视的悬停整个背景

0 个答案: