.image-border {
width: 300px;
height: 300px;
background-color: #eee;
background-image: url("https://unsplash.it/300?image=885");
position: relative;
z-index: 1;
}
.image-border:after {
content: '';
position: absolute;
width: 290px;
height: 290px;
left: 5px;
top: 5px;
background-color: #fff;
}
.image-border .main-image {
position: absolute;
width: 290px;
height: 290px;
left: 5px;
top: 5px;
background-image: url("https://unsplash.it/300?image=885");
background-size: 300px 300px;
background-position: center center;
z-index: 2;
transition: .2s ease-in-out;
}
.image-border:hover > .main-image {
transform: translate(-50px, -50px);
transition: .2s ease-in-out;
}
.image-border:hover > p.title:after {
transform: scale3d(1, 1, 1);
transition: .2s ease-in-out;
}
.image-border p.title {
height: 60px;
padding: 0;
position: absolute;
bottom: -80px;
font-weight: 400;
line-height: 60px;
color: #2c3e50;
font-size: 1em;
margin-left: 150px;
transform: translateX(-50%);
}
.image-border p.title:after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #e74c3c;
bottom: 10px;
left: 0;
transform: scale3d(0, 1, 1);
transition: .2s ease-in-out;
}
.text{
position:absolute;
bottom:0;
right:10%;
z-index:2;
}
