CSS Responsive Hover Imagecaption with Zoom

I made this Code for an Image Grid which is responsive and zooms in on the image and shows its caption. Unfortunately I can't figure out how to make Caption responsive. The Dark Overlay with the Blur Class should be the same size as the image as the text should stay in the middle. But as soon as I change position:absolute and or change the width and height to auto or 100% the Elements disappear.

I haven't coded in a while am i missing something obvious? Any idea how to fix this?

Example here

<div class="wrapper">
<div class="columns"> 
<div class="column">
    <img src="http://lorempixel.com/400/200/">
    <div class="caption">
        <div class="blur"></div>
        <div class="caption-text">
            <h5>Info 1</h5>
        </div>
    </div>
</div>
<div class="column">
    <img src="http://lorempixel.com/400/200/">
</div>  
<div class="column">
    <img src="http://lorempixel.com/400/200/">
 </div>
<div class="column">
    <img src="http://lorempixel.com/400/200/">
</div>
<div class="column">
    <img src="http://lorempixel.com/400/200/">
</div>
</div>

.column{
    float: left;
    padding: 0px;
    position: relative;
    overflow: hidden;
}

.column:hover .caption{
    opacity: 1;
}

.column:hover img{
opacity: 1;
transform: rotate(3deg) scale(1.15,1.15);
-webkit-transform: rotate(3deg) scale(1.15,1.15);
-moz-transform: rotate(3deg) scale(1.15,1.15);
-ms-transform: rotate(3deg) scale(1.15,1.15);
-o-transform: rotate(3deg) scale(1.15,1.15);

-moz-transform-origin: center;
-webkit-transform-origin: center;
transform-origin: center;
}

.column img{
    margin: 0px;
    padding: 0px;
    float: left;
    z-index: 0;
    width:100%;
}

.column .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;
}

.column 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;
}

.column .blur{
    background-color: rgba(0,0,0,0.65);
    height: 400px;
    width: 300px;
    z-index: 5;
    position: absolute;
    top:0;
    left:0;
}

.column .caption-text h1{
    text-transform: uppercase;
    font-size: 24px;
}

.column .caption-text{
    z-index: 10;
    color: #fff;
    position: absolute;
    width: 400px;
    height: 300px;
    text-align: center;
    top:100px;
}

/* Grid */
* { 
box-sizing: border-box; 
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.wrapper{
max-width: 1200px;
margin:0 auto;
overflow: hidden;
}    
.columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin:-1.5%;

}

.column {
position: relative;
width:50%;

flex: 32%;
overflow:hidden;
margin: 5px;
&:first-child { margin-left: 0; }
&:last-child { margin-right: 0; }
}


@media screen and (max-width: 980px) {
.columns .column {

    flex-basis: 40%;
    &:nth-last-child(2) {
        margin-right: 0;
    }
    &:last-child {
        flex-basis: 100%;
        margin: 0;
    }
 }
}

@media screen and (max-width: 680px) {
.columns .column {
    flex-basis: 100%;
 }
}

Solution

You could use flexbox to solve it changing/adding these properties in your CSS:

.column .blur {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;
    top: 0;  
}
.column .caption {
    width: 100%;
    height: 100%;
}
.column .caption-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

Since .column .blur and .column .caption-text have similarities, you could create a class for both.

Final result in here: https://jsfiddle.net/b42ehq8o

Hope it helps.