groups

Link to this snippet:


Download to Code Collector

language: CSS
licence: Other

Mask Content

options: send to code collector • view all sheik's snippets
/*My original images are in rectangle format. I want to scale it down by 50% to create a thumbnail gallery in a square format. So, I used the width and height property to resize the images and mask them with the clip property. Then, I used the left property to shift the images to the left by 15px.*/

.clip {
  margin: 0 10px 0 0;
  position: relative;
  width: 70px;
  height: 70px;
  border: solid 1px #ccc;
}
.clip img {
  width: 100px;
  height: 70px;
  position: absolute;
  clip: rect(0 85px 70px 15px);
  left: -15px;

}

/* The clip property is like a mask. It allows you to mask the content of an element in a rectangle shape. To clip an element: you must specify the position to absolute. Then, specify the top, right, bottom, and left value relative to the element.*/