Mer Man Mer Man - 8 months ago 103
CSS Question

Stop Image from overlapping the screen, causing to have a scrollbar

Stop Image from overlapping the screen, causing to have a scroll bar.
the

it should be like this,

https://jsfiddle.net/Luudbo02/1/

<section class="sec1">
Hello
</section>
<section class="sec2">
<div class="sec2-1">
Image
</div>




.sec1{
background: #ccc;
padding:20px;
z-index: 9999999;
border: 1px solid black;
}
.sec2{
position: relative;
height: 200px;
padding: 10px;
border: 1px solid black;
}
.sec2-1{
transform: scale(1.2);
background: red;
position: relative;
border: 1px solid black;
text-align: center;
}

Answer Source

Add the attribute overflow: hidden to .sec2.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download