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

Reverting back to the specified CSS style

In my application, I have a common HTML component styled as follows: .box { min-width: 100px; padding: 20px 10px; } There are over 100 of these components and they each have a unique border style without a bottom border: .box:nth-child(1) { border ...

cssoverriding

Choose just one column within an HTML table

Is there a way to easily select the text of a single column from an HTML table using just the mouse pointer? Imagine you have a table that looks something like this: https://i.sstatic.net/n3lZR.png When trying to select only the text in the Lastname col ...

jqueryhtmlcss

Alignment and spacing in a flexible direction

Hello, I am developing a bar app. <AppBar position="sticky" className={classes.appBar} > <Container maxWidth="lg"> <Toolbar className={classes.root}> <Typography noWrap> <img src={require("./node ...

cssreactjsmaterial-ui

Tips for creating a dynamic logo that zooms in when you hover over it

Is there a way to create a zoom effect for the logo in my navigation bar when hovering over it without using jQuery? I've tried various codes from different sources but none seem to work. The .logo class is assigned to the logo in the nav bar. Any sug ...

htmlcss

Tips for successfully sending data to an ng-include controller

So, I've got this ng-include html element, and I'm trying to figure out how to pass data from an external source to the controller. The primary controller is responsible for fetching json data from a http webservice, and then parsing that data i ...

javascripthtmlangularjs

Unusual discovery: Mysterious object manifesting in my HTML on Chrome/Webkit (with visual evidence and interactive demonstration)

I'm at a loss with this peculiar artifact that has appeared in my HTML - take a look at this highly magnified screenshot: Highlighted in red is this bizarrely small line. I've scoured my code but can't seem to pinpoint its origin. I'v ...

htmlcssgoogle-chromewebkit

Displaying divs in a reverse order can bring a unique perspective

I have multiple sibling divs that are styled with position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%;. These divs act as message boxes and are created by a third-party ASP.NET control, preventing me from altering their order in t ...

htmlcss

Tips for utilizing the output of a pre-defined function within another function in SASS

How can I effectively utilize the outcome of darken( $var, 10% ) in the SASS function oppositeColor( $darkenedColor )? The code I am working with currently looks like this: $color1: #000000 !default; $color2: darken( $color1, 5% ) !default; $color3: oppos ...

csswebpacksassnode-sasssass-loader

Combining four numbers to calculate a total with the click of a button

I am currently attempting to calculate the sum of 4 entries in 4 separate text fields, and everything appears to be working correctly except that when I click the button, the sum is not being set. For example, if I enter the number 1 in each text input, th ...

javascripthtml

Place form at the center of the Bootstrap Modal

My question is, how can I center the entire form, including the input fields and labels, within the modal? Here is also a helpful Fiddle: http://example.com, although the snippet provided should work as well. <script src="https://example.com/bootstr ...

javascriptjqueryhtmlcsstwitter-bootstrap

Validation for HTML5 does not appear when inputmask is used for entering mobile numbers

One problem that I have encountered is when using the input type = "text" with required = "required" for a mobile number along with an input mask. In this scenario, if a user does not enter any value, the HTML5 validation message does not appear. Instead, ...

jqueryhtmlvalidationjquery-inputmaskinput-mask

Solving the CSS Trick: Responsive Data Table (featuring inline editing) Display Glitch

In my quest to create a responsive table with inline editing, I turned to Chris's guide at CSS-Tricks (check it out here). To see how it all comes together, take a look at this Plunker demo. On mobile screens, the responsiveness is on point. https: ...

htmlcssangularjsdatatableresponsive-design

Using Jquery to determine if a div is empty, excluding any content before or after it

I'm looking to use JQuery to determine if a Div is empty without taking into account any content added before or after it. When checking for emptiness, I want to ignore anything placed before or after the div. $(function(){ if($('#content&ap ...

jqueryhtmlcss

Ways to align two divs side by side using CSS and HTML

Here is a question that needs solving: I have two elements that need to be displayed in one row at a specific ratio, with the same pattern repeating in subsequent rows. However, the content of the next row is appearing in the unused space of the previous r ...

htmlcss

The parent element of a 3D div is causing issues with hovering and clicking on the child elements

In my scenario, the parent div is transformed in 3D with rotation, causing it to move to the backside. The issue arises with the child div containing a button that becomes unclickable due to the parent div position. Setting backface-visibility to hidden al ...

javascriptphpjqueryhtmlcss

Some sections of the HTML form are failing to load

I'm currently following a tutorial and applying the concepts to a Rails project I had previously started. Here's my main.js: 'use strict'; angular.module('outpostApp').config(function ($stateProvider) { $stateProvider.sta ...

javascripthtmlangularjs

Solving alignment issues by utilizing a clever negative margin-left technique for compact windows

I've managed to center-align a div using the following method: <div id="container" style="position:absolute; top:0px; left:50%; margin-left:-500px; width:1000px;"></div> After referring to this solution Trying to center div horizontally ...

htmlcss

Reposition the button alongside the textarea

Seems like this is a common inquiry. I am still learning the ropes when it comes to CSS and JavaScript. I have a textarea with a button beneath it, and I would like the button to stay aligned with the textarea as I resize it! Any suggestions on how I cou ...

htmlcsstextarea

The persistent underline on the tooltip just won't go away

Hey there, this is my first time posting a question here so I hope I got everything right! I'm currently in the process of creating a form for a WordPress site using Bootstrap. I need to incorporate tooltips with Font Awesome icons, but for some reas ...

csswordpressbootstrap-4

Creating a dynamic 2D image using HTML5 animation

As a beginner HTML5 developer, I have been exploring ways to create an animated image using multiple jpg files stored in a specific folder on my website. My goal is to design an animation of a rabbit running across the page when a user clicks on a button. ...

javascriptjqueryhtmlcss