How can i add shapes between photos

user_12292601 0
Viewed 64

I am beginner in bootstrap , i try to make photo galleries to my example website.I want to add the diamond shapes you see in the photo between the picture gallery.

I found this source code

<div class="row">
                <div class="col-xs-6">
            <a href="/urunler" target="_self" class="banner lazy ">
                <img src="" class="b-lazy b-loaded" width="397" height="397" alt="Dörtlü Banner">
                <div class="hover-diamond"></div>
            </a>
            <div class="split-left-diamond"></div>
            <div class="split-top-diamond"></div>
        </div>
        
        <div class="col-xs-6">
            <a href="/urunler" target="_self" class="banner lazy ">
                <img src="" class="b-lazy b-loaded" width="397" height="397" alt="Dörtlü Banner">
                <div class="hover-diamond"></div>
            </a>
            <div class="split-left-diamond"></div>
            <div class="split-top-diamond"></div>
        </div>
        
        <div class="col-xs-6">
            <a href="/urunler" target="_self" class="banner lazy ">
                <img src="" class="b-lazy b-loaded" width="397" height="397" alt="Dörtlü Banner">
                <div class="hover-diamond"></div>
            </a>
            <div class="split-left-diamond"></div>
            <div class="split-top-diamond"></div>
        </div>
        
        <div class="col-xs-6">
            <a href="/urunler" target="_self" class="banner lazy ">
                <img src="" class="b-lazy b-loaded" width="397" height="397" alt="Dörtlü Banner">
                <div class="hover-diamond"></div>
            </a>
            <div class="split-left-diamond"></div>
            <div class="split-top-diamond"></div>
        </div>
        
    </div>

They use split diamond class but i cant reach the content which it includes. Can you help me?

enter image description here

bootstrap-4 css html
1 Answers

Can you please check the below code link? First, we gave the position position-relative in column class col-xs-6 then we make the shape and its set position using CSS property like transform and position.

Please refer to this link: https://jsfiddle.net/yudizsolutions/wrn5a8sk/2/

user_122138960
Related