CODEWITHSUNDEEP
css
Tukhsanov
Tukhsanov

Reputation: 303

Why the clip property only works on elements with position: absolute or position: fixed

Why the clip property only works on elements with position: absolute or position: fixed. Why it won’t work with relative or static positioning. heres is my code. Fiddle

<span>Hover me</span>
<img src="http://sambuh.com/assets/images/news%20headlines/bukhara-autumn1.jpg">



img {
  position: absolute;
  left: 10px;
  top: 60px;
  display: block;
  clip: rect(200px, 0, 0, 400px);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

span:hover ~ img {
  clip: rect(0px, 400px, 400px, 0);
}

Upvotes: 1

Views: 1322

Answers (3)

Mirko
Mirko

Reputation: 2466

clip:rect(0, 0, 0, 0) is deprecated, you should use: clip-path:inset(0 0 0 0), it works with relative positioning.

Upvotes: 0

Vaibhav Jain
Vaibhav Jain

Reputation: 3755

For your question need to understand the difference between various css positioning properties.

Here is some Useful Links:

  1. CSS clip properties with various positions
  2. Difference b/w CSS Positions
  3. Practical Explanation of CSS Positioning

Upvotes: 2

Eevee
Eevee

Reputation: 48566

Because it doesn't. The spec says so.

Why the spec says so is a very different question that I don't have an answer to :)

Upvotes: 4

Related Questions