Попытка получить изображение для анимации под другим - PullRequest
Новая
       19

Попытка получить изображение для анимации под другим

0 голосов
/ 22 февраля 2019

Я работаю над концепцией для некоторых элементов веб-страницы, и я решил стилизовать их с некоторым изяществом, чтобы успокоить клиента, который хочет некоторого визуального интереса - проблема, с которой я сталкиваюсь, состоит в том, что я получаю стилизацию только дляработать для одного элемента индивидуально, а не одновременно.Сценарий как таковой есть элемент веб-страницы, который содержит небольшой столбец для текста и другой, который содержит поля для изображений и ссылок.Намерение состоит в том, чтобы, когда пользователь наводит указатель мыши на изображение, фотография масштабируется, затем слегка поворачивается, и затем он видит наложение со ссылкой.На этом этапе я могу заставить двух аниматоров работать отдельно, но не вместе.Любая помощь, которая может быть оказана, будет принята с благодарностью.

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>
...