HTML, CSS, javascript, PHP

Сделаем так, чтобы при проведении мышкой над ссылкой с картинкой, поверх картинки появлялся прозрачный фон и на нем надпись. 

Для этого будем использовать только CSS.

HTML код:

<a href="#" class="portfolio-box">
 <img src="img/portfolio/2.jpg" class="img-responsive" alt="">
 <div class="portfolio-box-caption">
  <div class="portfolio-box-caption-content">
   <div class="project-category text-faded">
    Category
   </div>
   <div class="project-name">
    Project Name
   </div>
  </div>
 </div>
</a>

CSS код:

Для ссылки назначаем относительную позицию, чтобы внутри ссылки поверх картинки разместить блок с полупрозрачным фоном:

.portfolio-box {
    position: relative;
}

CSS для блока с фоном:

.portfolio-box .portfolio-box-caption {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    opacity: 0;
    background: rgba(240,95,64,.9);
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

И внутри блока с фоном размещаем по центру блок с надписью:

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}

Теперь, когда мы проводим мышкой над ссылкой с картинкой, то появляется полупрозрачный фон размером с ссылку и надписью посередине.

.portfolio-box:hover .portfolio-box-caption {
    opacity: 1;
}

Посмотреть пример >> live.demo-templates.ru/examples/hover-caption