How to move div up to show another div in CSS?

user_11647728 0
Viewed 224

I have a div (div_one) with an image. Under this div, I have another, smaller div (div_two). I would like, after hover, resize (smaller height) this div_one (with the picture) and show this div_two, which is under the image. But it doesn't work as I want to. The images jump :/

.images {
  background: url('https://www.lokeshdhakar.com/projects/lightbox2/images/image-3.jpg');
  height: 200px;
  width: 150px;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.images:hover {
  height: 150px;
  width: 100px;
}

img {
  height: 200px;
  width: 150px;
}

.info {
  display: none --> I want this to show after hover
}
<div class="images">
  <div class="info">lorem ipsum</div>
</div>

Any ideas how it can work?

css html
3 Answers

  1. If you want to show it in a better way, you can move it outside the parent element.

  2. .images:hover + .info will select the other element. I prefer to use the opacity change way.

  3. transition property on the non hovered states will help the presentation i.e. the images won't jump.

.images {
  background: url('https://www.lokeshdhakar.com/projects/lightbox2/images/image-3.jpg');
  height: 200px;
  width: 150px;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: flex-end;
  transition: all ease 1s;
}

.images:hover {
  height: 150px;
  width: 100px;
}

img {
  height: 200px;
  width: 150px;
}

.info {
  opacity: 0;
  transition: all ease 1s;
}

.images:hover+.info {
  opacity: 1;
}
<div class="images">
</div>
<div class="info">lorem ipsum</div>

user_48139130

I would use 3 items :

  1. a container in which the two others items are
  2. an item which will be display on top of the other one and be animated
  3. an item in which I put the text, displayed under the previous one

Using z-index, you can display the two block as layers.

And using transitions, you can create a simple animation effect.

here is a fonctionning exemple :

.container {
    display:block;
    width: 150px;
    height: 200px;
    position: relative;
}

.content-hover {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: grey;
    transition: height linear 0.3s;
}

.content-hover:hover {
    height: 50%;
}

.content-under {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 50px;
    padding: 10px;
}
<div class="container">
    <div class="content-hover">
    </div>
    <div class="content-under">
        <p>My hidden text</p>
    </div>
</div>

user_13172490

It will be resolved by overwritting the .info selector when .images selector is hovered.

.images:hover .info {
  display: block;
}

.images:hover .info indicates .info selector when .images selector is hovered.

.images {
  background: url('https://www.lokeshdhakar.com/projects/lightbox2/images/image-3.jpg');
  height: 200px;
  width: 150px;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.images:hover {
  height: 150px;
  width: 100px;
}

img {
  height: 200px;
  width: 150px;
}

.info {
  display: none;
}

.images:hover .info {
  display: block;
}
<div class="images">
  <div class="info">lorem ipsum</div>
</div>

user_82028500
Related