CODEWITHSUNDEEP
htmlcss
menaka
menaka

Reputation: 1068

Over flow hidden div

Is there way to get a div to show only specific location to view and other internal element hidden as overflow hidden

For example the div have the dimensions of (500px x 500px ), but i only want to show (100px x 100px). And the elements inside the div not to be scaled down, but shown as partially.

enter image description here

Just like this image i only want to show just what inside this red area and other elements to be hidden.

The current code =>

<div class="box1">
    <div style="">
        Something 2<br>
        Something 3<br>
        Something 4<br>
        Something 5<br>
        Something 6<br>
        Something 7<br>
        Something 8<br>
        Something 9<br>
        Something 10<br>
    </div>
</div>

And the CSS =>

.box1{
 position: relative;
 overflow: hidden;
 top:10px;
 width:100px;
 height: 100px;
}

.box2{
position: absolute;
background-color: #00CC00;
width: 500px;
height: 500px
}

Upvotes: 0

Views: 67

Answers (1)

ashish singh
ashish singh

Reputation: 6904

yes this can be done

read about https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path simple demo below with animation.

td{
  padding: 20px;
   background-color: #0ad;
}


.clipped {
  animation : clip 2s linear infinite alternate;
}


@keyframes clip {
  from { clip-path: polygon(0px 0px, 100px 0px , 100px 100px, 0px 100px)  }
  to {clip-path: polygon(0px 200px, 100px 200px , 100px 300px, 0px 300px) }
}
<div class="container">
  <table>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>    
  </table>
  
  </div>
  
  <div class="clipped">
  <table>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>
<tr>
  <td>01</td>
  <td>02</td>
</tr>    
  </table>
  
  </div>

Upvotes: 2

Related Questions