What technique is used to hide part of an image without removing it?

If you have ever needed to reveal a portion of an image on hover, mask a product photo into a custom shape, or crop for layout while still keeping the full original intact, you are looking for a non-destructive approach. This is a common thread in front-end and design communities, since the underlying image often needs to be reused or re-framed later without quality loss.

Hi all, quick design-dev question. I want to hide parts of an image for effects and layout, but keep the full original so I can change or animate reveals later. What technique is used to hide part of an image without removing it? Also, what are the typical ways to do this in CSS, SVG, Canvas, or in design tools, and how do I avoid permanently altering the asset?

The techniques you are looking for are masking and clipping. Both are non-destructive, meaning the changes are able to be undone later. They visually hide pixels while preserving the source, so you can change or animate the reveal later.

• Clipping: Keeps only the part of the image that falls inside a path or shape. Pixels outside are hidden.
• Masking: Uses an alpha or luminance map to control per-pixel visibility. White areas show, black hide, gray partially shows.
• Non-destructive: The underlying image remains unchanged, so you can adjust or reuse it at any time.

Great for UI, hover effects, and responsive layouts.

• Quick framing with overflow

.frame {
  width: 300px;
  height: 180px;
  overflow: hidden;       /* hides overflow without altering the image */
}
.frame img {
  width: 100%;
  object-fit: cover;
}Code language: CSS (css)

• Shape clipping with clip-path

.hex {
  width: 300px;
  height: 300px;
  clip-path: polygon(
    25% 6.7%, 75% 6.7%, 100% 50%,
    75% 93.3%, 25% 93.3%, 0% 50%
  );
  overflow: hidden;
}
.hex img { width: 100%; height: 100%; object-fit: cover; }Code language: CSS (css)

• Masking with mask-image

.masked {
  width: 320px;
  height: 320px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 61%);
  mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 61%);
}Code language: CSS (css)

Tip: Use PNG or SVG masks with transparency to get precise shapes and smooth edges. See background on transparent image file types.

Ideal for vector-precise shapes, reusable symbols, and animations.

<svg viewBox="0 0 400 300" width="400">
  <defs>
    <clipPath id="cutout" clipPathUnits="objectBoundingBox">
      <circle cx="0.5" cy="0.5" r="0.45" />
    </clipPath>

    <mask id="fadeMask">
      <linearGradient id="g" gradientTransform="rotate(90)">
        <stop offset="0%" stop-color="white"/>
        <stop offset="100%" stop-color="black"/>
      </linearGradient>
      <rect width="100%" height="100%" fill="url(#g)"/>
    </mask>
  </defs>

  <image href="photo.jpg" width="400" height="300" clip-path="url(#cutout)"/>
  <image href="photo.jpg" width="400" height="300" mask="url(#fadeMask)"/>
</svg>Code language: HTML, XML (xml)

Useful when you need programmatic masking in a drawing pipeline.

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'photo.jpg';
img.onload = () => {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  // Create mask
  ctx.globalCompositeOperation = 'destination-in';
  const mask = ctx.createRadialGradient(160, 120, 80, 160, 120, 160);
  mask.addColorStop(0, 'rgba(0,0,0,1)');
  mask.addColorStop(1, 'rgba(0,0,0,0)');
  ctx.fillStyle = mask;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Reset for future drawing
  ctx.globalCompositeOperation = 'source-over';
};Code language: JavaScript (javascript)

• Prefer vector-based clip-path or SVG for sharp, scalable shapes.
• PNG or SVG masks are ideal when you need smooth alpha transitions.
• If you export masks, keep them optimized. Complex paths and large PNG masks can impact rendering time.

You can also handle masking and clipping non-destructively at delivery time. For example, serve a circular version of a square image using a URL-based transformation. Your original remains unchanged and derived versions are generated on request. See the concept of image URLs for transformations.

For shape-driven presentation, you can overlay a mask or frame, or combine base image plus shape using compositing. Here is a guide that covers layering fundamentals: how to overlay a picture on a picture. When using alpha-transparent PNG or SVG assets as overlays, you effectively achieve non-destructive masking at delivery time. Choosing the right format for the mask matters, so review transparent image file types.

Example idea using a URL transformation as a code snippet:

// Circle crop derivative while keeping the original untouched
// (Example URL pattern for illustration)
https://res.cloudinary.com/demo/image/upload/w_600,h_600,c_thumb,r_max/sample.jpg

// Overlay a PNG mask that has transparent center and opaque outer region
// The alpha channel hides parts of the base image
https://res.cloudinary.com/demo/image/upload/l_masks:rounded_frame.png,fl_layer_apply/sample.jpgCode language: PHP (php)

• Use clip-path or mask-image in CSS for layout-integrated, non-destructive hiding.
• Use SVG clipPath or mask for precision shapes and scalable effects.
• Use Canvas compositing for dynamic, programmatic masking.
• Use design-tool masks for editable, non-destructive edits in source files.
• Deliver masked variants via URL-based transformations without altering the original.

• Background Remover
• PNG to WebP Converter
• Image Upscaling and Quality Enhancement
• Image to PNG Converter

Ready to build non-destructive, flexible image workflows with on-the-fly transformations and delivery? Create your free Cloudinary account and start transforming images by URL or SDK today.