Hover scalable background effect - part 3

Hover scalable background effect - part 3.markdown

Hover scalable background effect - part 3

A Pen by Miron Machnicki on CodePen.

License.

index.html

.container
  a.item(href='http:nba.com')
    .item-header
      .item-image(
        style='background-image: url(http://lorempixel.com/400/200/food/)'
      )
    .item-content
      strong Lorem ipsum
      p Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

style.css

/// COMMON CLASSES

.zoom-background {
  position: absolute; top: 0; left: 0;
  height: 100%; width: 100%;
  background-size: cover; background-position: 50% 50%;
  transition: transform 0.3s ease-in-out;

  &:hover {
    @extend .zoom-background-hover;
  }
}

.zoom-background-hover {
  transform: scale(1.05);
  transition-duration: 0.5s;
}

//////

@import url(https://fonts.googleapis.com/css?family=Dosis:300,700);

.container {
  text-align: center;
  padding: 20px;
  background-color: #efefef;
  height: 100%;
}

.item {
  display: inline-block;
  width: 300px;
  margin: 0 auto;
  background: #fff;
  font-family: 'Dosis', sans-serif;
  text-decoration: none;
  
  &:hover {
    .item-image {
      @extend .zoom-background-hover;
    }
    
    strong {
      text-decoration: underline;
    }
  }
}

.item-header {
  display: block;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.item-image {
  @extend .zoom-background;
}

.item-content {
  padding: 10px;
  text-align: left;
  
  strong {
    display: block;
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 4px;
    color: black;
  }
  
  p {
    color: #939393;
    font-weight: 300;
  }
}