Jump to content

CSS Clip


jesh

Recommended Posts

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...