I have been working on a JSFiddle code where I am trying to apply a clip to an image using only CSS, but unfortunately, I have not had any success so far.
Initially, I attempted to place the image within an external div and apply the clip to that div, but once again, my efforts did not yield the desired result.
If anyone has any insights or ideas as to why this may be happening, I would greatly appreciate it!
Below is the snippet of CSS code:
img{
width:500px;
height 100px;
top:10px;
left:10px;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,1);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,1);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,1);
}
#image{
clip: rect(20px, 20px, 20px 20px);
}
Here is the corresponding HTML code:
<div id="image">
<img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">
</div>