Destaques: Caixa de textos

Oi gente eu percebi que vários sites estão usando um jeito legal de colocar destaques, as vezes são mais no rodapé. Nesse exemplo o destaque está sendo 220px de largura e 500px de altura, isso pode ser alterado de acordo com o seu gosto confira o resultado e o tutorial: 
RESULTADO.




1 - Coloque esse código no seu css:

.caixa {width: 220px; height: 500px; float: left;padding: 8px;}
.caixa img {width: 200px; height: 150px;}
.caixa h3 {
  margin: 0;
  font-family: 'Arial', sans-serif;
  font-size: 15px;
  text-align:center
  padding: 5px 10px;
  }
.leiamais {
  color: #fff; 
  padding:2px 5px;
  margin:2px;
  background: #383d5d;
  display:inline-block; 
  font-size:12px;
  border-radius:1px;

-moz-transition-duration: .5s; 
-webkit-transition-property: color; 
-webkit-transition-duration: .5s;
  }

.leiamais:hover {
  background: #fff; 
  color: #383d5d;

  }

2 - Coloque esse código onde quer que apareça:

<div class="caixa">
<img src="http://static.tumblr.com/9awgtsr/CrOmqxb89/lin_e.png">

<h3>Aqui seu titulo</h3>
<p>Seu texto
<a href="texto" class="leiamais">MAIS</a></p>

</div>

Tutorial feito por Sugoi Tutoriais | CRÉDITOS: True Luv