2X2 затенение изображения - PullRequest
Новая
       2

2X2 затенение изображения

1 голос
/ 20 апреля 2020

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

Но по какой-то причине я не могу заставить изображение выйти из своего собственного блока div. 

html, body {
        height: 100%;
        width: 100%;
    }

    div {
        width: 50%;
        height: 50%;
        float: left;
        position: relative;
        transition: width 2s, height 4s;
        transition-delay: 2s;
    }
    div:hover {
            width: 100%;
            height: 100%}

    div:nth-of-type(1) {
        background: #ccc;
    }

    div:nth-of-type(2) {
        background: #bbb;
        border-left: 1px solid #f00;
    }

    div:nth-of-type(3) {
        background: #aaa;
        border-top: 1px solid #f00;
    }
    div:nth-of-type(4) {
        background: #ddd;
        border-top: 1px solid #f00;
        border-left: 1px solid #f00;
    }

    <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </body>

Ответы [ 2 ]

1 голос
/ 20 апреля 2020

Вы ищете эффект, похожий на этот: 

body {
  height: 200px;
  width: 400px;
}
body {
  border: 1px solid black;
}

div {
  display: inline-block;
  width: 49%;
  height: 25%;
  position: relative;
  transition: width 2s, height 4s;
  transition-delay: 2s;
}

div:hover {
  z-index: 100;
  width: 100%;
  height: 100%;
}

div:nth-of-type(1) {
  background: #eee;
}

div:nth-of-type(2) {
  background: #bbb;
}

div:nth-of-type(3) {
  background: #999;
}

div:nth-of-type(4) {
  background: #666;
}
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
0 голосов
/ 20 апреля 2020

Если я правильно понял вашу проблему, вы ищете вариант наведения, который будет отбрасывать теневой слой поверх всего остального?

Если это так, есть простой прием, используя transform: scale(1) и команда box-shadow. Лично я предпочитаю вставлять все изображения в отдельные DIV и назначать им класс.

Попробуйте это:

https://codepen.io/meta704/pen/LYpREjK

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...