Hover Button Effect - Grow and Text Slide

Hover-Button-Effect---Grow-and-Text-Slide.markdown

Hover Button Effect - Grow and Text Slide

Text slides up as you hover over the button and the image grows.

A Pen by ezos86 on CodePen.

License.

index.html

<div class="button">
  <div class="btn-content">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/2000px-Tux.svg.png" alt="linux" />
    <p>Linux</p>
  </div>
</div>

style.scss

@import "compass/css3";
body{
  margin-top:20px;
  margin-left:20px;
}
.button{
  width:175px;
  height:100px;
  background-color:#ccc;
  overflow:hidden;
  @include transition(all 0.3s);
  .btn-content{
    text-align:center;
    @include transition(all 0.3s);
  }
  img{
      width:30%;
      padding-top:20px;
      @include transition(all 0.3s);
  }
  p{
    margin-top:60px;
    @include transition(all 0.3s);
  }
  &:hover{
    cursor:pointer;
    background-color:#ddd;
    img{
      padding-top:5px;
      width:35%;
    }
    p{
      margin-top:0px;
    }
  }
}