jesh Posted November 1, 2006 Share Posted November 1, 2006 Every once in awhile I branch out and try new things. Today, the new thing is a photo album viewer control.In the process of doing this, I thought that the clip property in CSS would work PERFECTLY for what I was trying to do - namely, hide some content behind a little view window. However, I can't get it to do anything. Anyone have any luck using the CSS clip property?I've tried placing the style on the div and I've tried placing it on the img. I've tried specifying a width/height for the div that is greater than that of the img and I've tried specifying a width/height for the div that is less than that of the img. I've also tried setting the overflow to "hidden" on the div and I've tried using positioning. Nothing seems to work.Here is my code sample, can anyone get it to clip the image? <html><head><style type="text/css">#Clipper { clip: rect(10px, 40px, 40px, 0px); }</style></head><body><div id="Clipper"><img src="http://www.w3schools.com/images/w3default80.jpg" /></div></body></html> Link to comment Share on other sites More sharing options...
jesh Posted November 1, 2006 Author Share Posted November 1, 2006 Hmm, I guess I found the answer. You have to specify a z-index as well.This code clips the image: <html><head><style type="text/css">#Clipper{ width: 50px; height: 50px; clip: rect(10px, 40px, 40px, 0px); position: absolute; z-index: 3;}</style></head><body><div id="Clipper"><img src="http://www.w3schools.com/images/w3default80.jpg" width="234" height="91" /></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now