sample

by Gopinath Kaliappan

HTML

<div class="list-wrapper">
  <div class="cards-list">
    <div class="card">
      <div class="card-content">
        <div class="banner-holder">
          <div class="banner" data-height="20vh" data-height-expanded="45vh" style="background-image: url('https://biznology.com/wp-content/uploads/2014/01/google-images-143148_1280-1.png')"></div>
        </div>
        <div class="container-fluid content-holder">
          <div class="inner-content" data-position="20vh" data-position-expanded="40vh">
            <div class="info-holder">
              <div class="date-category">Apr 28 2018 / Category</div>
              <div class="like-wrapper btn-liked">
                <i class="fa fa-heart fa-lg"></i> <span class="count">6</span>
              </div>
              <div class="bookmark-wrapper btn-bookmark"><i class="fa fa-bookmark-o fa-lg"></i></div>
            </div>
            <h2 class="title">Nibh Tellus Pharetra Fusce</h2>
            <div class="description">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
            </div>
          </div>
        </div>
        <div class="close-btn"><i class="fa fa-times"></i></div>
      </div>
    </div>
  </div>
</div>

CSS

*.lock {
  overflow: hidden;
}
.list-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
.cards-list {
  position: relative;
  padding: 15px 15px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* For iPhone X */
  max-width: 400px;
  margin: auto;
}
.card {
  position: relative;
  height: 45vh;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
  opacity: 1;
  margin-bottom: 40px;
}
.card.open {
  border-radius: 0;
}
.card.hover,
.card:hover {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.card-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  overflow: hidden;
  transition: border-radius 0.15s ease;
  border-radius: 20px;
  cursor: pointer;
}
.card.open .card-content {
  z-index: 500 !important;
  background: #fff;
  border-radius: 0px;
  cursor: default;
}
.banner-holder {
  position: absolute;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner {
  position: relative;
  height: 20vh;
  width: 100%;
  padding: 15px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  overflow: hidden;
  z-index: 1;
}
.card.open .banner {
  height: 45vh;
  border-radius: 0;
}
.content-holder {
  max-width: 600px;
  padding: 0;
  z-index: 1;
  height: 100%;
  background-color: transparent;
  overflow: hidden;
  position: relative;
}
.card.open .content-holder {
  overflow: auto;
}
.inner-content {
  top: 20vh;
  padding: 20px;
  position: relative;
  background-color: #fff;
}
.card.open .inner-content {
  top: 40vh;
  padding-bottom: env(safe-area-inset-bottom); /* for iPhone X */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.info-holder {
  display: flex;
  align-items:...