Overlay: svg сдвигает overlay-div, они больше не совпадают

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

У меня есть простой наложение div2 на div1. У div1 есть SVG внутри. Svg подталкивает div2 при наведении указателя мыши, чтобы он не перекрывался. Я хочу, чтобы оба div полностью перекрывались, чтобы svg div1 исчезал под div2.

Надеюсь, кто-нибудь сможет мне помочь.

Вот код:

.div1 {
  width: 500px;
  background-color: #1b1412;
  padding: 20px;
  margin: auto;  
}

.svg {
  width: 500px;
  height: 800px;
  opacity: 0.9;

}

.div2 {
  width: 500px;
  height: 800px;
  margin: auto;
  position: relative;
  margin-top: 8px;
  opacity:  0.0;
  transition-timing-function:  ease;
  transition-delay:  0.5s;
  transition-duration:  0.5s;
  transition-property:  all;
  -moz-transition-duration:  0.5s;
  -o-transition-duration:  0.5s;
  -webkit-transition-duration:  0.5s; 
}

.div2:hover {
  opacity: 1.0;
}

<center>
  <div class = "div1">
  <div class = "svg">
<svg id = "Ebene_1" data-name = "Ebene 1" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 500 500"><defs><style>.cls-1{fill:none;stroke:#5b2322;stroke-miterlimit:10;stroke-width:18px;}.cls-2{font-size:92px;fill:#d6c9c6;font-family:Alter-Inline-Grunge, Alter Inline Grunge;}.cls-3{letter-spacing:0.04em;}.cls-4{letter-spacing:0.06em;}.cls-5{letter-spacing:0.06em;}.cls-6{letter-spacing:0.06em;}.cls-7{letter-spacing:0.04em;}.cls-8{letter-spacing:0.06em;}.cls-9{letter-spacing:0.06em;}.cls-10{letter-spacing:0em;}.cls-11,.cls-13,.cls-14{font-family:Ruthie-Regular, Ruthie;}.cls-12{letter-spacing:0em;}.cls-13{font-size:100px;}.cls-13,.cls-14{fill:#9d6763;}.cls-14{font-size:57px;}</style></defs><title>Prospero's Dream</title><polygon class = "cls-1" points = "311.81 124.73 240.74 42.67 169.67 124.73 98.59 206.78 169.67 288.84 240.74 370.89 311.81 288.84 382.88 206.78 311.81 124.73"/><text class = "cls-2" transform = "translate(75.9 242.72)"><tspan class = "cls-3">P</tspan><tspan class = "cls-4" x = "35.69" y = "0">r</tspan><tspan class = "cls-5" x = "75.71" y = "0">o</tspan><tspan class = "cls-6" x = "112.79" y = "0">s</tspan><tspan class = "cls-7" x = "149.77" y = "0">p</tspan><tspan class = "cls-8" x = "185.47" y = "0">e</tspan><tspan class = "cls-9" x = "222.54" y = "0">r</tspan><tspan class = "cls-10" x = "262.56" y = "0">o</tspan><tspan class = "cls-11" x = "294.3" y = "0">‘</tspan><tspan class = "cls-12" x = "309.75" y = "0">s</tspan></text><text class = "cls-13" transform = "translate(141.29 294.74)">Dream</text><text class = "cls-14" transform = "translate(180.3 173.5)">Lost in</text></svg>
 
  <div class = "div2"> 

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  </div> 
    </div>

html css svg overlay

14.08.2018 23:44

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вместо того, чтобы пытаться перекрыть 2-й div поверх 1-го при наведении курсора, вы можете просто скрыть 1-й div и показать 2-й, чтобы добиться того же эффекта. Фрагмент:

.div1 {
  width: 500px;
  background-color: #1b1412;
  padding: 20px;
  margin: auto;  
}

.svg {
  width: 500px;
  height: 800px;
  opacity: 0.9;
}

.container:hover .svg {
  display: none;
}

.div2 {
  width: 500px;
  height: 800px;
  color: white;
  margin: auto;
  margin-top: 8px;
  transition-timing-function: ease;
  transition-delay:  0.5s;
  transition-duration:  0.5s;
  transition-property:  all;
}

<div class = "container">
<div class = "div1">

<div class = "svg">
<svg id = "Ebene_1" data-name = "Ebene 1" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 500 500"><defs><style>.cls-1{fill:none;stroke:#5b2322;stroke-miterlimit:10;stroke-width:18px;}.cls-2{font-size:92px;fill:#d6c9c6;font-family:Alter-Inline-Grunge, Alter Inline Grunge;}.cls-3{letter-spacing:0.04em;}.cls-4{letter-spacing:0.06em;}.cls-5{letter-spacing:0.06em;}.cls-6{letter-spacing:0.06em;}.cls-7{letter-spacing:0.04em;}.cls-8{letter-spacing:0.06em;}.cls-9{letter-spacing:0.06em;}.cls-10{letter-spacing:0em;}.cls-11,.cls-13,.cls-14{font-family:Ruthie-Regular, Ruthie;}.cls-12{letter-spacing:0em;}.cls-13{font-size:100px;}.cls-13,.cls-14{fill:#9d6763;}.cls-14{font-size:57px;}</style></defs><title>Prospero's Dream</title><polygon class = "cls-1" points = "311.81 124.73 240.74 42.67 169.67 124.73 98.59 206.78 169.67 288.84 240.74 370.89 311.81 288.84 382.88 206.78 311.81 124.73"/><text class = "cls-2" transform = "translate(75.9 242.72)"><tspan class = "cls-3">P</tspan><tspan class = "cls-4" x = "35.69" y = "0">r</tspan><tspan class = "cls-5" x = "75.71" y = "0">o</tspan><tspan class = "cls-6" x = "112.79" y = "0">s</tspan><tspan class = "cls-7" x = "149.77" y = "0">p</tspan><tspan class = "cls-8" x = "185.47" y = "0">e</tspan><tspan class = "cls-9" x = "222.54" y = "0">r</tspan><tspan class = "cls-10" x = "262.56" y = "0">o</tspan><tspan class = "cls-11" x = "294.3" y = "0">‘</tspan><tspan class = "cls-12" x = "309.75" y = "0">s</tspan></text><text class = "cls-13" transform = "translate(141.29 294.74)">Dream</text><text class = "cls-14" transform = "translate(180.3 173.5)">Lost in</text>
</svg>
</div>
 
