<section class="section-hobbies">
            <ul class="meals-showcase">
                <li>
                    <figure class="meal-photo">
                        <img src="resources/css/img/1.jpg">
                    </figure>
                </li>

                <li>
                    <figure class="meal-photo">
                        <img src="resources/css/img/2.jpg">
                    </figure>
                </li>
            </ul>

            <ul class="meals-showcase">
                <li>
                    <figure class="meal-photo">
                        <img src="resources/css/img/3.jpg">
                    </figure>
                </li>

                <li>
                    <figure class="meal-photo">
                        <img src="resources/css/img/4.jpg">
                    </figure>
                </li>
            </ul>
        </section>

.meals-showcase {
    list-style: none;
    width: 100%;
    /*height: 100%;*/
}

.meals-showcase li {
    display: block;
    float: left;
    width: 50%;
}

.meal-photo {
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
}

.meal-photo img {
    opacity: 0.7;
    width: 100%;
    height: auto;
    transform: scale(1.15);
    transition: transform .5s, opacity .5s;
}

.meal-photo img:hover {
    opacity: 1;
    transform: scale(1.04);
}