Change bottom automatically according to div's with parent

Question

I'm creating Isotope layout, to make it responsive I've created column width percent unit with hover caption effect. Everything works fine except responsive mode. I want to change bottom of caption automatically according div's width parent but I don't know how to archive this. Can you help me out?

This is my code: https://jsfiddle.net/dqfm3gj7/2/

HTML

                                    <figcaption>
                                        <div class="title">
                                            <p>lorem ipsum</p>
                                            <h2>blog title</h2>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
                                    </figcaption>
                                </figure>
                            </a>

        </div>
        <div class="item item-width2">  <a href="#">
                                <figure>
                                    <img class="img-responsive" src="http://i.imgur.com/RVHcLal.jpg" alt="Image" />

                                    <figcaption>
                                        <div class="title">
                                            <p>lorem ipsum</p>
                                            <h2>blog title</h2>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada, nulla lacus rhoncus nisi, nec fringilla massa urna quis eros. Integer faucibus placerat dui sit amet volutpat. Curabitur suscipit rhoncus lectus, sit amet fermentum lacus interdum sed.</p>
                                    </figcaption>
                                </figure>
                            </a>

        </div>
        <div class="item">  <a href="#">
                                <figure>
                                    <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" />

                                    <figcaption>
                                        <div class="title">
                                            <p>lorem ipsum</p>
                                            <h2>blog title</h2>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
                                    </figcaption>
                                </figure>
                            </a>

        </div>
        <div class="item">  <a href="#">
                                <figure>
                                    <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" />

                                    <figcaption>
                                        <div class="title">
                                            <p>lorem ipsum</p>
                                            <h2>blog title</h2>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
                                    </figcaption>
                                </figure>
                            </a>

        </div>
        <div class="item">  <a href="#">
                                <figure>
                                    <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" />

                                    <figcaption>
                                        <div class="title">
                                            <p>lorem ipsum</p>
                                            <h2>blog title</h2>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
                                    </figcaption>
                                </figure>
                            </a>

        </div>
        <div class="item">  <a href="#">
                                <figure>
                                    <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" />

                                    <figcaption>
                                        <div class="title">
                                            <p>lorem ipsum</p>
                                            <h2>blog title</h2>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
                                    </figcaption>
                                </figure>
                            </a>

        </div>
        <div class="item">  <a href="#">
                                <figure>
                                    <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" />

                                    <figcaption>
                                        <div class="title">
                                            <p>lorem ipsum</p>
                                            <h2>blog title</h2>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
                                    </figcaption>
                                </figure>
                            </a>

        </div>
    </div>
    <!-- end blog-container -->
</div>
<!-- end blog-section -->

CSS

#blog-container{
    max-width: 1140px;
}

    #blog-container:after{
        content: '';
        clear: both;
        display: block;
    }

figure{
    float: left;
    position: relative;
    overflow: hidden;
    height: auto;
}

figcaption{
    position: absolute;
    bottom: -71%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.5);
    padding: 10px;
    overflow: hidden;
    transition: bottom .5s;
    color: #615b51;
}

    figcaption h2,
    figcaption .title p{
        margin: 0;
        text-transform: uppercase;
    }

.item-width2 figcaption{
    bottom: -86%;
}

    figcaption:hover{
        bottom: 0;
    }

.item,
.item-sizer{
    width: 19.298%;
    height: auto;
}

.item-width2{
    width: 39.5%;
}

.item{
    float: left;
    margin-bottom: 12px;
}

@media(max-width: 736px){
    .item,
    .item-sizer,
    .item-width2{
        width: 48.641%;
    }
}

JS

var $container = jQuery('#blog-container');

$container.isotope({
    itemSelector : '.item',
    percentPosition: true,
    layoutMode: 'masonry',
    masonry:{
        columnWidth: '.item-sizer',
        gutter: 10
    }
});

Answer 1

As far as I understood, your problem is that when the page gets narrower and the @media rule is applied, all the tiles get the same dimension but the labels (figcaption) do not.

Have you tried applying the same bottom value to all figcaption tags inside that @media rule?

@media(max-width: 736px){

    ...

    figcaption {
        bottom: -71%; // Set the value you want all them to have
    }
}

If you end up having more complex styles and you have problems trying to have that rule applied to all the different figcaption tags in your page you would have to check the CSS specificity of those rules and set a more specific one inside the @media block. You can check that using this tool: http://specificity.keegan.st/

You could also use the !important annotation on the bottom (or any other) property.

EDIT:

If you want to make the bottom property value depend on the dimension of the tiles you should set its value in % or you could also use calc() to do some operations (+, -, *, /) with % and any other different units (e.g. bottom: calc(71% - 1em)).

You could also use multiple CSS media queries for different page widths: https://css-tricks.com/css-media-queries.