Attempting to place a marker over the image

Feeling a bit disoriented. I'm attempting to place a marker over an image using (x,y) coordinates within the range of 0 to 256.

Typically, this is achieved by creating a container like the one referenced here:

However, in my scenario where I'm using the img-fluid class and the image stretches in height relative to its original size of 256x256, I'm unsure of how to wrap it in a container for drawing purposes.

The only idea left is to calculate relative to the width since the image is square and the parent div's width matches the image's width.

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5979a9a818681879485b5c0dbc7dbc4">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
         <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a667a65">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
         <div class="row justify-content-center row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-4">
             <div class="col">
                 <div class="card shadow h-100">
                     <img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" class="img-fluid shadow-sm p-2"/>
                     <div style="position: absolute; top:0; left:0; width: 256px; height: auto">
                         <img style="position: absolute; top: 10%; left: 10%; height: 16px; width: 16px;"
                              src="https://cdn-icons-png.flaticon.com/512/684/684908.png"/>
                     </div>
                     <div class="card-header text-center">
                         <div class="row p-0">
                             <div class="col-4">
                                 500
                             </div>
                             <div class="col-4 border-start border-end">
                                 800
                             </div>
                             <div class="col-4">
                                 1000
                             </div>
                         </div>
                         <div class="row p-0 fw-bold">
                             <div class="col-4">
                                 %PRICE%
                             </div>
                             <div class="col-4 border-start border-end">
                                 %SIZE%
                             </div>
                             <div class="col-4">
                                 %SQM%
                             </div>
                         </div>
    
                     </div>
                     <div class="card-body">
                         <h5 class="card-title">%TITLE$</h5>
                         <p>%DESCRIPTION%</p>
                     </div>
                     <div class="card-footer text-center">
                         <b>Call: %PHONE%</b>
                     </div>
                 </div>
             </div>
         </div>

Answer №1

One way to position the marker accurately is to enclose both images in a div element with the position: relative; style, and then move the img-fluid class to this container. Additionally, you can use the margin property instead of padding.

To ensure the marker is perfectly positioned, you can adjust the top and left values by subtracting 16px and 8px respectively (assuming the marker size is 16x16). For example:

top: calc(100% - 16px); left: calc(100% - 8px);

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1dcdcc7c0c7c1d2c3f3869d819d82">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4918a968a95">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-4">
    <div class="col">
        <div class="card shadow h-100">
            <div class="img-fluid shadow-sm m-2" style="position: relative;">
                <img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" class="w-100"/>              
                <img class="marker" style="position: absolute; top: calc(100% - 16px); left: calc(100% - 8px); height: 16px; width: 16px;"
                     src="https://cdn-icons-png.flaticon.com/512/684/684908.png"/>
            </div>
            <div class="card-header text-center">
                <div class="row p-0">
                    <div class="col-4">
                        500
                    </div>
                    <div class="col-4 border-start border-end">
                        800
                    </div>
                    <div class="col-4">
                        1000
                    </div>
                </div>
                <div class="row p-0 fw-bold">
                    <div class="col-4">
                        %PRICE%
                    </div>
                    <div class="col-4 border-start border-end">
                        %SIZE%
                    </div>
                    <div class="col-4">
                        %SQM%
                    </div>
                </div>

            </div>
            <div class="card-body">
                <h5 class="card-title">%TITLE$</h5>
                <p>%DESCRIPTION%</p>
            </div>
            <div class="card-footer text-center">
                <b>Call: %PHONE%</b>
            </div>
        </div>
    </div>
</div>

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

The navigation icon on my website refuses to close

Hey there, I'm having some trouble creating a side navigation menu. The issue I am facing is that the menu opens without any problem, but then I can't seem to figure out how to close it using a second "onclick()" function. If you could take a lo ...

Restricting the output from BeautifulSoup

After spending some time working with BeautifulSoup and Selenium, I have encountered a problem that has me stumped. I am trying to extract the HTML from the first 6 rows of a table, but these rows do not have any shared class or ID. Here is the structure ...

Manipulating div positions using JQuery and CSS

Whenever I hover over the #HoverMe div, a hidden #hidden div appears, and when I unhover it, the hidden div disappears again. The #hidden div contains a sub-div that functions like a dropdown list. The #hidden div is styled with position: absolute;. How ca ...

How can one get rid of a sudden strong beginning?

