Question

我正在为某些网页元素设计一个概念，因此我决定以某种风格为它们设置样式，以安抚想要视觉效果的客户-我遇到的问题是，我只能将样式一个元素单独工作，而不是同时工作。场景就是这样，存在一个网页元素，其中包含一小段用于文本的文本，另一个包含用于图像和链接的框。目的是，当用户将鼠标悬停在图像上时，照片将缩放然后稍微旋转，然后他们将看到带有链接的叠加层。在这一点上，我可以使两个动画分别工作，但不能一起工作。可以提供的任何帮助将不胜感激。

html {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.web-page {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, 25% 75%);
    grid-column-gap: .75em;
}

.column {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 15px 10px;
    width: 100%;
    height: (100vh);
    background: #18467F;
    overflow: hidden;
}

.wrapper {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));

    grid-gap: .75em;
    font-family: sans-serif;
    width 100%;

    margin: 15px 10px;
    overflow: hidden;

}

.wrapper .imgbx .visual {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
transition: .8s ease all;

}

.imgbx {
    box-sizing: border-box;
    display: inline-block;
    margin: 0px;
    width: 400px;
    height: 400px;
    background: #262626;
    overflow: hidden;
}

.visual img {

    box-sizing: border-box;
    transition: .8s ease all;
    z-index: 0;

}

/*img:hover {
    transform: scale(1.15);
}*/

.info {
    margin: 15px 15px;
    color: #FFF;
    font-size: 20px;
    font-weight: 200;
    font-family: sans-serif;
    line-height: 1.75;

}

.info .title {
    font-size: 22px !important;
    font-weight: 800;
    text-transform: uppercase;
}



.email {
    margin: auto 15px;
    text-decoration: none;
    font-size: 18px;
    color: #FFF;
    transition: 0.6s ease all;
}

.email:hover {
    text-decoration: none;
    color: #888b8D;

}

.content {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
    color: #fff;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    font-size: 45px;
    transition: .8s ease all;
    z-index: 1;
}

.content a {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    padding: 0;
    color: #FFF;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    text-decoration: none;
    font-size: 45px;
    z-index: 1;
    cursor: pointer;
}

.overlay {

    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background: rgba(35, 103, 186, 0.7);
    z-index: 1;
}



.imgbx:hover .overlay {
    opacity: 1;
}


.wrapper .imgbx .visual:hover {
    transform: scale(1.15) rotate(-5deg);
    opacity: 0.6;
}

<body>
    <div class="web-page">
        <div class="column">
            <p class="info"><span class="title">School of Education</span><br />452 Martin Luther King Hall<br />812 East Dunklin Street<br />Jefferson City MO 65101<br /></p><a class="email" href="mailto:schoolofeducation@lincolnu.edu">schoolofeducation@lincolnu.edu</a>
        </div>
        <div class="wrapper">
            <div class="imgbx">
                <div class="visual">
                    <img src="images/400px-wall.png">
                </div>
                <div class="overlay">
                    <div class="content">
                        <a href="about.html">about</a>
                    </div>
                </div>
            </div>
            <div class="imgbx">
                <div class="visual">
                    <img src="images/400px-students.png">
                </div>
                <div class="overlay">
                    <div class="content">
                        <a href="admissions.html">admissions</a>
                    </div>
                </div>
            </div>
            <div class="imgbx">
                <div class="visual">
                    <img src="images/400px-grads.png">
                </div>
                <div class="overlay">
                    <div class="content">
                        <a href="degrees.html">degrees</a>
                    </div>
                </div>
            </div>
            <div class="imgbx">
                <div class="visual">
                    <img src="images/400px-team.png">
                </div>
                <div class="overlay">
                    <div class="content">
                        <a href="people.html">people</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

试图获取图像以在另一个图像下进行动画处理

0 个答案: