Код

<div class="effect eff-2-1">
  <img src="http://zornet.ru/Aben/Gsa/zartyn/zornet.jpg" alt="Effect #2" />
  <div class="caption">
    <h4>Красивый эффект на сайте</h4>
    <p>Здесь смотрим красивый эффект, который можете поставить на сайт, как пример вид материала.</p>
    <a class="btn" href="http://zornet.ru/" title="View More">Красивый эффект/a>
  </div>
</div> 

CSS

.effect {
  position: relative;
} 
.effect img {
  width: 100%;
  height: 100%;
}  
.eff-2-1 {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.eff-2-1 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  background: rgba(0,0,0,0.7);
  width: 100%;
  height: 100%;
  color: #fff;
  opacity: 0;
  -o-transition: all 0.5s linear 0s;
  -webkit-transition: all 0.5s linear 0s;
  -moz-transition: all 0.5s linear 0s;
  -o-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s;
}
.eff-2-1 .caption h4 {
  font-size: 21px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid white;
  padding-bottom: 20px;
  margin-top: 20px;
  position: relative;
  top: 62px;
  opacity: 0;
  -o-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.eff-2-1 .caption p {
  margin: 15px 0px;
  text-align: center;
  font-style: italic;
  padding: 0px 10px;
  opacity: 0;
  -o-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.eff-2-1 .caption a.btn {
  width: 120px;
  text-align: center;
  display: block;
  background: #68432d;
  color: #fff;
  padding: 10px 0px;
  border-radius: 5px;
  margin: 0px auto 0px auto;
  position: relative;
  top: -58px;
  opacity: 0;
  -o-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.eff-2-1:hover h4,
.eff-2-1:hover a.btn {
  top: 0px;
  opacity: 1;
}
.eff-2-1:hover .caption,
.eff-2-1:hover p {
  opacity: 1;
}