Html Question posted in
Some basic documentation can be found here.

Html – CSS Non-standard responsive image frame

I’m trying to implement a non-standart 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 have no luck.

<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>

I have the following CSS.

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

The Frame

Example

Could you please give a hand with this ^^.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    It looks like to code is correct but the image is causing the issue. Try using this image

    You need to set the width of the border such that it covers the image that is inside(main image to be displayed) and try to keep the aspect ratio of the border image and the back image same.

       .news-gallery-image{
        position: relative;
        width:100%;
        height:auto;
        display: flex;
        align-items:center;
        justify-content:center;
        margin-bottom:5%;
    }
        
    .news-gallery-image .backimg {
        position: relative;
        width:90%;
        margin-top:5%;
    }
        
    .news-gallery-image .news-border {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:107%;
    }
        <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 backimg" alt="forge your deck">
                        <img src="images/eAgUyVIv.png" 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 backimg" alt="forge your deck">
                        <img src="images/eAgUyVIv.png" 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 backimg" alt="forge your deck">
                        <img src="images/eAgUyVIv.png" 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search