What is the best way to insert shapes in between pictures?

As a beginner in bootstrap, I am trying to create photo galleries for my sample website. I would like to incorporate the diamond shapes seen in the photo into the image gallery.

I came across 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 have used the split diamond class, but I am unable to access its content. Can anyone provide assistance?

https://i.sstatic.net/bRQ3A.jpg

htmlcssbootstrap-4

Answer №1

Could you take a look at the code provided in the link below? Initially, we applied the position-relative property to the column class col-xs-6, followed by shaping it and defining its position using CSS properties such as transform and position.

Here is the link for reference: https://jsfiddle.net/yudizsolutions/wrn5a8sk/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I adjust the padding and width attributes of the mat-menu in Angular 5

Today, I am struggling with a piece of code. Whenever I click on the Details button, it is supposed to open a mat-menu. However, for some reason, I cannot seem to adjust the padding or width of the menu: <div id="box-upload" [hidden]="hiddenBoxUpload" ...

htmlcssangulartypescriptangular-material

Achieve equal height for the last row of a table in Internet Explorer using CSS and have it

How can I make the last row in this HTML code take up the remaining height, while allowing rows "one", "two", and "three" to only take as much height as they need? This layout functions correctly in Chrome but not in Firefox or IE. <table> <tr ...

csshtml-tablecross-browserrow

Ensure that the content inside the centrally aligned div is also aligned at the

Looking for a way to center a box on a website I'm designing? Instead of aligning it based on existing centering, use the following HTML / CSS code to ensure that the white box is perfectly centered on the page. .loading { position: fixed; z-in ...

htmlcss

Creating an element that remains fixed once it reaches a distance of 50px from the top of the screen

Hey there! I'm working with an html div element that currently scrolls along with the page, but I was wondering how I can make it become fixed once it reaches a distance of 50px from the top of the screen. Any ideas on how to achieve this? Just to pro ...

javascriptjqueryhtmlcss

The justify-position attribute does not have any impact on the positions that are set

Here is the JSX code that resembles HTML but uses ClassName instead of class: <div className="snavbarcontainer"> <div className="toplefticon"> <a class="test" href=" ...

htmlcsssass

CSS: Placing a Column below a Float Positioned Column

While performing some maintenance on a website, I noticed that one page is not displaying correctly. There is a container div for a column on the left and a container div for content on the right, both within an overall page content container. Below these, ...

htmlcss

Attempting to connect with an Elementor Form submission

I am currently working on a functionality to toggle the visibility of a download button once a user has submitted their email through a standard Elementor form. Despite Elementor offering various actions, I have found that I can only achieve this toggle us ...

javascriptphphtmlwordpresselementor

Utilize JavaScript, specifically jQuery, to style the pricing

Currently, I am dealing with a website that is displaying prices in the format KD45.000. My goal is to have the "KD" and the three zeros following the decimal point appear at half the height of the number 45. Appreciate any help or suggestions. Cheers, ...

jqueryhtml

LESS: Using variable values in mixin and variable names

I am looking to simplify the process of generating icons from svg-files while also creating a png-sprite fallback for IE8 support. I am using grunt.js and less. I was inspired by the implementation on 2gis.ru: (in Russian), where they used technologies s ...

javascriptcssnode.jssvgless

Using a loop to format the <ol> tag

After creating an HTML script using angular, I was able to successfully display the names in an array as shown below. <div ng-repeat="namep in names"> <li>Name : <span ng-bind="namep.name"></span></li> <li>Age : ...

htmlangularjs

Creating a div element with a fixed size that remains the same regardless of its content

Check out the code snippet below for displaying an image and title: <div id="eventsCollapsed" class="panel-collapse collapse" ng-controller="videoController"> <div class="panel-body"> <div ...

cssangularjstwitter-bootstraptwitter-bootstrap-3

What is the best way to save the toggleClass value of various selectors along with their corresponding classes in localStorage?

I've been attempting to preserve the toggled class of multiple elements using local storage or cookies in order to maintain the toggled class after a page refresh. Despite trying various solutions such as js cookie and other tutorials, I've had n ...

javascriptjqueryhtmlcookieslocal-storage

As the content scrolls, it covers the fixed background

I'm stumped on how to create this effect that seems like it should be simple. What I'm aiming for is similar to what can be seen here: On that website, when you begin scrolling the image remains in place while the content scrolls over it. Any s ...

css

Issues with inconsistent behavior of the select option in a form

Having some trouble with my form code. When I checked the web page, there seems to be an extra element that shouldn't be there. You can view the webpage https://i.sstatic.net/pu4ef.jpg. Inspecting it in browser developer mode, I found this extra eleme ...

htmlcss

Encountering a problem with AngularJS

My AngularJS test is running fine, but I keep getting this error in the console!! Error: [filter:notarray] Expected array but received: {"data":[{"brand":"Samsung A7 Prime","color":"Gold","price":24500,"img":"img/Chrysanthemum.jpg"},{"brand":"iPhone 6 P ...

javascripthtmlangularjsjson

Is it possible to use JQuery ScrollTop while in the midst of an animation?

I am facing an issue with resizing containers and scrolling to elements. I have 2 containers that change width dynamically, each containing clickable elements. When a container is clicked, it animates the resize. However, when a clickable element is clicke ...

javascriptjqueryhtml

What is the best way to reposition the main body content lower on the page when switching to mobile layout?

I am facing an issue where my website switches to mobile design at 850px, but the button I have on both desktop and mobile mode gets hidden under the header banner when it transitions to mobile design. I want to adjust the main body content of the website ...

htmlcssmedia-queries

The left margin class in Bootstrap seems to be having trouble functioning properly within a React

Navbar <div className="collapse navbar-collapse" id="navbarSupportedContent"> <ul className="navbar-nav ml-auto"> <li className=&quo ...

cssreactjsbootstrap-4

Is it possible to retrieve a background-size value of 'auto' using jQuery, JavaScript, or CSS methods?

Just imagine background-size: 50% auto; If I desire to capture the "auto" value, is there a way for me to determine the new height or width? ...

jquerycssjquery-ui

Combine the elements to form a single text string with JavaScript

I initially used getElementById and it worked successfully. However, I now need to apply the same functionality to multiple div elements, so I switched to using classes. But now, when I use getElementsByClassName, it returns as undefined. (This function i ...

javascripthtmlarrays