Enhancing Image Quality upon Hovering

Is there a way to prevent the content of the article from moving when an image becomes absolutely positioned? The issue I am facing is that the image overlaps its container with overflow: hidden only when the img is absolute positioned.

article {
  background: #e8e8e8;
  color: #484848;
  overflow: hidden;
  padding: 0.5rem;
  margin: 2rem auto 0 auto;
  width: 60vw;
}

section {
  float: left;
  margin-right: 0.5rem;
}

p {
  margin: 0;
}

img {
  transition: 0.2s linear;
  object-fit: cover;
  width: 128px;
  height: 128px;
}

img:hover {
  position: absolute;
  transform: scale( 1.5 );
}
<article>
  <section>
    <img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
    <img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
  </section>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

How can I ensure that all the content within the article remains static once the image is set to absolute positioning?

Please avoid solutions involving JavaScript.

htmlcssdom

Answer №1

Using "float: left" on p resolved the issue!.

article {
  background: #e8e8e8;
  color: #484848;
  overflow: hidden;
  padding: 0.5rem;
  margin: 2rem auto 0 auto;
  width: 60vw;
}

section {
  float: left;
  margin-right: 0.5rem;
}

p {
  margin: 0;
  float:left;
}

img {
  transition: 0.2s linear;
  object-fit: cover;
  width: 128px;
  height: 128px;
}

img:hover {
  position: absolute;
  transform: scale( 1.5 );
}
<article>
  <section>
    <img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
    <img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
  </section>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

To prevent any interaction between p and the images, ensure that before hovering over the text won't affect the image or its own position.

Answer №2

If you want to animate an element, the trick is to nest it within a container and then trigger the animation upon hovering over that container.

article {
  background: #e8e8e8;
  color: #484848;
  padding: 0.5rem;
  margin: 2rem auto 0 auto;
  width: 60vw;
}

section {
  float: left;
  margin-right: 0.5rem;
}

p {
  margin: 0;
}

img {
  transition: 0.2s linear;
  object-fit: cover;
  width: 128px;
  height: 128px;
}

.image-container {
  display: inline-block;
}

.image-container:hover > img {
  transform: scale( 1.5 );
}
<article>
  <section>
    <div class="image-container">
      <img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>  
    </div>
    <div class="image-container">
      <img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
     </div>
  </section>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

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

Is there a way to log and process div data posted using jQuery in CSS format?

I am looking to extract and log a JavaScript-calculated result from an anonymous survey created using a WordPress plugin. The generated HTML code is: <div ref="fieldname57_1" class="cff-summary-item"> <span class="summary-field-title cff-summary ...

jquerycss

What could be the reason for the lower section of my website not being displayed?

I'm having an issue with a new div I added to the bottom half of my website - it's not showing up. Oddly enough, when I test the same code on a separate web page, it works fine. Can someone please take a look at the code and help me out? Thank yo ...

pythonhtmlcssdjango

Optimal Method for altering Material UI Icon's height

Placing two icons from Material UI Icons side by side in a row reveals that although their heights are both set to 24px, the actual height of the paths within each icon differs - one being 18px and the other being 22px. This inconsistency in height is not ...

cssreactjsmaterial-ui

Why is my card not laying flat in a horizontal position?

Could you please assist with aligning the cards horizontally in a row instead of vertically? I would like to have 3 cards in one row. Thank you. <div class="container"> <div class="row"> <div class="col-md-4"> <di ...

htmlbootstrap-5bootstrap-cards

Having trouble locating HTML elements by their id when typing into a box using cy.get in Cypress with JavaScript

I am a novice in working with cypress and HTML, and I am currently attempting to enter an address in the specified address field. <input type="text" title="Street Address 1" name="billing[street][]" id="billing:street1" value="" class="input-text " ...

javascripthtmlcypress

Remove elements from an array based on the indices provided in a separate array

1) Define the array a = [a,b,c,d,e,f,g,h,i,j]; using JavaScript. 2) Input an array 'b' containing 5 numbers using html tags. This will be referred to as the 'b' array. 3) Insert elements into array 'b' ensuring they are alwa ...

