htmlcssresponsive-designresponsive

CSS Non-standard responsive image frame

I'm trying to implement a non-standard frame for a picture of a news section. My idea is to have the picture as a lower z-index than the frame and have the frame on top of it and make them responsive. So far I had no luck.

.news-gallery-image {
    position: relative;
    height: 100%;
}

.news-gallery-image img {
    width: 100%;
    height: 100%;
}

.news-gallery-image .news-border {
    content: url("/resources/images/gallery-image-background-holder.png");
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
<div class="mt-5 m-auto w-full">
    <!-- Swiper -->
    <div class="swiper news-swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide flex-col">
                <div class="news-gallery-image">
                    <img src="https://i.imgur.com/bRqr97Q.png" class="image" alt="forge your deck">
                    <img class="news-border" alt="borders"/>
                </div>
                <div class="w-auto mt-2">
                    <h1 class="text-1xl text-center">
                        HOTFIX #1.23 NOW LIVE!
                    </h1>
                </div>
            </div>
            <div class="swiper-slide flex-col">
                <div class="news-gallery-image">
                    <img src="https://i.imgur.com/bRqr97Q.png" class="image" alt="forge your deck">
                    <img class="news-border" alt="borders"/>
                </div>

                <div class="w-auto mt-2">
                    <h1 class="text-1xl text-center">
                        HOTFIX #1.23 NOW LIVE!
                    </h1>
                </div>
            </div>
            <div class="swiper-slide flex flex-col">
                <div class="news-gallery-image">
                    <img src="https://i.imgur.com/bRqr97Q.png" class="image" alt="forge your deck">
                    <img class="news-border" alt="borders"/>
                </div>
                <div class="w-auto mt-2">
                    <h1 class="text-1xl text-center">
                        HOTFIX #1.23 NOW LIVE!
                    </h1>
                </div>
            </div>
        </div>
    </div>
</div>

The Frame

Example

Could you please give a hand with this?

Solution

  • So the answer that I came up is to make the image the same size as the border view field and leaving transparent space on each side. This way the image was contained in the middle of the border where the viewport is.