UI Media Card

index.pug

.container
  .item-list
    .item.item-1
      .img
        a(href="javascript:;")
          .like
            i(class="fa fa-heart" aria-hidden="true")
        .img-content
      .social
        a(href="javascript:;")
          .fb
            i(class="fa fa-facebook" aria-hidden="true")
        a(href="javascript:;")
          .ig
            i(class="fa fa-instagram" aria-hidden="true")
        a(href="javascript:;")
          .tw
            i(class="fa fa-twitter" aria-hidden="true")
      .text-container
        h2.title Tom Hanks
        .content
          p Born on July 9, 1956, in Concord, California, actor Tom Hanks began performing with the Great Lakes Shakespeare Festival in 1977, later moving to New York City. He starred in the television sitcom Bosom Buddies, but became far more known when he starred in the Ron Howard film Splash. He went on to star in many more popular and acclaimed movies, including Big, Forrest Gump and Cast Away, en route to becoming one of the most powerful and well-respected actors in Hollywood.
        .readmore
          h3 show more

      
      
       
      

script.js

$(function(){
  var getTxt = $('.content p').text();
  var realTxt = [getTxt]
  var textCol = [getTxt]
  var wordsCount = textCol[0].split(' ').length;
  var words = textCol[0].split(' ');
  var wordsLimit = 40;
  var limitCol;
  
  $('.readmore h3').click(function(){
  if ( $(this).text() === "show more") {
      $('.content p').text(realTxt.join(' '));
      $('.content').addClass('scroll');
      $(this).text('show less');
      $('.item').addClass('showfull');
    } else {
      $('.content p').text(limitCol);
       $(this).text('show more');
      $('.item').removeClass('showfull');
    }
});
  
  if (wordsLimit <= wordsCount) {
    words.splice(wordsLimit, wordsCount - wordsLimit);
    words = words.join(' ');
    $('.content p').text(words + '...');
    limitCol = $('.content p').text();
  }
  
  $('.like').click(function(){
    $(this).toggleClass('clicked');
  });
  
  
  
  
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.sass

$white: #fff
$fb-color: #3b5998
$tw-color: #0084b4
$ig-color: #cd486b
$radius: 10px
$heart-gray: #a37f7f

*
  margin: 0
  padding: 0
  border: 0
  box-sizing: border-box
  transition: 0.2s

body
  background: linear-gradient(to right, #8e9eab, #eef2f3)
  height: 100vh
  display: flex
  justify-content: center
  align-items: center
  font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif
  letter-spacing: .03em
  
a
  text-decoration: none
  
i
  letter-spacing: 0
  
.scroll
  overflow: scroll !important
  
.item
  width: 400px
  height: 500px
  background: $white
  position: relative
  box-shadow: -15px 7px 30px rgba(0,0,0,.2)
  overflow: hidden
  border-radius: $radius

  .img
    width: 100%
    height: 50%
    background: black
    border-radius: $radius $radius 0 0
    position: absolute
    z-index: 5
    overflow: hidden

  .img-content
    width: 100%
    height: 100%
    transition: 0 !important
    background:
      image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/26th_Tokyo_International_Film_Festival-_Tom_Hanks_from_Captain_Phillips_%2814970103713%29.jpg/640px-26th_Tokyo_International_Film_Festival-_Tom_Hanks_from_Captain_Phillips_%2814970103713%29.jpg)
      size: cover
      position: top center
      repeat: no-repeat
      
  &.showfull .text-container
    height: 90%

  &.showfull .content
    height: 78%

  &.showfull .social
    top: 25px

  &.showfull .img-content
    transform: scale(1.04)
    filter: blur(5px)

  &.showfull .like
    margin-top: 100px

  .text-container
    width: 100%
    height: 55%
    background: $white
    border-radius: $radius
    position: absolute
    bottom: 0
    z-index: 10
    box-shadow: -3px -10px 10px rgba(0, 0, 0, 0.3)
    overflow: hidden
    padding: 30px 20px 20px 20px
    display: flex
    flex-direction: column

  .content
    height: 63%
    margin-bottom: 10px
    overflow: hidden

  .social
    width: 100%
    height: 50px
    position: absolute
    z-index: 15
    top: 40%
    display: flex
    justify-content: flex-end

  h2
    margin-bottom: 10px
    margin-top: 10px

  .social div
    width: 50px
    height: 50px
    background: green
    margin: 0 5px
    border-radius: 50%
    cursor: pointer
    box-shadow: 0 0 10px rgba(0,0,0,.7)
    display: flex
    justify-content: center
    align-items: center
    color: $white
    &:hover
      transform: scale(1.1)


  .social a:last-child
    margin-right: 20px

  a .tw
    background-color: $tw-color

  a .fb
    background-color: $fb-color

  a .ig
    background-color: $ig-color

  .like
    position: absolute
    width: 30px
    height: 30px
    background: $heart-gray
    border-radius: 50%
    color: #fff
    right: 30px
    top: 20px
    display: flex
    justify-content: center
    align-items: center
    z-index: 10
    &:hover
      transform: scale(1.1)

  .like i
    font-size: 15px

  .like.clicked
    background: #ffcece

  .like.clicked i 
    color: #e60026


  .readmore
    display: flex
    padding-bottom: 5px

    h3
      display: block
      padding: 10px 15px
      border-radius: 40px
      border: 1px solid
      cursor: pointer
      font-size: 10px
      margin-bottom: 5px
  
  

  
  
  
 
    

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

ui-media-card.markdown

UI Media Card

A Pen by Kumpon Sotsukpiam on CodePen.

License.