javascripthtmlarrayssplice

Ensuring Input Accuracy with jQuery Form Validation

I have implemented a form validation code that is currently functioning correctly. Below is the snippet of the code I used: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script ...

jqueryhtmljquery-validate

Firefox failing to interpret nested element background

I'm facing an unusual problem with Firefox while developing a menu that has a maximum of three levels. The issue seems to be isolated to Firefox as everything works perfectly in Chrome. When I click on 'First Level Menu', a ul opens with two ...

htmlcssfirefox

DOMPDF struggles with rendering a font and instead displays circular shapes

After following the instructions in this guide: github.com/dompdf/dompdf/wiki/UnicodeHowTo I ran the load_font.php script, verified that the font files were successfully copied to /dompdf/lib/fonts, and ensured that the font information was added to the f ...

phpcsspdffontsdompdf

Initializing an HTML5 video player directly from an Array

I am trying to populate a video player on my webpage with an array of videos. Here is the code I have so far: var current = 0; var videos = ["01", "02", "03", "04"]; function shuffle(array) { var currentIndex = array.length, temporaryValue, randomInde ...

javascriptarrayshtmlvideodynamic

Instructions on setting a photo as a background image using a text-based model

I'm a beginner with Angular so I may have a simple question. I am using an image from the Google API, which is not a URL. How can I set this image as the background-image in a CSS tag that only accepts URIs? Thank you! ...

cssangularionic-framework

Fixing the background transition issue on Safari is a common problem that many users encounter

My background image, which is overlaid with a gradient, does not show up on Safari (although it works perfectly on Chrome). body{ background:linear-gradient(rgba(0, 0, 0, 0.95),rgb(0, 0, 0, 0.95)),url("https://www.w3schools.com/cssref/img_tree.gif" ...

htmlcss

The jQuery offset() function is not functioning correctly due to an improper value

When specifying like this: <div id="Chart1"/> <div id= "Chart2"/> and attempting to get the offset top value ($("#Chart2").offset().top) of the second div, it does not take into account the previous div element. Sample link: However, if I s ...

jqueryhtml

A guide to adjusting the width without affecting the td element

Currently, I am facing a challenge while coding in HTML. I am trying to create a table with a header (time range) that fits on a single line without affecting the width of the td elements. Below is the code snippet: <table style="border:1px solid #8c ...

htmlcss

Ways to create a gap between a model's label and the corresponding text field

I am attempting to create a gap between the label and text field using Twitter Bootstrap. Below is the screenshot https://i.sstatic.net/6f8CA.jpg I would like to add some space between User Name label area User Name text field same with other fields. I ...

htmltwitter-bootstrap

Exploring the origins of CSS through patch design

Want to learn how to create a background like this using CSS? Check out this link for inspiration! ...

htmlcss

How can you determine if a DIV element is within view in HTML (without being overflowed)?

Is there a way to determine if a DIV is within its container and therefore visible? In this scenario, the active button (highlighted) can be seen because it is contained within the boundaries: However, in this case: The active button cannot be viewed as ...

htmlcss

Optimizing Bootstrap for Tablet Browsing in Internet Explorer

Hey there, I have a question regarding Internet Explorer and tablets. As I revamp this website and integrate Bootstrap into it, my focus is currently on the small-sized IE browser for tablets. My dilemma arises from not knowing if there are any tablets th ...

htmlcssinternet-explorertwitter-bootstrap-3

Obtain the PHP function output through asynchronous JavaScript and XML programming

I have a form that collects user input and saves it to the database. After submitting the form, an ajax call is made to the action.php file. e.preventDefault(); $.ajax({ type: "POST", url: "action.php", data: senData, dataType: "JSON", ...

javascriptphphtmlajaxforms

What is the method to obtain the content height of individual pages in Android, with or without the use of JavaScript?

I am facing an issue while trying to retrieve the content height of each webpage consecutively. When I load pages separately, I can successfully get the height of each page. However, when I attempt to fetch the content height continuously for webpages in a ...

javascriptandroidhtmlwebviewwebclient