<div class = "div2"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>

</div>

Спасибо за предложение! Я пробовал это, но 1) div2 застревает под div1, когда я не нахожусь. И 2) при попытке зависнуть постоянно глючит.

— 16.08.2018 16:25

15.08.2018 04:16

Ответ принят как подходящий

Обычный способ добиться идеального перекрытия - использовать свойство position. Чтобы перекрыть два элемента, вы:

Оберните их в родительский элемент, который вы делаете position: relative
Сделайте двух детей position: absolute. Абсолютное позиционирование позволяет позиционировать элементы относительно их ближайшего «расположенного родителя». В этой последней части мы сделали родительскую позицию относительной на шаге 1.
Убедитесь, что они находятся друг над другом, используя top: 0.

Демо:

.container {
  position: relative;
}

.div1 {
  position: absolute;
  top: 0;
  width: 500px;
  height: 800px;
  background-color: #1b1412;
  margin: 0 auto;  
}

.svg {
  width: 100%;
  opacity: 0.9;
}

.div2 {
  position: absolute;
  top: 0;
  width: 500px;
  height: 800px;
  margin-top: 8px;
  opacity:  0.0;
  transition-timing-function:  ease;
  transition-delay:  0.5s;
  transition-duration:  0.5s;
  transition-property:  all;
  -moz-transition-duration:  0.5s;
  -o-transition-duration:  0.5s;
  -webkit-transition-duration:  0.5s; 
}

.div2:hover {
  opacity: 1.0;
}

<div class = "container">

  <div class = "div1">
    <svg id = "Ebene_1" data-name = "Ebene 1" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 500 500"><defs><style>.cls-1{fill:none;stroke:#5b2322;stroke-miterlimit:10;stroke-width:18px;}.cls-2{font-size:92px;fill:#d6c9c6;font-family:Alter-Inline-Grunge, Alter Inline Grunge;}.cls-3{letter-spacing:0.04em;}.cls-4{letter-spacing:0.06em;}.cls-5{letter-spacing:0.06em;}.cls-6{letter-spacing:0.06em;}.cls-7{letter-spacing:0.04em;}.cls-8{letter-spacing:0.06em;}.cls-9{letter-spacing:0.06em;}.cls-10{letter-spacing:0em;}.cls-11,.cls-13,.cls-14{font-family:Ruthie-Regular, Ruthie;}.cls-12{letter-spacing:0em;}.cls-13{font-size:100px;}.cls-13,.cls-14{fill:#9d6763;}.cls-14{font-size:57px;}</style></defs><title>Prospero's Dream</title><polygon class = "cls-1" points = "311.81 124.73 240.74 42.67 169.67 124.73 98.59 206.78 169.67 288.84 240.74 370.89 311.81 288.84 382.88 206.78 311.81 124.73"/><text class = "cls-2" transform = "translate(75.9 242.72)"><tspan class = "cls-3">P</tspan><tspan class = "cls-4" x = "35.69" y = "0">r</tspan><tspan class = "cls-5" x = "75.71" y = "0">o</tspan><tspan class = "cls-6" x = "112.79" y = "0">s</tspan><tspan class = "cls-7" x = "149.77" y = "0">p</tspan><tspan class = "cls-8" x = "185.47" y = "0">e</tspan><tspan class = "cls-9" x = "222.54" y = "0">r</tspan><tspan class = "cls-10" x = "262.56" y = "0">o</tspan><tspan class = "cls-11" x = "294.3" y = "0">‘</tspan><tspan class = "cls-12" x = "309.75" y = "0">s</tspan></text><text class = "cls-13" transform = "translate(141.29 294.74)">Dream</text><text class = "cls-14" transform = "translate(180.3 173.5)">Lost in</text></svg>
  </div>

  <div class = "div2"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>

</div>

Спасибо вам за помощь! Мне пришлось немного повозиться с кодом, но теперь он работает! :-) Единственная проблема, которая у меня сейчас есть: я не могу выровнять по центру весь div, даже если я поставлю еще один div, чтобы туда поместили команду align.

— 16.08.2018 16:27

Использование внешнего контейнера работает. См .: jsfiddle.net/8vs65gaq/3 Или в качестве альтернативы вы можете использовать трюк left + transform: jsfiddle.net/8vs65gaq/1

— 17.08.2018 03:18

Большое спасибо! Внешний контейнер не работал (во всяком случае, я не мог понять как), но второй трюк сработал.

— 20.08.2018 18:21

15.08.2018 13:46