CODEWITHSUNDEEP
htmlcss
AL-zami
AL-zami

Reputation: 9066

experiment with clip property in css

i am experimenting with the clip property in css.here inside an unordered list there will be four clipped images.First two in first row,second two in second row.But the images are not visible.why is it happening? how it can be fixed? jsfiddle

<html>
<head>
<style>
  body{
    overflow:hidden;
  }
  ul{
    width:200px;
    height:200px;
    display:table;
  }
  li{
    float:left;
    width:100px;
    height:100px;
    position:relative;
  }
  li img{
    position:absolute;
    clip:rect(100px,200px,200px,300px);
  }

</style>
</head>
<body>
  <ul>
    <li><img src="cat1.jpg" ></li>
    <li><img src="cat2.jpg"></li>
    <li><img src="cat3.jpg"></li>
    <li><img src="cat4.jpg" ></li>
  </ul>
</body>
</html>

Upvotes: 0

Views: 63

Answers (2)

Bojana Šekeljić
Bojana Šekeljić

Reputation: 1056

Remove absolute position of the images, and add overflow: hidden; to the prent li element: Here is the updated fiddle

EDIT:

You shouldn't be using clip property to achieve what you need. One way to do it is to give overflow: hidden to the parent li element, keep the position: absolute of the img and give it appropriate top and left coordinates, instead of clip coordinates. So the effect we are using is to use the dimensions of parent li element to mask parts of the image that shouldn't be visible and to move the image to the right coordinates.

Here is the updated fiddle:

Upvotes: 1

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

You can try below code:

Working Demo

li img{height:100px;width:100px;}
li img{clip:rect(100px,200px,200px,300px);}

Upvotes: 1

Related Questions