Я хочу показать div с цветом фона и внутри <p> с заголовком. При наведении на него должен появиться <p> (текст), а первый исчезает (заголовок). Я играл со свойством z-index, но не могу этого достичь:

Это мой код:

.magigDiv {
  width: 50%;
  float: left;
  background-color: forestgreen;
  padding: 10px;
  border-radius: 25px;
  height: 150px;
  border: 1px double black;
  opacity: 0.5;
  position: relative;
}

.text1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="magigDiv">
  <p class="text1" style="width: 100%;z-index:100;height:150px;position:absolute;">
    LOREM IPSUM
  </p>
  <p style="z-index: -1;width: 100%; height:150px;position:absolute;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </p>
</div>
0
Elias MP 19 Окт 2017 в 11:34

3 ответа

Лучший ответ

Вы можете попробовать что-то простое, установив opacity от 0 до 1. Проверьте приведенный ниже фрагмент для справки.

.magigDiv {
  width: 50%;
  float: left;
  background-color: forestgreen;
  padding: 10px;
  border-radius: 25px;
  min-height: 150px;
  border: 1px double black;
  opacity: 0.5;
  position: relative;  
}

.title {
  text-align: center;
  opacity: 1;
  transition: all 0.3s ease;
}

.text {
  opacity: 0;
  transition: all 0.3s ease;
}

.title:hover+.text {
  opacity: 1;
}
.title:hover{
  opacity:0;
}
<div class="magigDiv">
  <p class="title">
    LOREM IPSUM
  </p>
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>
1
RaJesh RiJo 19 Окт 2017 в 09:52

Я думаю, что вам нужно:

1) назначить фиксированную высоту <div>

2) используйте position: relative для <div> и position: absolute для обоих <p>

3) вам нужно использовать JQuery, чтобы сдвинуть первый <p> так, чтобы отображался второй

0
rmoledov 19 Окт 2017 в 08:46

Сначала добавьте эту CSS:

div p:last-child:hover { top:-50px; position:relative; background-color:green;}

И измените несколько свойств в линейном стиле, который вы применили, как показано ниже:

<div style="width: 40%; float:left; background-color: green;padding: 10px; position:relative;">

    <p style="z-index: 2;width: 100%;height:100%;z-index:100; text-align: center; vertical-align: middle;">
        LA EMPRESA
    </p>
    <p style="z-index: 3;width: 100%;height:100%;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum
    </p>
</div>
0
Hanif 19 Окт 2017 в 09:04