Включение наложения изображений до того, как мышь наведет курсор на изображение - PullRequest
Новая
       7

Включение наложения изображений до того, как мышь наведет курсор на изображение

0 голосов
/ 12 октября 2018

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

<https://codepen.io/jl88s/pen/oawOOM?editors=1100>

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

У вас есть эта проблема, потому что вы установили селектор :hover для вашего контейнера, который принимает полную высоту и ширину.Таким образом, в тот момент, когда вы входите в окно, срабатывает :hover.

Установите контейнер на display: inline-flex, удалите height, а затем установите контейнер там, где он вам нужен, относительно его родителя.

Не добавлен родительский элемент и не размещен контейнер в примере, скажите, хотите ли вы, чтобы я.

Редактировать

Добавленоцентрирование в этом примере.(См. Html и стили тела) 

html, body {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: auto;
}

.image {
    width: 400px;
    height: 400px;
    display: block;
}

.middle {
    transition: 2s ease;
    position: absolute;
    text-align: center;
    opacity: 0;
}

.container:hover .image {
    opacity: 0.3;
}

.container:hover .middle {
    opacity: 1;
}

.text {
    background-color: orange;
    color: white;
    font-size: 1em;
    padding: 16px 32px;
    text-transform: uppercase;
}
0 голосов
/ 12 октября 2018

Мое первое решение вызывает другую проблему.Наложение исчезает при попытке навести курсор на кнопку.Извини за это.Проверьте мое новое решение.

Вот код: 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
}

.image {
    width: 400px;
    height: 400px;
    display: block;
}

.middle {
    transition: 2s ease;
    position: absolute;
   text-align: center;
    opacity: 0;
}
.container:hover .image {
    opacity: 0.3;
}

.container:hover .middle {
    opacity: 1;
}

.text {
    background-color: orange;
    color: white;
    font-size: 1em;
    padding: 16px 32px;
    text-transform: uppercase;
}
...