<div class="pic-container">
    <img src="http://via.placeholder.com/200x200" class="pic" />
    <img src="http://via.placeholder.com/200x200" class="pic" />
    <img src="http://via.placeholder.com/200x200" class="pic" />
    <a class="pic-caption" href="https://twitter.com/_brunoweb">
          Hi, i'm Bruno =D       
    </a>
</div>
* { box-sizing: border-box; }
body{
    background: #3d4552;
    font-family: arial;
    font-size: 12px;
    color: #fff;
}

a {
  text-decoration: none;
}

img {
    border: 1px solid #d2d2d2;
    padding: 3px;
    box-shadow: 0 0 15px rgba(0,0,0,.1);
}

.pic-container {
    max-width: 210px;
    max-height: 210px;
    margin: 50px;     
}

.pic {
    background: #fff;
    position: absolute;
    transition: all 0.2s ease;
    backface-visibility:hidden;}

.pix:nth:child(1) {
    z-index: 3;
}

.pic:nth-child(2) {
    z-index: 1;
}

.pic:nth-child(3) {
    z-index: 2;
}

.pic-container:hover .pic:nth-child(1) {
    transform: rotate(15deg);
    transition: all 0.5s ease;
}

.pic-container:hover .pic:nth-child(2) {
    transform: rotate(7deg);
    transition: all 0.10s ease;
}

.pic-container:hover .pic:nth-child(3) {
    transform: rotate(-5deg);
}

.pic-caption {
    background: #82a3d4;
    padding: 10px 15px;
    color: #fff;
    font-size: 12px;
    position: relative;
    z-index: 10;
    top:90px;
    left: 200px;
    border-radius: 3px;
    transition: all 0.5s ease;
    opacity: 0;
}

.pic-caption:hover {
    background: #607fae;
}
.pic-container:hover .pic-caption {
    left:230px;
    opacity: 1;
}
// Playing with image hover =)
// By: https://itbruno.com.br
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.