J.Feng J.Feng - 5 months ago 20
HTML Question

How to show hidden text in both direction

.hidden-text {
display: none;
visibility: hidden;
}
.div-hover-item:hover .hidden-text {
display: block;
visibility: visible;
}


I am trying to achieve the function when cursor hover around the text , the hidden text will be show up. Here is the code, and it actually works.

Now when you move the cursor around the text, the hidden text will be show up in the top direction, but i want to change the direction to the bot so it means when you hover on the text, the hidden text will be come down, not top.

before after Maybe my describe is not clear, so here i will tell more details. in the pictures i upload is the hover effect work now. What i want to change is to make the container and hidden text go down of the pictures. it just like write down something under the VR photo title. but it should be out of the pictures.

Answer

I'm not sure I understood, maybe you want something like this?

body {
  margin: 0
}

img {
  margin: 0;
  position: relative;
  z-index: 10;
}

p {
  position: relative;
  padding: 5px;
  margin: 0;
  z-index: 10;
  background: gray;
}

.hidden-text {
  z-index: 1;
  position: relative;
  top: -50px;
  transition: all 1s ease;
}

.div-hover-item {
  width: 400px;
  margin-top: -5px;
}

.div-hover-item:hover .hidden-text {
  display: block;
  top: 0;
}
<img src="http://placehold.it/400x200">
<div class="div-hover-item">
  <p>Lorem ipsum dolor sit amet</p>
  <p class="hidden-text">consectetur adipisicing eli</p>
</div>

UPDATE

On click with jQuery:

$(".div-hover-item").click(function() {
  if ($(".hidden-text").hasClass("show")) {
    $(".hidden-text").removeClass("show");
  } else
    $(".hidden-text").addClass("show");
});
body {
  margin: 0
}

img {
  margin: 0;
  position: relative;
  z-index: 10;
}

p {
  position: relative;
  padding: 5px;
  margin: 0;
  z-index: 10;
  background: gray;
}

.hidden-text {
  z-index: 1;
  position: relative;
  top: -50px;
  transition: all 1s ease;
}

.div-hover-item {
  width: 400px;
  margin-top: -5px;
}

.hidden-text.show {
  display: block;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/400x200">
<div class="div-hover-item">
  <p>Lorem ipsum dolor sit amet</p>
  <p class="hidden-text">consectetur adipisicing eli</p>
</div>

Comments