{"id":1713,"date":"2012-08-22T07:03:00","date_gmt":"2012-08-22T12:03:00","guid":{"rendered":"http:\/\/www.wiredprairie.us\/blog\/?p=1713"},"modified":"2012-08-22T07:36:55","modified_gmt":"2012-08-22T12:36:55","slug":"how-to-masking-an-image-in-htmlcss","status":"publish","type":"post","link":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1713","title":{"rendered":"How to mask an image in HTML\/CSS"},"content":{"rendered":"

Until browsers all agree on a technique for masking an image in HTML (like \u2013web-kit-mask-image), I\u2019ve got another option: using SVG.<\/p>\n

\"image\"<\/p>\n

I\u2019m creating a single page application to help sell some electronics and other goodies I\u2019ve collected over the years. Rather than the traditional rectangular display of photos, I wanted to try something different. I wanted the photos to be round. However, I didn\u2019t want to create a bunch of round images. <\/p>\n

Enter SVG:<\/p>\n

\n
<svg width="220"<\/span> height="220"<\/span>>
                    <mask id="m1"<\/span>><ellipse cx="110"<\/span> cy="110"<\/span> rx="98"<\/span> ry="98"<\/span> style="fill:white;stroke-width:0;fill-opacity: 1.0"<\/span>><\/ellipse><\/mask>
                    <g>
                        <ellipse cx="110"<\/span> cy="110"<\/span> rx="100"<\/span> ry="100"<\/span> style="stroke-width:10;stroke:#222"<\/span>><\/ellipse>
                        <image href="img\/sales\/lenovo\/IMG_0468.jpg"<\/span> x="-25%"<\/span> y="-25%"<\/span> height="150%"<\/span> width="150%"<\/span> style="mask: url(#m1)"<\/span>><\/image><\/g><\/svg><\/pre>\n
<\/div>\n
The original images aren\u2019t square, so I tweaked the size and position of each so that it would completely fill the ellipse (150% and -25% for size and location).  As a fall back, I\u2019m going to add the CSS property and value \u201cdisplay:none\u201d to a standard HTML img element that will be optionally displayed if the browser can\u2019t do SVG (like IE8 and lower for example). I don\u2019t want to lose a potential sale to images not showing up! I\u2019ll use modernizr<\/a> for SVG detection.<\/p>\n
And although the code above doesn\u2019t demonstrate the technique, you can use CSS to decorate the SVG. Check this<\/a> demo out that I created:<\/p>\n
\"image\"<\/p>\n
\"image\"<\/p>\n
\"image\"<\/p>\n","protected":false},"excerpt":{"rendered":"
Until browsers all agree on a technique for masking an image in HTML (like \u2013web-kit-mask-image), I\u2019ve got another option: using SVG. I\u2019m creating a single page application to help sell some electronics and other goodies I\u2019ve collected over the years. Rather than the traditional rectangular display of photos, I wanted to try something different. I […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[4],"tags":[113,115,114,88,111,112,89],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pd5QIe-rD","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":837,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/837","url_meta":{"origin":1713,"position":0},"title":"Transparent Window Sample in WPF","date":"September 25, 2009","format":false,"excerpt":"For some reason, I wanted to experiment with a transparent window in WPF earlier, along with a custom opacitymask. (I think someone on twitter said something that made me want to throw together something, but by the time I was done, I had forgotten what!). So, here\u2019s what I created:\u2026","rel":"","context":"In "Coding"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2009\/09\/image.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1638,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1638","url_meta":{"origin":1713,"position":1},"title":"Spinning SVG Animation","date":"April 16, 2012","format":false,"excerpt":"Interested in learning a few capabilities of SVG animation this evening from JavaScript in a web page, I put together a simple demonstration. Click on the image to launch the demo. Animating SVG in a modern browser (including IE9) is generally easy enough. This example was slightly more interesting in\u2026","rel":"","context":"In "Coding"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2012\/04\/image23.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1643,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1643","url_meta":{"origin":1713,"position":2},"title":"SVG Setting Text Content Dynamically","date":"April 17, 2012","format":false,"excerpt":"Continuing on a theme of animating SVG, I\u2019ve added a label in the center of the animation which contains the current angle of the ever-rotating marker (in fact in a centered horizontally and vertically SVG text node). (Click image below to try it.) At the bottom of the file from\u2026","rel":"","context":"In "Coding"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2012\/04\/image26.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1397,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1397","url_meta":{"origin":1713,"position":3},"title":"A post not related to Nest thermostat hardware….","date":"January 3, 2012","format":false,"excerpt":"I typed in https:\/\/www.nest.com this evening and instead of the nice looking Nest.com web site, I got this: What?! I hadn\u2019t actually noticed that I\u2019d typed https at first, so I was a bit baffled for a moment. After closer investigation, Nest doesn\u2019t have HTTPS apparently for their marketing\/support web\u2026","rel":"","context":"In "Coding"","img":{"alt_text":"SNAGHTML69c9dbf8","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2012\/01\/SNAGHTML69c9dbf8_thumb.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1996,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1996","url_meta":{"origin":1713,"position":4},"title":"Animating an element’s visibility using AngularJS","date":"January 31, 2014","format":false,"excerpt":"There was a question on StackOverflow about animating an element and I wanted to give it a shot, so here goes: http:\/\/jsfiddle.net\/wiredprairie\/5tFCZ\/1\/ \u00a0 Imagine nearly the simplest Angular JS application possible: