Почему изображения перетягиваются в HTML / CSS? - PullRequest
Новая
       0

Почему изображения перетягиваются в HTML / CSS?

0 голосов
/ 23 марта 2020

Я пытаюсь создать интерактивную карту в формате HTML / CSS, но у меня возникают проблемы с обрезкой изображений с помощью функции наведения, при которой курсор не наведен.

Например, при наведении мыши на Желтое пятно вызовет зависание Орегона: http://prntscr.com/rkv3on Это аналогичный случай для Вашингтона: http://prntscr.com/rkv4cf

HTML код: 

<div align="left">
    <div>
        <div class="ORcontainer">
            <img src="GShomepageUSMAPnavyOR.png" alt="img" class="ORimage">
            <div class="ORoverlay ORoverlayFade">
                <img src="GShomepageUSMAPgreyor.png" alt="OR" class="ORimage">
            </div>
        </div>
    </div>
 </div>

CSS код: 

.ORcontainer {
    position: absolute;
    top: 108px;
    left: 228px;
    width: 200px;
    height: 200px;
    display: inline-block;
}
.ORimage {
    display: block;
    width: 194px;
    height: 150px;
}
.ORoverlayFade{
    height:100%;
    width:100%;
    top:0;
    left:0;
}
.ORoverlay {position: absolute; opacity: 0; transition:all .3s ease;}
.ORcontainer:hover .ORoverlay,.ORcontainer:hover .ORoverlayFade {opacity: 1;}

Я предполагаю, что это с самими фотографиями, но они png и не выходят за границы самих государств.

К вашему сведению: это один из моих первых опытов с HTML / CSS, так что, вероятно, это неправильный путь в этом проекте, и, вероятно, есть простое решение, которого я не вижу. Спасибо!

1 Ответ

0 голосов
/ 23 марта 2020

Установите для родительского класса изображения значение position: relative;, position: absolute; не будет привязывать изображение к блоку. Я бы также использовал flexbox в родительском контейнере, поскольку он отлично справляется с центрированием изображений в контейнерах. 

.ORcontainer {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    top: 108px;
    left: 228px;
    width: 200px;
    height: 200px;
    z-index: 1;
    &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        background-color: red;
        z-index: 5;
    }
    &  img {
        width: 100%;
        display: block;
        height: auto;
    }
    &:hover {
        cursor: pointer;
        transition: all 0.35s, transform 0.35s;
        &:after {
            opacity: 1;
        }
    }
}
...