Recently, I delved into the world of CSS animation and encountered a frustrating issue. I've tried numerous methods and workarounds to achieve a smoothly looping animation without interruptions. Despite my efforts, I have not been able to replicate th ...

Steps for serving audio files in a Spring Boot application

Can someone advise on the best location to place my audio folder in order to reference it as src="audio/audio_name" within an HTML audio tag? I attempted placing it in the resources folder, but when using src="http://localhost:9191/resource ...

CSS mysteriously malfunctions on certain iPhones

Key Concept Despite testing with responsive simulators and ensuring there were no issues, some iPhone users have reported problems with the style of my web page. Coding Essentials The page is designed to use 2 custom CSS files - one for screens larger t ...

Customize the background color of selected date in MUI DatePicker 6.19.7 with sx styling

Looking to update the color of a specific element highlighted by an arrow using sx{} DatePicker <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker className={styles.picker} ...

Troubleshooting: Issues with CSS fixed positioning

Whenever I try to scroll down, my navbar moves along with the page. Even when I resize the window, it keeps shifting despite using position:fixed. What mistake am I making? nav li:nth-child(1) { position: fixed; border: 1px solid #15317E; font-si ...

An intriguing inquiry regarding HTML form intricacies

Looking to enhance the source code by adding a new column to display Client Mobile, Client Office Telephone, and Client E-mail in a separate popup PHP page. My attempt involved adding a form and submit button to generate the new column. However, pressing ...

Avoid refreshing the page when clicking on an anchor tag in Vue.js

I have the code below in my Vue file. The problem I am encountering is that the page reloads whenever I click on the link. I have tried using event.preventDefault() but it did not solve the issue. Can someone please help me identify what I am doing wrong ...

Is there a way for me to recreate the appearance of the outline and labeling found in Material-UI's outlined textfield?

Can anyone help me figure out how to hide the border behind the title text in an outlined textfield from Material-UI that I am trying to imitate? In the image below, you can see "Due Date/Time" taken from Material-UI library where the title hides the bord ...

What is the best method for eliminating a character from all elements in jQuery classes?

I am working on an Angular 4 app where every .inner-page class in a html element includes a "/". For instance: <div _ngcontent-c0="" class="inner-page /login"> <div _ngcontent-c0="" class="inner-page /register"> I need to eliminate the "/" c ...

The onclick function in the Navbar div fails to work for inner elements

Within my navbar, there is a .dropbtn div that I want to trigger a dropdown function when clicked. However, only the text "TOTAL" seems to activate this function onclick. The <span> and <i> elements inside the .dropbtn do not respond to clicks ...

Build a nested block containing a div, link, and image using jQuery or vanilla JavaScript

I have a button that, when clicked, generates a panel with 4 divs, multiple href links, and multiple images. I am new to web programming and understand that this functionality needs to be in the Javascript section, especially since it involves using jsPlum ...

What could be causing the issue of my CSS file not properly connecting with my HTML files in Django?

I am facing an issue with linking the CSS file to the HTML file in my code. Despite not showing any errors, there is no effect on my webpage. The files I have included are settings.py, base.html, and base.css. Additionally, my static folder is located outs ...

Tips for creating a perfectly positioned v-overlay within a v-col component

When using an absolute v-overlay inside a v-col, the grandparent v-row is covered by the overlay instead of just the parent v-col. "Absolute overlays are positioned absolutely and contained inside their parent element." -According to Vuetify&apo ...

Displaying error or success messages within the same webpage

This is my first time reaching out here because I couldn't resolve the issue on my own. Please keep in mind that I am relatively new to Spring and not very experienced in Java and coding in general. I am working on creating a Server application using ...

"Utilizing Bootstrap to ensure content is aligned perfectly to the baseline

I've been struggling to align my contents to the baseline while working with the bootstrap framework. I tried following the instructions in the documentation, but it didn't work out as expected. <div class="row"> <div class="col-12 ...

Press a single button to toggle between displaying and hiding the table

$(document).ready(function() { $("#t1").hide(); // hide table by default $('#sp1').on('click', function() { $("#t1").show(); }); $('#close').on('click', function() { $("#t1").hide(); }); }); <li ...

When trying to upload a file with ng-upload in Angular, the error 'TypeError: Cannot read properties of undefined (reading 'memes')' is encountered

Struggling with an issue for quite some time now. Attempting to upload an image using ng-upload in angular, successfully saving the file in the database, but encountering a 'Cannot read properties of undefined' error once the upload queue is comp ...