CODEWITHSUNDEEP
cssimagecss-position
Johnny
Johnny

Reputation: 869

positioning two images in an overlay format

I have two images that I need to be layered side-by-side.
This is what image 1 looks like now, utilizing the following code:

            <section id="4" class="pt-sm-3 pt-md-5 pb-2">
            <div class="row text-center">
                <div class="col-md-1">
                </div>
                <div class="col-md-3">
                    <img class="lazyload img-responsive product-images"
                         style="max-width: 100%; height: auto; margin: 0 auto;"
                         data-src="@Url.Content("./redImage.png")"
                         src="@Url.Content("~/Themes/21Rocs/Content/Images/loading(2).gif")" />
                </div>
                <div class="col-md-3">
                    <img class="lazyload img-responsive product-images"
                         style="max-width: 100%; height: auto; margin: 0 auto;"
                         data-src="@Url.Content("./blueImage.png")"
                         src="@Url.Content("~/Themes/21Rocs/Content/Images/loading(2).gif")" />
                </div>
            </div>
        </section>

enter image description here

I would like to have the images overlay on top of each other like the following: enter image description here How would I go about setting that up in CSS? I tried to use this approach but can't get the layer to fit properly. Please help. Thank You!

Upvotes: 0

Views: 42

Answers (2)

Albenis K&#235;rqeli
Albenis K&#235;rqeli

Reputation: 130

You should use negative margins to make these thing I set a class to col-md-3 called overlay and i styled this on style.css Hope this works

.overlay {
    margin-right: -100px;
}
<link rel = "stylesheet" href="style.css">
 <section id="4" class="pt-sm-3 pt-md-5 pb-2">
            <div class="row text-center">
                <div class="col-md-1">
                </div>
                <div class="col-md-3  overlay">
                    <img class="lazyload img-responsive product-images"
                         style="max-width: 100%; height: auto; ;"
                         data-src="@Url.Content("./redImage.png")"
                         src="https://wallpapercave.com/wp/wp3260204.jpg" />
                </div>
                
                <div class="col-md-3">
                    <img class="lazyload img-responsive product-images"
                         style="max-width: 100%; height: auto; ;"
                         data-src="@Url.Content("./blueImage.png")"
                         src="https://cdn.wallpapersafari.com/44/96/ow6U0D.jpeg" />
                </div>
            </div>
        </section>
        </section>

Upvotes: 1

ashleigh090990
ashleigh090990

Reputation: 63

Something like adding position: relative; transform: translateX(-50px) translateY(-50px); z-index: -1; as styling to the second image could be a quick fix. (You would probably need to amend the translateX/translateY values to get them where you need them - no other elements on the page will be affected by this transform)

Upvotes: 1

Related Questions