Can't figure out the coding for this (Placing smaller image on top of larger)

Beginners
1

Hi. Sorry, I’ve been reading books and articles on this, and have had no success. Unfortunately, many of the posts I find on the Web have an answer, but then it’s followed by numerous conflicting corrections/additions, etc… so I have not been able to find a source for a single, complete solution to this.

I’ve built the whole site, and have no real problems with HTML or Bootstrap. I just am stuck on this one particular thing.

I want to create a page that (among many other things) has a 2 Bootstrap column row, with the first containing a 400x400 pixel image (and the second will contain nav buttons, but they are not relevant to the question). Easy enough.

Now, keep in mind that this site is intended to be responsive. On SM and XS sizes, I have the second column snap down below the first (nav buttons go under the image, rather than beside). Again, no problem.

So, the problem is, I need to place a SMALLER (than the 400x400 image in the first column) image at a specific spot on the 400x400 image. In fact, I want to place a number of them, but let’s just stick with one for this.

This is now going into territory where I’ve always been a bit clumsy and uncertain. I read things like the ‘container’ has to be set to Position: Relative (and some also say make it a Block). I’m not even sure if they are referring to the actual container element, or the column that is containing the (larger image), so the confusion already begins there.

They also say that the smaller image needs to be set to Position: Absolute, and then there’s some discrepency from there… with some saying to use Left:x% and Top:x%, while others say Margin-Left:x% and Margin-Right:x%. I guess it all depends which method you want to use, so I’m assuming both are (in this case) interchangable. Both sides then also mention using Margin-Top and Margin-Left, although some use px and some use %… but, again, that’s a choice.

Thing is, I try this, and it doesn’t appear to work. I’m sure I’m leaving something out. I just have the two images, side by side, within the column.

So, based on my specific needs stated above, could someone please outline the full coding needed on the container, row and image tags?

NOTE: I know that the attributes should be defined via an external CSS document, which I DO, but for the sake of this explanation, could you just apply the attributes directly to the tags, so it’s more clear on what is what (and to avoid multiple sections in the explanation).

Again:

  • 2 Bootstrap column (6 +6)

  • Image in first column

  • Smaller image to be placed at very specific spot on that first image (which I will later alter via javascript)

  • Second column has nav buttons (just mentioning it so you know there is a second column. I’m not asking anything about that second column)

  • Second column snaps underneath the image at SM and XS (…Again, just mentioning it, in case that affects the solution you suggest. It’s all working fine, and no help needed on that.)

  • I need compatibility across all popular patforms/browsers

One of my concerns, is even if I manage to get an exact offset value for the smaller image (to place it in the proper spot on the first image), it will get misaligned if/when the first image gets scaled down to a smaller image.

If someone can help with this, that would be awesome. Sorry, I’ve been trying to research and experiment with this, but with no luck. If someone has a good link to an explanation (that isn’t followed by a bunch of corrections/additions/debates) that would be great, too. I’m continuing to read up and experiment over here, but figured I’d ask, in case someone wants to help with an answer.

Cheers

2

@ladlon you could try something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Blank Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <img src="http://pinegrow.com/placeholders/img12.jpg" width="100%">
                <div class="row small-pic-group" style="position: relative; bottom: 100px;">
                    <div class="col-md-4">
                        <img src="https://images.unsplash.com/photo-1586771451232-cd2887ebcc6e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" width="100%">                              
                    </div>
                    <div class="col-md-4">
                        <img src="https://images.unsplash.com/photo-1586771451232-cd2887ebcc6e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" width="100%">                              
                    </div>
                    <div class="col-md-4">
                        <img src="https://images.unsplash.com/photo-1586771451232-cd2887ebcc6e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" width="100%">                              
                    </div>
                </div>                                          
            </div>
            <div class="col-md-6">
                <h3>Column title</h3> 
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
            </div>
        </div>
    </div>
    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/popper.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
1 Like
3

Hi, Rob. Thank you for the response and effort!

Ya, that definitely nudged me in the right direction. My previous attempts had the second image finally appearing on the first image, but the offsets didn’t seem to work.

Your suggestion did get the offsets working.

I do need to experiment with it further, as I’m getting some weirdness currently (the second image disappears in sizes MD and higher. There’s so many little factors that can throw things off, so this is a bit challenging.

I haven’t verified it, but I’m concerned of how the offset will react when the image is scaled down as the result of the responsive site. I’m thinking I may end up having to set different offsets for each size or something.

But, this is just my initial findings after quickly trying out your suggestion. I have to dig into it further, and see if I messed something up, or there’s some other factors to deal with.

But, that definitely got me closer!

I’m currently battling with Javascript (…Teaching myself, and trying to get THAT to work properly, as far as manipulating image tag properties. I’m making progress there, too…)