PicDiv

by Koubenec

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  
  
 <div class="item">
    <div class="item-billboard">
      <span class="caption">View Document</span>
    </div>
    <div class="item-detail">
      <div class="tophalfdiv" onclick = "top.location.href='http://www.google.com'"><span id="detailtop">Download PDF</span></div><div class="btmhalfdiv"><span class="detailbottom">View HTML</span></div>
    </div>
</div>

</body>
</html>

CSS

.item {
  position: relative;
  width: 130px;
  overflow: hidden;
  border: 0px solid #ccc;
  float: left;
}
  .item {
    height: 130px;
  }
  
  .item a {
    text-decoration: none;
    color: #000;
  }
  
  .item-billboard, .item-detail {
    padding: 10px;
    height: 180px;
  }
  
  .item-billboard {
    margin-top: 0;
    background: #DC2D1A;
  }
    .item-billboard h3 {
      font-size: 13px;
      font-weight: bold;
      color: #262626;
      font-family: "Open Sans", arial, sans-serif;
    }
  
  .item-detail {
    background: #ececec;
  }

.caption {
  position: absolute;
  bottom: 10px;
  left: 15px;
  color: #fff;
}

#detailtop {
  display: block;
  height: 65px;
  background-color: #000;
  position: relative;
  top: 25px;
  left: 15px;
  color: #DC2D1A;
}

.detailbottom {
  position: relative;
  top: 25px;
  left: 23px;
  color: #fff;
}

.tophalfdiv {
  width: 130px;
  height: 65px;
  background-color: #FFE0E8;
  margin-left: -10px;
  margin-top: -10px;
  border-bottom: 1px solid #fff;
  color: #DC2D1A;
}

.tophalfdiv:hover {
  width: 130px;
  height: 65px;
  background-color: #DC2D1A;
  margin-left: -10px;
  margin-top: -10px;
  border-bottom: 1px solid #fff;
  cursor: pointer;
    color: #FFE0E8;
}

.btmhalfdiv {
  width: 130px;
  height: 65px;
  background-color: #FFE0E8;
  margin-left: -10px;
  margin-bottom: -10px;
  color: #DC2D1A;
}

.btmhalfdiv:hover {
  width: 130px;
  height: 65px;
  background-color: #DC2D1A;
  margin-left: -10px;
  margin-bottom: -10px;
  border-bottom: 1px solid #fff;
  cursor: pointer;
}

JavaScript

(function($){ // remap '$' to jQuery
$(function(){ // document ready
    
  $('.item').on('mouseenter mouseleave',function(e){
    $(this).stop().animate({scrollTop: e.type=='mouseenter'?200:0 },400);    
  });

});
})(jQuery);