Menu
I'm using clip to create thumbnails for a gallery. Unfortunately, clip can only be used when an element is absolutely positioned. Applied equally to each img, this of course makes them all sit on each other while using one CSS style, something like this.
.Thumbnails {
position: absolute;
height: 105px;
clip: rect(50px 218px 155px 82px);
}
How can I then position them relative to each other? I just want basic rows.
396
The clip CSS property defines a visible portion of an element. The clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed .
An absolutely positioned element is an element whose computed position value is absolute or fixed . The top , right , bottom , and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.)
position: relative places an element relative to its current position without changing the layout around it, whereas position: absolute places an element relative to its parent's position and changing the layout around it.
Here are a few options:
You can use the clip property to prevent the overlap and create thumbnails at the same time: http://www.cssplay.co.uk/menu/clip_gallery.html
You can use negative margins to separate the images from each other, and overflow to create the thumbnails: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
77
Update from 2021.
CSS3 has introduced clip-path property, which provides the desired functionality - clipping any element.
https://www.w3schools.com/cssref/css3_pr_clip-path.asp
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
