<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.