Monter le titre

<div class="grid">
			<figure class="effect-ruby">
			<figcaption>
			<h2><a >titre</a></h2>

			<p><a >description..</a></p>
			</figcaption>
			</figure>
			</div>

figure.effect-ruby{background-color:#ffffff ; text-align: center; 

    font-family: 'Raleway', sans-serif;

width: 200px; height: 200px;
 display: table-cell; /* comportement visuel de cellule */
  vertical-align: middle;}

 figure.effect-ruby img{opacity:.7;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale(1.15);transform:scale(1.15)}

 figure.effect-ruby:hover img{opacity:.5;-webkit-transform:scale(1);transform:scale(1)text-align: center;}

 figure.effect-ruby h2{margin-top:20%;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)text-align: center;}

 figure.effect-ruby p{margin:1em 0 0;padding:3em;border:1px solid #000;text-align: center; opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,20px,0) scale(1.1);transform:translate3d(0,20px,0) scale(1.1)}

 figure.effect-ruby:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)text-align: center;}

 figure.effect-ruby:hover p{opacity:1;-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1)text-align: center;}