CSS hover эффект с рисунком и figcaption наложены

Ищу некоторую помощь по стилизации CSS. Я хочу создать окно изображения (это должна быть ссылка)с центрированным текстом, который будет накладываться поверх изображения с цветным полупрозрачным фоном наложения. У нас есть такой заданный HTML: 

<div class="figure">
  <a href="#" class="link1">
    <img src="http://www.w3schools.com/css/klematis.jpg" alt="flower Klematis">
    <div class="figcaption">Klematis</div>
  </a>
</div>

Код аналогичен структуре figure/figcaption HTML5. Вот в чем дело: https://codepen.io/anon/pen/dYaYqV

При наведении оверлея фон должен скрываться (что и происходит), а непрозрачность изображения увеличиваться до полной.

Проблема 1: Текст не центрируется с такой установкой позиции (абсолютной).

Задача 2: Наложение в этом примере больше (в нижней части изображения) из-за некоторого стиля , я думаю, элемента. Наложение должно быть точным, как изображение.

Задача 3: Текст должен скрываться, а также накладываться во время наведения мыши img

Никаких JS, если это возможно, только CSS. Вы можете помочь? Спасибо, Иисус

2 3
html css overlay hover

2 ответа:

Я немного отредактировал ваш пример codepen, и я думаю, что это именно то, что вы хотите HTML: 

 <div id="1" class="figure">
  <a href="#" class="link1">
    <img src="http://www.w3schools.com/css/klematis.jpg" alt="flower Klematis">
    <div class="figcaption"><h4>Klematis</h4></div>
  </a>
</div>

CSS: 

.figure {
    position: relative;
    float: left;
    width: 10%;
    margin-right: 1%;
    left:20px;
}
.figure a{
  display:block;
  width:100%;
  height:100%;
  position:relative;
  z-index:2;
}
.figure a img{
  width:100%;
  display:block;
}
.figcaption {
    font-size: 0.8em;
    letter-spacing: 0.1em;
    text-align: center;
    position: absolute;
    top: 0;
    left:0;
    width:100%;
    z-index: 2;
    height:100%;
    background-color:rgba(0,0,0,.4);
    transition:background-color 0.4s ease;

}
.figcaption h4{
  position:absolute;
  top:50%;
  left:50%;
  padding:0;
  margin:0;
  -moz-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}
.figure a:hover .figcaption {
  background-color:transparent;
}

Извините, забыли Скрыть текст при наведении, вот отредактированный codepen http://codepen.io/gopal280377/pen/QjYyLL

1

Протестировано на google chrome, надеюсь, что это работает для вас

Присвоить ширину .figcaption для включения выравнивания текста,

Переместил якорный тег в родительский блок кода (мое предпочтение)

Переполнение оверлея, вероятно, связано с необъявленными размерами изображения, 

<a href="#" class="link1">
    <div id="1" class="figure">
        <img src="http://www.w3schools.com/css/klematis.jpg" alt="flower Klematis">
        <div class="figcaption">Klematis</div>
    </div>
 </a>


.figure {
   position: relative;
   width: 10%;
   height: auto;
   background:rgba(92,104,117,0.8);
   overflow: hidden;
   }
.figcaption {
   position: absolute;
   font-size: 0.8em;
   width: 100%;
   letter-spacing: 0.1em;
   text-align: center;
   top: 50px;
   z-index: 1 !important;
   }
.figure img {
   width: 100%;
   opacity: 0.5
   }
.link1:hover img {
   opacity: 1;
   -webkit-transition: .3s ease-in-out;
   transition: .3s ease-in-out;
   }
.link1:hover .figcaption {
   display: none;
   background:rgba(92,104,117,0.0);
   }
0