Upscaling Image on Hover - html

Question

I want to upscale image on hover, but the problem is I can make it overlapse its own container with overflow: hidden only by making img absolute positioned, wherefore all article content 'thinks' that there is no image in container.
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 to freeze all article content after img becomes absolute positioned?
Please, no JS solutions.

Answer 1

float:left on p done the work!.
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>
As you want p to don't interact with images then before hover text will also don't interact with image and don't change it's own position.

Answer 2

The trick is to put the element you want to animate into a container, and then trigger the animation when you hover the 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>