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.<\/p>\n\n\n\n
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?<\/em><\/p>\n\n\n\n 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.<\/p>\n\n\n\n Great for UI, hover effects, and responsive layouts.<\/p>\n\n\n\n Tip: Use PNG or SVG masks with transparency to get precise shapes and smooth edges. See background on transparent image file types<\/a>.<\/p>\n\n\n\n Ideal for vector-precise shapes, reusable symbols, and animations.<\/p>\n\n\n Useful when you need programmatic masking in a drawing pipeline.<\/p>\n\n\n You can also handle masking and clipping non-destructively at delivery time. For example, serve a circular version of a square image<\/a> using a URL-based transformation. Your original remains unchanged and derived versions are generated on request. See the concept of image URLs for transformations<\/a>.<\/p>\n\n\n\n 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<\/a>. 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<\/a>.<\/p>\n\n\n\n Example idea using a URL transformation as a code snippet:<\/p>\n\n\nAnswer:<\/h2>\n\n\n\n
Core concepts<\/h3>\n\n\n\n
\n
CSS approaches<\/h3>\n\n\n\n
\n
.frame<\/span> {\n\u00a0 width<\/span>: 300px<\/span>;\n\u00a0 height<\/span>: 180px<\/span>;\n\u00a0 overflow<\/span>: hidden; \u00a0 \u00a0 \u00a0 \/* hides overflow without altering the image *\/<\/span>\n}\n.frame<\/span> img<\/span> {\n\u00a0 width<\/span>: 100%<\/span>;\n\u00a0 object-fit<\/span>: cover;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n\n
.hex<\/span> {\n\u00a0 width<\/span>: 300px<\/span>;\n\u00a0 height<\/span>: 300px<\/span>;\n\u00a0 clip-path<\/span>: polygon<\/span>(\n\u00a0 \u00a0 25%<\/span> 6.7%<\/span>, 75%<\/span> 6.7%<\/span>, 100%<\/span> 50%<\/span>,\n\u00a0 \u00a0 75%<\/span> 93.3%<\/span>, 25%<\/span> 93.3%<\/span>, 0%<\/span> 50%<\/span>\n\u00a0 );\n\u00a0 overflow<\/span>: hidden;\n}\n.hex<\/span> img<\/span> { width<\/span>: 100%<\/span>; height<\/span>: 100%<\/span>; object-fit<\/span>: cover; }<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n\n
.masked<\/span> {\n\u00a0 width<\/span>: 320px<\/span>;\n\u00a0 height<\/span>: 320px<\/span>;\n\u00a0 -webkit-mask-image<\/span>: radial-gradient<\/span>(circle at 50%<\/span> 50%<\/span>, #000<\/span> 60%<\/span>, transparent 61%<\/span>);\n\u00a0 mask-image<\/span>: radial-gradient<\/span>(circle at 50%<\/span> 50%<\/span>, #000<\/span> 60%<\/span>, transparent 61%<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nSVG approaches<\/h3>\n\n\n\n
<svg<\/span> viewBox<\/span>=\"0 0 400 300\"<\/span> width<\/span>=\"400\"<\/span>><\/span>\n\u00a0 <defs<\/span>><\/span>\n\u00a0 \u00a0 <clipPath<\/span> id<\/span>=\"cutout\"<\/span> clipPathUnits<\/span>=\"objectBoundingBox\"<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <circle<\/span> cx<\/span>=\"0.5\"<\/span> cy<\/span>=\"0.5\"<\/span> r<\/span>=\"0.45\"<\/span> \/><\/span>\n\u00a0 \u00a0 <\/clipPath<\/span>><\/span>\n\n\u00a0 \u00a0 <mask<\/span> id<\/span>=\"fadeMask\"<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <linearGradient<\/span> id<\/span>=\"g\"<\/span> gradientTransform<\/span>=\"rotate(90)\"<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 <stop<\/span> offset<\/span>=\"0%\"<\/span> stop-color<\/span>=\"white\"<\/span>\/><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 <stop<\/span> offset<\/span>=\"100%\"<\/span> stop-color<\/span>=\"black\"<\/span>\/><\/span>\n\u00a0 \u00a0 \u00a0 <\/linearGradient<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <rect<\/span> width<\/span>=\"100%\"<\/span> height<\/span>=\"100%\"<\/span> fill<\/span>=\"url(#g)\"<\/span>\/><\/span>\n\u00a0 \u00a0 <\/mask<\/span>><\/span>\n\u00a0 <\/defs<\/span>><\/span>\n\n\u00a0 <image<\/span> href<\/span>=\"photo.jpg\"<\/span> width<\/span>=\"400\"<\/span> height<\/span>=\"300\"<\/span> clip-path<\/span>=\"url(#cutout)\"<\/span>\/><\/span>\n\u00a0 <image<\/span> href<\/span>=\"photo.jpg\"<\/span> width<\/span>=\"400\"<\/span> height<\/span>=\"300\"<\/span> mask<\/span>=\"url(#fadeMask)\"<\/span>\/><\/span>\n<\/svg<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nCanvas approach<\/h3>\n\n\n\n
const<\/span> canvas = document<\/span>.getElementById('c'<\/span>);\nconst<\/span> ctx = canvas.getContext('2d'<\/span>);\nconst<\/span> img = new<\/span> Image();\nimg.src = 'photo.jpg'<\/span>;\nimg.onload = ()<\/span> =><\/span> {\n\u00a0 ctx.drawImage(img, 0<\/span>, 0<\/span>, canvas.width, canvas.height);\n\n\u00a0 \/\/ Create mask<\/span>\n\u00a0 ctx.globalCompositeOperation = 'destination-in'<\/span>;\n\u00a0 const<\/span> mask = ctx.createRadialGradient(160<\/span>, 120<\/span>, 80<\/span>, 160<\/span>, 120<\/span>, 160<\/span>);\n\u00a0 mask.addColorStop(0<\/span>, 'rgba(0,0,0,1)'<\/span>);\n\u00a0 mask.addColorStop(1<\/span>, 'rgba(0,0,0,0)'<\/span>);\n\u00a0 ctx.fillStyle = mask;\n\u00a0 ctx.fillRect(0<\/span>, 0<\/span>, canvas.width, canvas.height);\n\n\u00a0 \/\/ Reset for future drawing<\/span>\n\u00a0 ctx.globalCompositeOperation = 'source-over'<\/span>;\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nPerformance and quality tips<\/h3>\n\n\n\n
\n
Doing this with Cloudinary workflows<\/h3>\n\n\n\n
\/\/ Circle crop derivative while keeping the original untouched<\/span>\n\/\/ (Example URL pattern for illustration)<\/span>\nhttps:\/\/res.cloudinary.com\/demo\/image\/upload\/w_600,h_600,c_thumb,r_max\/sample.jpg<\/span>\n\n\/\/ Overlay a PNG mask that has transparent center and opaque outer region<\/span>\n\/\/ The alpha channel hides parts of the base image<\/span>\nhttps:\/\/res.cloudinary.com\/demo\/image\/upload\/l_masks:rounded_frame.png,fl_layer_apply\/sample.jpg<\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n