article.card
  header.card__header
    img.card__header--thumb(src="https://static.joellesenne.dev/images/profile.jpg")
  section.card__date
    span.card__date--day 31
    span.card__date--month May
  section.card__body
    h5.card__body--category 
      a(href="#") HTML/CSS
    h1.card__body--title 
      a(href="#") Design Material UI/UX
    h2.card__body--subtitle Animation effect card CSS
    p.card__body--description I had fun at creates an animation in the overview of this card, giving him up with a transition effect. I got inspiration from a tutorial on the web and I meet at best the BEN convention
  footer.card__footer
    span.icon.icon--time 4h
    span.icon.icon--comment
      a(href="#") 1 comments
    

// Variables
$bg-body: #EDEDED;
$bg-card: #FFF;
$bg-date: #EF5A31;
$bg-thumb: #000;
$color: #FFF;
$duration: .3s;

// prefix
@mixin animation($val...) {
  -webkit-animation: $val;
  animation: $val;
}

@mixin transition($val) {
  -webkit-transition: $val;
  transition: $val;
}

@mixin transform($val...) {
	-webkit-transform: $val;
  -ms-transform: $val; //EI-9
  transform: $val;
}

@mixin transition-delay($val) {
  -webkit-transition-delay: $val;
  transition-delay: $val;
}

@mixin scale($val) {
  -webkit-scale: $val;
  scale: $val;
}

// Structure & Animation Card
* {
  box-sizing: border-box;
}
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  
  background-color: $bg-body;
}
.card {
  position: absolute;
  top:50%;
  left: 50%;
  width: 300px;
  //height: auto;
  
  @include transform(translateX(-50%) translateY(-50%));
  background-color: $bg-card;
  box-shadow: 0 0 20px rgba(0,0,0, .1);
  @include transition(box-shadow $duration);
  & a {
    color:inherit;
    text-decoration: none;
  }
  &:hover {
    box-shadow: 0 0 50px rgba(0,0,0, .3);
  }
}
.card__date {
  position: absolute;
  top: 20px;
  right: 20px;
    
  width: 45px;
  height: 45px;
  padding-top: 10px;
    
  color: $color;
  text-align: center;
  line-height: 13px;
  font-weiigyt: bold;
    
  background-color: $bg-date;
  border-radius: 50%;
  &--day{
    display: block;
    font-size: 14px;
  }

  &--month{
    display: block;
    font-size: 10px;
    text-transform: uppercase;
  }
}
.card__header{
  height: 235px;
  overflow: hidden;
  
  background-color: $bg-thumb;
  @include transition(height $duration);

  img{
    display: block;
    width: 100%;
		height: 100%;
		object-fit: cover;
    opacity: 1;
    @include transition(all $duration ease-in-out);
    @include transform(scale(1));
   // @include transform(all $duration ease-in-out);
  }
  .card:hover & img{
    opacity: 0.6;
    @include transform(scale(1.2));
  }
  .card:hover &{
   // width: 370px;
    height: 235px - 145px;
  }  
}
.card__body{
  position: relative;
  padding: 16px;
  height: 185px;
  @include transition(height $duration);

  .card:hover &{ height: calc(185px + 145px); }
}
.card__body--category {
  position: absolute;
  left: 0;
  top: -16px;
  height: 32px;
  padding: 0 16px;
  
  color: $color;
  font-size: 12px;
  line-height: 32px;
  text-transform: uppercase;
  
  background-color: $bg-date;
}
.card__body--title{
  margin: 0;
  padding: 10px 0;

  color: #000;
  font-size: 24px;
  font-weight: bold;

  .card:hover &{
    @include animation(titleBlur $duration);
  }
}
.card__body--subtitle{
  margin: 0;
  padding: 0 0 10px 0;

  font-size: 20px;
  color: #EF5A31;

  .card:hover &{
    @include animation(subtitleBlur $duration);
  }
}
.card__body--description{
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 80px;

  margin: 0;
  padding: 0;
  //padding-top: 50px;

  color: #666C74;
  font-size: 14px;
  line-height: 27px;

  opacity: 0;
  @include transition(opacity $duration - 0.1s); 
  @include transform($duration - 0.1s);
  @include transition-delay(0s);
  @include transform(translateY(20px));

  .card:hover &{
    opacity: 1;
    @include transition-delay(0.1s);
    @include transform(translateY(0));
  }
}
.card__footer{
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;

  font-size: 12px;
  color: #A3A9AB;

  .icon--comment{
    margin-left: 12px;
  }
}

@keyframes titleBlur {
  0%{
    opacity:0.6;
    text-shadow: 0px 5px 5px rgba(0,0,0,0.6);
  }
  100%{
    opacity:1;
    text-shadow: 0px 5px 5px rgba(0,0,0,0);
  }
}

@-webkit-keyframes titleBlur {
  0%{
    opacity:0.6;
    text-shadow: 0px 5px 5px rgba(0,0,0,0.6);
  }
  100%{
    opacity:1;
    text-shadow: 0px 5px 5px rgba(0,0,0,0);
  }
}


@-webkit-keyframes subtitleBlur {
  0%{
    opacity:0.6;
    text-shadow: 0px 5px 5px rgba($color,0.6);
  }
  100%{
    opacity:1;
    text-shadow: 0px 5px 5px rgba($color,0);
  }
}
@keyframes subtitleBlur {
  0%{
    opacity:0.6;
    text-shadow: 0px 5px 5px rgba($color,0.6);
  }
  100%{
    opacity:1;
    text-shadow: 0px 5px 5px rgba($color,0);
  }
}

// Design material – Effect card

// Author Joël Lesenne <https://joellesenne.dev>