Placing a CSS image with absolute positioning on top of a responsive image

Is there a way to keep the balloon image position fixed in relation to the grid image when resizing it?

The balloons Balloon1 and B2 are technically within grid 5 and 7, but if you resize the grid left or right, the balloons will go off-center.

Do I require a special calculation or a JavaScript/jQuery library to address this issue?

Thank you.

Click here for an updated fiddle

.container{
  max-width:600px;
  max-height:400px;
}
.image-container{
  width:70%;
  float:left;
  position:relative;
}
.img-grid{
  max-width:100%;
  max-height:100%;
}
.balloon{
  position:absolute;
  left:30%;
  top:50%;
}
.balloon2{
  position:absolute;
  left:60%;
  top:15%;
}
Resize this area
<div class= "container">
  <div class="image-container">
       <img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
       
       <img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
       <img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
  </div>
  <div class="text-container">
  
  </div>
</div>
htmlcssimage

Answer №1

Implement media queries at four different breakpoints during resizing.

@media only screen and (max-width: 600px) {
img{width:60%;height:auto;}
}

Experiment with adjusting the image width as needed.

Answer №2

To maintain the proportion of the design, it is necessary to adjust the size of the balloons as the image shrinks.

One way to achieve this is by specifying the width of the balloons in percentages.

.container{
  max-width:600px;
  max-height:400px;
}
.image-container{
  width:70%;
  float:left;
  position:relative;
}
.img-grid{
  max-width:100%;
  max-height:100%;
}
.balloon{
  position:absolute;
  left:30%;
  top:50%;
  width: 6%;
}
.balloon2{
  position:absolute;
  left:60%;
  top:15%;
  width: 6%;
}
Adjust the dimensions here
<div class= "container">
  <div class="image-container">
       <img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
       
       <img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
       <img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
  </div>
  <div class="text-container">
  
  </div>
</div>

Answer №3

Here is the updated fiddle link for you to check out.

If this meets your requirements, I have adjusted the image width to 8% so it resizes accordingly when the screen size changes.

.container{
  max-width:600px;
  max-height:400px;
}
.image-container{
  width:70%;
  float:left;
  position:relative;
}
.img-grid{
  max-width:100%;
  max-height:100%;
}
.balloon{
  position:absolute;
  left:30%;
  top:50%;
  width: 8%;
}
.balloon2{
  position:absolute;
  left:60%;
  top:15%;
  width: 8%;
}
Adjust this section
<div class= "container">
  <div class="image-container">
       <img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
       
       <img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
       <img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
  </div>
  <div class="text-container">
  
  </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

Elements are not detected after applying display:none

