Diagonal Sliding Hover Transition

Introduction

Today I want to create a hover transition that could be used for image links. A good hover effect can save space on showing more information until hover, while also creating an enticing and interesting effect. The diagonal effect is achieved through positioning a triangle attached to a long rectangle at the right of the image out of sight and transitioning it left through the image so it looks like it is filling up diagonally. This is a CSS only effect.

HTML

The hover effect is split into 4 parts. The link and the image are pretty straightforward. The overlay is the shape that will slide over the image, and the description is the information that fades in as you hover.

<div class="wrapper">
  <a class="link" href="http://www.sintel.org/"></a>
  <div class="overlay">
    <div class="arrow-left"></div>
    <div class="rectangle"></div>
  </div>

  <div class="description">
    <h3>Project</h3>
    <p>Sintel is a short computer animated film by the Blender Institute, part of the Blender Foundation. See more at Sintel.org</p>
  </div>
  <img src="sintel-bamboo.jpg">
</div>

CSS

The css is pretty simple. The diagonal shape is made from CSS triangles attached to a rectangle. The description fades in at two different speeds to match the sliding of the shape.

/* Hover Transition */

.wrapper {
  overflow: hidden;
  display: inline-block;
  position: relative;
  height: 200px;
}
  .wrapper:hover .overlay {
    right: 200px;
  }
  .wrapper:hover .description {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    /* IE 5.5-7 */
    filter: alpha(opacity=100);
    /* Netscape */
    -moz-opacity: 1;
    /* Safari 1.x */
    -khtml-opacity: 1;
    /* Modern browsers */
    opacity: 1;

    transition: 1s ease-in;
    -webkit-transition: 1s ease-in;
  }

  .wrapper .overlay {
    display: block;
    position: absolute;
    height: 200px;
    width: 100%;
    top: 0;
    right: -100%;

    transition: .4s ease-out;
    -webkit-transition: .4s ease-out;
  }
    .wrapper .overlay .rectangle,
    .wrapper .overlay .arrow-left {
      position: absolute;
      top: 0;
    }
    .wrapper .overlay .rectangle {
      display: block;
      margin-left: 200px;
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,.95);
    }
    .wrapper .overlay .arrow-left {
      position: relative;
      left: 0;
      width: 0; 
      height: 0; 
      top: 0;
      bottom: 0;

      border-bottom: 200px solid transparent; 
      border-right: 200px solid rgba(255,255,255,.95); 
    }

  .wrapper .description {
    text-align: left;
    position: absolute;
    padding: 30px 50px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #cc6812;

    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* IE 5.5-7 */
    filter: alpha(opacity=0);
    /* Netscape */
    -moz-opacity: 0;
    /* Safari 1.x */
    -khtml-opacity: 0;
    /* Modern browsers */
    opacity: 0;

    transition: .2s ease-out;
    -webkit-transition: .2s ease-out;
  }
    .wrapper .description h3 {
      text-align: center;
      font-size: 20px;
      margin-bottom: 25px;
      font-weight: bold;
    }

  .wrapper .link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: 0;
  }

  .wrapper img {
    vertical-align: bottom;
  }

The post Diagonal Sliding Hover Transition appeared first on webdesigncrowd.com.