Enlarge Images CSS3

Enlarge-Images-CSS3.markdown

Enlarge Images CSS3

Just a dumb little dead-simple photo enlarger thingy, done purely with CSS3/LESS.

A Pen by Dave Lunny on CodePen.

License.

index.html

<div class="box">
</div>

<div class="box">
</div>

<div class="box">
</div>

<div class="box">
</div>

style.less

html, body {
  @col1: #0dc;
  @col2: #0ac;
  margin: 0; 
  padding: 0;
  width: 100%;
  height: 100%;
background: -webkit-linear-gradient(@col1 0%, @col2 100%);
background: -moz-linear-gradient(@col1 0%, @col2 100%);
background: -o-linear-gradient(@col1 0%, @col2 100%);
background: linear-gradient(@col1 0%, @col2 100%);
}

.box{
  box-sizing: border-box;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  width: 24%;
  height: 300px;
  float: left;
  margin-top: 50px;
  margin-left: 0.5%;
  margin-right: 0.5%;
  cursor: pointer;
  box-shadow: -1px -2px 12px 1px rgba( 50, 50, 50, 0.28 );
  transition: all 0.35s ease-in-out;
  z-index: 100;
  
  &:hover{
     box-shadow: -1px -2px 14px 1px rgba( 50, 50, 50, 0.69 );
        transform: scale(1.01);
      z-index: 200;
  }
  &:active{
    transform: scale(1.25);
    box-shadow: 0px 0px 100px 15px rgba( 10, 10, 10, 0.85 );
    z-index: 300;
  }
  
  
 
  &:nth-of-type(1){
    background-image: url('http://a.dilcdn.com/bl/wp-content/uploads/sites/8/2012/08/02-.jpg');
  }
  &:nth-of-type(2){
    background-image: url('http://i.ytimg.com/vi/pzPxhaYQQK8/hqdefault.jpg');
  }
  &:nth-of-type(3){
    background-image: url('http://albumofawesomeness.com/wp-content/uploads/2013/01/Pug-Birthday.jpg');
  }
  
  &:nth-of-type(4){
    background-image: url('https://s-media-cache-ak0.pinimg.com/236x/a5/b2/6d/a5b26dd651fce1cee23fe35e88e9059c.jpg');
  }
  
}