How to slide a div to fill out another div?

Question

I'd like to make a news box which starts with a title on a background image but, when user hovers mouse over it, the news title and description fill over the background image, like news blocks here.

Here is what I've hacked together:

$(document).ready(function() {
  $('.thumb-box').hover(function() {
    $(this).find('.news-item').removeClass('only-title')
    $(this).find('.news-item').addClass('title-and-desc');
    $(this).find('.desc-on-image').removeClass('hidden');
  }, function() {
    $(this).find('.news-item').removeClass('title-and-desc');
    $(this).find('.news-item').addClass('only-title');
    $(this).find('.desc-on-image').addClass('hidden');
  });
});

.image-container {
  position: relative;
  text-align: center;
  color: white;
}

.thumb-box {
  width: 300px;
  height: 240px;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.only-title {
  color: black;
  background: rgba(255, 255, 255, .9);
  margin: 0;
  padding: 1em 1em 1em 1em;
  cursor: pointer;
}

.title-and-desc {
  color: black;
  background: rgba(255, 255, 255, .9);
  margin: 0;
  padding: 1em 1em 1em 1em;
  cursor: pointer;
  animation-name: draw-up;
  animation-duration: 1s;
}

@keyframes draw-up {
  from {
    padding: 1em 1em 1em 1em;
  }
  to {
    padding: 1em 1em 8em 1em;
  }
}

.clickable {
  cursor: pointer;
}

.news-title {
  color: black;
}

.news-title a {
  color: black;
}

.news-title a:hover {
  color: black;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumb-box img-responsive" style="background-image: url(/path/to/photo">
  <div class="news-item only-title">
    <a class="news-title" href="/article/{{$a.Slug}}">
      <h4><strong> {{$a.Title}} </strong> </h4>
      <div class="desc-on-image hidden">
        {{$a.Teaser}} ...
      </div>
    </a>
  </div>
</div>

The problem is two folds:

1. It is kind of jittery. The boxes jump a bit when mouse come on them from certain angles.

2. The overlaying div jumps down as soon as it slides up.

I'm wondering how can I fix these, or how to have a more robust solution to do the same function?

Answer 1

Pure css solution

.news-container{
  overflow: hidden;
  padding: 10px;
}

.news-item{
  position: relative;
  width: 220px;
  height: 240px;
  float: left;
  background-size: cover;
  overflow: hidden;
  margin: 10px;
}

.news-item:after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  z-index: 0;
  opacity: 0;
  transition: 0.7s;
}

.news-item > img{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.news-description{
  position: absolute;
  width: 100%;
  height: 100%;
  top: -60px; /* this sets the visible part's height */
  margin-top: 100%;
  z-index: 1;
  transition: 0.3s;
  background: rgba(255,255,255,0.8);
}

.news-description h5{
  display: block;
  height: 80px; /* this is the hight of the title */
  overflow: hidden;
  padding: 10px;
  margin: 0;
  font-weight: bold;
}

.news-description p{
  padding: 10px;
  font-size: 14px;
}

.news-item:hover .news-description{
  top: 0;
  margin-top: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="news-container">

  <div class="news-item" style="background-image: url(https://picsum.photos/200/360/?random)">
    <div class="news-description">
      <h5>News One</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis laoreet sapien ac auctor.</p>
    </div>
  </div>
  
  <div class="news-item" style="background-image: url(https://picsum.photos/200/400/?random)">
    <div class="news-description">
      <h5>News Two With A Slightly Longer Title</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis laoreet sapien ac auctor.</p>
    </div>
  </div>
  
  <div class="news-item">
    <img src="https://picsum.photos/220/400/?random)" alt="" />
    <div class="news-description">
      <h5>News Item With img Tag</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis laoreet sapien ac auctor.</p>
    </div>
  </div>
</div>

EDIT

Added images to .news-item as an inline css style. In the stylesheet also added background-size: cover; for .news-item.

Added img tag inside .news-item and a corresponding css rules as another way of adding images.

Answer 2

You can simplify your code by simply using CSS transition.

Here is an example where you can adjust easily the CSS property to have the needed effect.

.image-container {
  position: relative;
  text-align: center;
  color: white;
}

.thumb-box {
  width: 300px;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  position:relative;
  overflow:hidden;
}

.only-title {
  color: black;
  background: rgba(255, 255, 255, .9);
  margin: 0;
  padding: 1em 1em 1em 1em;
  cursor: pointer;
  position:absolute;
  transition:1s;
  top:60%;
  height:100%;
  left:0;
  right:0;
}
.thumb-box:hover .only-title {
  top:0;
}

<div class="thumb-box img-responsive" style="background-image: url(https://lorempixel.com/400/200/)">
  <div class="news-item only-title">
    <a class="news-title" href="#">
      <h4><strong> title</strong> </h4>
      <div class="desc-on-image hidden">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare placerat placerat. Sed id nulla odio. Morbi lacinia ultrices velit, faucibus commodo torto
      </div>
    </a>
  </div>
</div>

Answer 3

Relative positioning, overflow: hidden, Absolute Positioning and transition

This can be implemented without using javascript or Jquery.

The outer div container is given position: relative and overflow: hidden.

So, whatever is inside the container, and has more width or more height than container or maybe placed outside the container relatively, then it has overflown the container and stays hidden.

Now, we use position: absolute to place the slider absolutely with some distance away from top i.e,100px. So, now it overflows it's parent div container. But it is hidden because of overflow: hidden on its parent div container.

Now, using the css child combinator, whenever the parent div container is hovered, we slide the slider up using transition.

.container{
  position:relative;
  background-image:url(https://picsum.photos/400);
  height:200px;
  width:300px;
  cursor:pointer;
  overflow:hidden;
}
.slider{
  position:absolute;
  top:100px;
  width:100%;
  height:200px;
  background:rgba(255,255,255,0.7);
  transition: top 1s;
}
.container:hover > .slider{
  top:0;
}

<div class='container'>
  <div class='slider'>
    <h1>I will Slide</h1>
    <p>My content</p>
    <p>My content</p>
    <p>My content</p>
  </div>
</div>