CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap-3
Kenzo_Gilead
Kenzo_Gilead

Reputation: 2439

Hover shows lower div

I Want to show a div with a background color and inside it a <p> with a title. In hover over it a <p> (text) should be appear and the first one dissapears(title). I was playing with z-index property but I can´t achieve it:

This is my code:

.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>

Upvotes: 0

Views: 48

Answers (3)

RaJesh RiJo
RaJesh RiJo

Reputation: 4400

You can try something simple with setting opacity 0 to 1. check below snippet for reference. 

.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>

Upvotes: 1

Hanif
Hanif

Reputation: 3795

Add this css first:

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

And change few properties in inline style you applied like following:

<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>

Upvotes: 0

rmoledov
rmoledov

Reputation: 11

I think you need to:

1) assign a fixed height to <div>

2) use position: relative for <div> and position: absolute for both <p>

3) you need to use JQuery to slide up first <p> so that the second one is shown

Upvotes: 0

Related Questions