CodePen

HTML

            
              <div class="showcase">
  <div class="option1 option">1</div>
  <div class="option2 option">2</div>
  <div class="option3 option">3</div>
  <div class="option4 option">4</div>
  <div class="photo"></div>
</div>
            
          
!
via HTML Inspector

CSS

            
              .showcase{
  width:200px;
  height:300px;
  position:relative;

}

.photo{
  width:100%;
  height:90%;
  position:absolute;
  top:0;
  background:url('http://farm6.staticflickr.com/5131/5515061601_8451cfab05.jpg');
  background-size:cover;
}
.option{
  width:40px;
  height:20px;
  padding:2px;
  position:absolute;
  bottom:2px;
  border-radius:4px;
  background:#559fc2;
  text-align:center;
  line-height:20px;
  cursor:pointer;
 
}
.option2{left:52px;}
.option3{left:102px;}
.option4{left:152px;}

.option1:hover ~ .photo{
background:url('http://farm6.staticflickr.com/5131/5515061601_8451cfab05.jpg');background-size:cover;
}
.option2:hover ~ .photo{
background:url('http://farm4.staticflickr.com/3532/3979318317_946aa00756.jpg');background-size:cover;
}
.option3:hover ~ .photo{
background:url('http://farm4.staticflickr.com/3490/3980085024_0e101b06f1.jpg');background-size:cover;
}
.option4:hover ~ .photo{
background:url('http://farm6.staticflickr.com/5133/5515650218_725ed108c2.jpg');background-size:cover;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              //http://css-tricks.com/forums/discussion/23087/portfolio-page-on-wordpress-best-way-to-approach#Item_6
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................