title effect

title effect on image

by John Doe

HTML

<div class="box">
  <img src="http://lorempixel.com/output/business-q-c-400-400-5.jpg" alt="img">
  <a href="#" class="title">Lorem ipsum</a>
</div>

CSS

*, *:after, *:before{
  box-sizing: border-box;
}
body{
  font-family: arial;
}
.box{
  position: relative;
  display: inline-block;
  margin: 0 0 0 15px;
}
.title{
  position: absolute;
  bottom: 3px;
  left: -15px;
  width: 100%;
  box-shadow: 1px 1px 0 0 #165c94, 2px 2px 0 0 #165c94, 3px 3px 0 0 #165c94, 4px 4px 0 0 #165c94, 5px 5px 0 0 #165c94, 6px 6px 0 0 #165c94, 7px 7px 0 0 #165c94, 8px 8px 0 0 #165c94, 9px 9px 0 0 #165c94, 10px 10px 0 0 #165c94, 11px 11px 0 0 #165c94, 12px 12px 0 0 #165c94, 13px 13px 0 0 #165c94, 14px 14px 0 0 #165c94, 15px 15px 0 0 #165c94;
  margin-bottom: 15px;
    margin-right: 15px;
    background-color: #2795ee;
    color: #fff;
    font-weight: bold;
    font-size: 25px;
    text-decoration: none;
    padding: 15px;
}