'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);
}
css


Solution 1:[1]

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

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vaibhav Jain
Solution 2 Mirko

Related Questions