Отзывчивое изображение наведите указатель

Question

Проблема, с которой я сталкиваюсь, заключается в том, что заголовок .caption-text и наложение .blur - фиксированная ширина и высота, тогда как изображение реагирует.

Любые предложения по изменению этого кода, чтобы наложение и подпись соответствовали ширине и высоте изображения?

.caption-style-4 { 
 
    list-style-type: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.caption-style-4 li { 
 
    float: left; 
 
    padding: 0px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.caption-style-4 li:hover .caption { 
 
    opacity: 1; 
 
} 
 
.caption-style-4 li:hover img { 
 
    opacity: 1; 
 
    transform: scale(1.15, 1.15); 
 
    -webkit-transform: scale(1.15, 1.15); 
 
    -moz-transform: scale(1.15, 1.15); 
 
    -ms-transform: scale(1.15, 1.15); 
 
    -o-transform: scale(1.15, 1.15); 
 
} 
 
.caption-style-4 img { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    float: left; 
 
    z-index: 4; 
 
} 
 
.caption-style-4 .caption { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.45s ease-in-out; 
 
    -moz-transition: all 0.45s ease-in-out; 
 
    -o-transition: all 0.45s ease-in-out; 
 
    -ms-transition: all 0.45s ease-in-out; 
 
    transition: all 0.45s ease-in-out; 
 
} 
 
.caption-style-4 img { 
 
    -webkit-transition: all 0.25s ease-in-out; 
 
    -moz-transition: all 0.25s ease-in-out; 
 
    -o-transition: all 0.25s ease-in-out; 
 
    -ms-transition: all 0.25s ease-in-out; 
 
    transition: all 0.25s ease-in-out; 
 
} 
 
.caption-style-4 .blur { 
 
    background-color: rgba(0, 0, 0, 0.65); 
 
    height: 300px; 
 
    width: 400px; 
 
    z-index: 5; 
 
    position: absolute; 
 
} 
 
.caption-style-4 .caption-text h1 { 
 
    text-transform: uppercase; 
 
    font-size: 24px; 
 
} 
 
.caption-style-4 .caption-text { 
 
    z-index: 10; 
 
    color: #fff; 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 300px; 
 
    text-align: center; 
 
    top: 100px; 
 
}

<div class="container-a4"> 
 
    <ul class="caption-style-4"> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-600-480-1.jpg" alt=""> 
 
     <div class="caption"> 
 
     <div class="blur"></div> 
 
     <div class="caption-text"> 
 
      <h1>Amazing Caption</h1> 
 
      <p>Whatever It Is - Always Awesome</p> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    </ul </div>

http://codepen.io/anon/pen/GNzMNV

Answer 1

Вы можете включить jquery.js и рассчитать ширину, высоту изображения. также добавить в CSS .singlePillar .caption {top:0px;} Пример: https://jsfiddle.net/hc2tr7s3/

Answer 2

Просто обновите ваш CSS

.caption-style-4 .caption-text { 
    z-index: 10; 
    color: #fff; 
    position: absolute; 
    width: 100%; 
    height: 95px; 
    text-align: center; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 
.caption-style-4 .blur { 
    background-color: rgba(0,0,0,0.65); 
    height: 100%; 
    width: 100%; 
    z-index: 5; 
    position: absolute; 
} 
.caption-style-4 .caption { 
    cursor: pointer; 
    position: absolute; 
    opacity: 0; 
    -webkit-transition: all 0.45s ease-in-out; 
    -moz-transition: all 0.45s ease-in-out; 
    -o-transition: all 0.45s ease-in-out; 
    -ms-transition: all 0.45s ease-in-out; 
    transition: all 0.45s ease-in-out; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
    height: 100%; 
} 

здесь обновленный codepen http://codepen.io/anon/pen/MbLEXr

дайте мне знать, если он все еще не работает.