Box mouseover effects

css boxes with mouseover effects

by Vishnuprasad ps

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="pro-col">
<div class="row">
<div class="container">

<div class="col-sm-3 col-xs-6">
<div class="pro-box">
<a href="#">
<figure><img src="https://placeholdit.co//i/640x400?bg=eeeeee" class="img-responsive"></figure>
<aside>Some Text</aside>
<div class="pro-icon"><i><img src="https://image.flaticon.com/icons/svg/66/66831.svg"></i></div>
</a>
</div>
</div>

<div class="col-sm-3 col-xs-6">
<div class="pro-box">
<a href="#">
<figure><img src="https://placeholdit.co//i/640x400?bg=eeeeee" class="img-responsive"></figure>
<aside>Some Text</aside>
<div class="pro-icon"><i><img src="https://image.flaticon.com/icons/svg/66/66831.svg"></i></div>
</a>
</div>
</div>

<div class="col-sm-3 col-xs-6">
<div class="pro-box">
<a href="#">
<figure><img src="https://placeholdit.co//i/640x400?bg=eeeeee" class="img-responsive"></figure>
<aside>Some Text</aside>
<div class="pro-icon"><i><img src="https://image.flaticon.com/icons/svg/66/66831.svg"></i></div>
</a>
</div>
</div>

<div class="col-sm-3 col-xs-6">
<div class="pro-box">
<a href="#">
<figure><img src="https://placeholdit.co//i/640x400?bg=eeeeee" class="img-responsive"></figure>
<aside>Some Text</aside>
<div class="pro-icon"><i><img src="https://image.flaticon.com/icons/svg/66/66831.svg"></i></div>
</a>
</div>
</div>

<div class="col-sm-3 col-xs-6">
<div class="pro-box">
<a href="#">
<figure><img src="https://placeholdit.co//i/640x400?bg=eeeeee" class="img-responsive"></figure>
<aside>Some Text</aside>
<div class="pro-icon"><i><img src="https://image.flaticon.com/icons/svg/66/66831.svg"></i></div>
</a>
</div>
</div>

<div...

CSS

.pro-col {
  padding-top:40px;
  padding-bottom:40px;
}
.pro-col .row {
  margin-right:-10px;
  margin-left:-10px;
}
.pro-col .row .col-sm-3 {
  padding-right:10px;
  padding-left:10px;
}
.pro-col .pro-box {
  position:relative;
  margin-bottom:20px;
  transition: 0.4s ease;
  -webkit-transition: 0.4s ease;
  -moz-transition: 0.4s ease;
  -o-transition: 0.4s ease;
}
.pro-col .pro-box:hover {
  box-shadow: 1px 2px 1px 1px rgba(0,0,0,0.1);
}
.pro-col .pro-box figure {
  overflow:hidden;
}
.pro-col .pro-box figure img {
      -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    transition: all 400ms ease;
}
.pro-col .pro-box:hover figure img {
  -webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
.pro-col .pro-box aside {
  width:100%;
  display: inline-block;
  background: #000;
  color:#fff;
  padding: 8px 10px;
  transition: 0.4s ease;
  -webkit-transition: 0.4s ease;
  -moz-transition: 0.4s ease;
  -o-transition: 0.4s ease;
}
.pro-col .pro-box:hover aside {
  background: #333;
}
.pro-col .pro-box .pro-icon {
  position:absolute;
  right:0;
  bottom:0;
  z-index:10;
  font-size: 0;
}
.pro-col .pro-box .pro-icon i {
  position: relative;
  display: inline-block;
  padding: 18px 15px 12px 50px;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  text-align:center
}

.pro-col .pro-box .pro-icon i:after {
  content: '';
  position: absolute;
  top: 0;
  left: 50px;
  width: 100%;
  height: 100%;
  background: #ffc50b;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  transform: skew(-30deg);
  z-index: -1;
  transition: 0.4s ease;
  -webkit-transition: 0.4s ease;
  -moz-transition: 0.4s ease;
  -o-transition: 0.4s ease;
}
.pro-col .pro-box:hover .pro-icon i:after {
  background:#eee
}
.pro-col .pro-box .pro-icon i img {
  max-width:20px;
 ...