Within the onLoad event, I implemented a function to hide multiple div elements by setting their CSS property display to "none" and assigning them the class name "invisible": function hideContent() { laElements = document.getElementById("content").chil ...

javascripthtmlcssdom

Example TypeScript code: Use the following function in Angular 5 to calculate the total by summing up the subtotals. This function multiplies the price by the quantity

I have a table shown in the image. I am looking to create a function that calculates price* quantity = subtotal for each row, and then sum up all the subtotals to get the total amount with Total=Sum(Subtotal). https://i.stack.imgur.com/4JjfL.png This is ...

javascripthtmlangulartypescript

Conceal Bootstrap 3 tooltip

There's a tooltip attached to a button within a bootstrap dropdown. Whenever I click that button, the original button is hidden and another button is displayed. However, the tooltip from the previous button remains visible until I scroll vertically or ...

htmltwitter-bootstrap-3tooltip

Include a custom HTML element on a webpage using Python's Selenium module

I am looking to modify the HTML of a webpage by adding an element. Prior to modification: div p something /p /div Post modification: div form p something /p /form /div Is it feasible to accomplish this task? I would greatly appreciate any guidance. Than ...

pythonhtmlseleniumelement

Inconsistencies observed during the native JSON import process in JavaScript

Encountered a strange behavior when loading a JSON file into JavaScript while working on a React project. Seeking an explanation and guidance on properly accessing data from the JSON data store. The JSON file contains product data: { "product ...

javascripthtmlreactjsjson

What impact does setting everything to position:relative have on a webpage?

I stumbled upon some CSS / HTML examples and came across this interesting snippet: *, *:before, *:after { position: relative; } It appears that implementing this rule can have a notable impact on the layout. What might be the rationale behind this ...

htmlcsslayoutcss-position

I'm having trouble making the colors change on my Icon font/sprite rollover

I am currently attempting to position some related icons above my main navigation menu. The goal is to change the text and icon colors when a user hovers over a specific area (the tag with large padding). Unfortunately, I am facing challenges in achieving ...

htmlcsscss-sprites

How to toggle a specific element in Bootstrap 4 with a single click, without affecting other elements

I've been struggling with a frustrating issue: I have 3 elements next to each other at the bottom of the fixed page. I tried using Bootstrap4 toggles to display only text when a user clicks on an image, but it ends up toggling all the images instead o ...

htmlcssbootstrap-4toggle

Tips for changing the color of an underline in an <a> tag when it is hovered over

Is it possible to change the color of the underline in an <a> tag when hovering over it? After some investigation, it seems that direct color changes are not feasible. Instead, you can use the border-bottom option. However, my attempt did not yield ...

htmlcss

Focus on input using jQuery (fixed focus)

How can I ensure that my input always has value and the focus remains fixed on it until values are typed, preventing the cursor from escaping the input field? While I know the existence of the focus() function, how can I effectively utilize it as an event ...

javascriptjqueryhtml

Struggling with Duplicated Images

Currently working on a website using only HTML and CSS. I am still learning the ropes in this area. My goal is to create a layout with a header, body, and footer that repeat to fill up the entire page, similar to envato.com. Here is a snippet of the code I ...

csshtml

Is there a restriction on the maximum size of a CSS file?

Currently, I am working on building a site using ASP.NET MVC. The CSS file that I have been working on has now grown to 88KB in size and contains over 5,000 lines of code. Recently, I have noticed that some styles that I added towards the end of the file a ...

asp.netcssasp.net-mvc

Using a background image in CSS

I'm having an issue with this code. It doesn't seem to be displaying anything on the screen: <!DOCTYPE HTML> <head> <title> CSS(lab2) </title> <meta charset="UTF-8"> <style type = "text/css"> ...

htmlcss

Guide to adjusting margin size according to specific screen size thresholds?

I've set up a series of reactstrap cards that are dynamically organized into rows. On "md" screen sizes and larger (bootstrap), there will be 3 cards per row, while fewer screens will display 2 cards. Here's the component: <Card outline ...

htmlcssreactjsbootstrap-4

Matching multiple divs with different ids in PHP using preg_match_all and regex

I have an HTML page structured like this: <!DOCTYPE html> <html> .... <body> <div class="list-news fl pt10 "> Blue </div> <div class="list-news fl pt1 ...

phpjqueryhtmlcssregex

Creating a dynamic and adaptive horizontal SVG line for your website

Understanding how SVGs function is still a bit unclear to me. I know that the viewBox property plays a role in scaling SVGs, and I have come across advice suggesting not to specify height and width attributes when creating responsive SVGs. While there are ...

htmlcsssvg

Need at least one form input field out of three to be completed

Currently, I am developing a database program where users are required to enter some of their contact information. <form action="add_action.php" method="POST"> <div class="modal-body"> Name: <br> ...

htmlformsinput

"Enhancing the appearance of sorted divs using CSS3 animations in jQuery

Looking to enhance the sorting functionality of divs using jQuery by incorporating CSS3 transition animations for smoother transitions. Encountering an issue where the CSS3 transition animation is not functioning as expected, currently investigating the r ...

jquerycss

Ways to customize CSS styles for a single page?

<head> <link href="index.css" rel="stylesheet"> <style> #amor_di_mundo{ color:#ffffff; } </style> </head> <body> <div id='divL'> <div id='amor_di_mundo'>Amor di Mundo</div> <di ...

htmlcss

Reposition icons to the center within the icon-div container

I am trying to center align the elements in my icon-div as shown in the wireframe image. What steps should I take to achieve this layout? HTML: <div class="icons_div"> <div class="row bg-secondary"> <div class="col-sm-2"> ...

htmlcssfrontendbootstrap-4web-frontend