{"id":376676,"date":"2023-02-03T07:11:46","date_gmt":"2023-02-03T15:11:46","guid":{"rendered":"https:\/\/css-tricks.com\/?p=376676"},"modified":"2023-02-03T07:21:36","modified_gmt":"2023-02-03T15:21:36","slug":"a-fancy-hover-effect-for-your-avatar","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/a-fancy-hover-effect-for-your-avatar\/","title":{"rendered":"A Fancy Hover Effect For Your Avatar"},"content":{"rendered":"\n<p>Do you know that kind of effect where someone\u2019s head is poking through a circle or hole? The famous Porky Pig animation where he waves goodbye while popping out of a series of red rings is the perfect example, and <a href=\"https:\/\/css-tricks.com\/re-creating-the-porky-pig-animation-from-looney-tunes-in-css\/\">Kilian Valkhof actually re-created that here on CSS-Tricks a while back<\/a>.<\/p>\n\n\n\n<p>I have a similar idea but tackled a different way and with a sprinkle of animation. I think it\u2019s pretty practical and makes for a neat hover effect you can use on something like your own avatar.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWBjraa\" src=\"\/\/codepen.io\/anon\/embed\/MWBjraa?height=550&amp;theme-id=1&amp;slug-hash=MWBjraa&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWBjraa\" title=\"CodePen Embed MWBjraa\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>See that? We\u2019re going to make a scaling animation where the avatar seems to pop right out of the circle it\u2019s in. Cool, right? Don\u2019t look at the code and let\u2019s build this animation together step-by-step.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-html-just-one-element\">The HTML: Just one element<\/h3>\n\n\n<p>If you haven&#8217;t checked the code of the demo and you are wondering how many <code>div<\/code>s this\u2019ll take, then stop right there, because our markup is nothing but a single image element:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;img src=\"\" alt=\"\"><\/code><\/pre>\n\n\n\n<p>Yes, a single element! The challenging part of this exercise is using the smallest amount of code possible. If you have been <a href=\"https:\/\/css-tricks.com\/author\/afiftemani\/\">following me<\/a> for a while, you should be used to this. I try hard to find CSS solutions that can be achieved with the smallest, most maintainable code possible.<\/p>\n\n\n\n<p class=\"is-style-explanation\">I wrote <a href=\"https:\/\/css-tricks.com\/fancy-image-decorations-single-element-magic\/\">a series of articles<\/a> here on CSS-Tricks where I explore different hover effects using the same HTML markup containing a single element. I go into detail on gradients, masking, clipping, outlines, and even layout techniques. I highly recommend checking those out because I will re-use many of the tricks in this post.<\/p>\n\n\n\n<p>An image file that\u2019s square with a transparent background will work best for what we\u2019re doing. Here\u2019s the one I\u2019m using if you want start with that.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_4BDCAE75E12C1EF4B0F3D6ACE87A49C2ED374481A0BCA5961B57D20797041FE3_1673429708961_av1.png?resize=200%2C200&#038;ssl=1\" alt=\"\" class=\"wp-image-376677\" width=\"200\" height=\"200\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_4BDCAE75E12C1EF4B0F3D6ACE87A49C2ED374481A0BCA5961B57D20797041FE3_1673429708961_av1.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_4BDCAE75E12C1EF4B0F3D6ACE87A49C2ED374481A0BCA5961B57D20797041FE3_1673429708961_av1.png?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_4BDCAE75E12C1EF4B0F3D6ACE87A49C2ED374481A0BCA5961B57D20797041FE3_1673429708961_av1.png?resize=1024%2C1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_4BDCAE75E12C1EF4B0F3D6ACE87A49C2ED374481A0BCA5961B57D20797041FE3_1673429708961_av1.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_4BDCAE75E12C1EF4B0F3D6ACE87A49C2ED374481A0BCA5961B57D20797041FE3_1673429708961_av1.png?resize=768%2C768&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_4BDCAE75E12C1EF4B0F3D6ACE87A49C2ED374481A0BCA5961B57D20797041FE3_1673429708961_av1.png?resize=1536%2C1536&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">Designed by <a href=\"https:\/\/pngtree.com\/freepng\/3d-render-male-avatar-with-blue-sweater-good-for-profile-picture_7497855.html\" rel=\"noopener\">Cang<\/a><\/figcaption><\/figure>\n\n\n\n<p>I\u2019m hoping to see lots of examples of this as possible using real images \u2014 so please share your final result in the comments when you\u2019re done so we can build a collection!<\/p>\n\n\n\n<p>Before jumping into CSS, let\u2019s first dissect the effect. The image gets bigger on hover, so we\u2019ll for sure use <code>transform: scale()<\/code> in there. There\u2019s a circle behind the avatar, and a radial gradient should do the trick. Finally, we need a way to create a border at the bottom of the circle that creates the appearance of the avatar behind the circle.<\/p>\n\n\n\n<p>Let\u2019s get to work!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-scale-effect\">The scale effect<\/h3>\n\n\n<p>Let\u2019s start by adding the transform:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"8\"><code markup=\"tt\">img {\n  width: 280px;\n  aspect-ratio: 1;\n  cursor: pointer;\n  transition: .5s;\n}\nimg:hover {\n  transform: scale(1.35);\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjBNozR\/9731ac6d1db49eab010b2b1b133abe30\" src=\"\/\/codepen.io\/anon\/embed\/preview\/JjBNozR\/9731ac6d1db49eab010b2b1b133abe30?height=550&amp;theme-id=1&amp;slug-hash=JjBNozR\/9731ac6d1db49eab010b2b1b133abe30&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjBNozR\/9731ac6d1db49eab010b2b1b133abe30\" title=\"CodePen Embed JjBNozR\/9731ac6d1db49eab010b2b1b133abe30\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Nothing complicated yet, right? Let\u2019s move on.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-circle\">The circle<\/h3>\n\n\n<p>We said that the background would be a radial gradient. That\u2019s perfect because we can create hard stops between the colors of a radial gradient, which make it look like we\u2019re drawing a circle with solid lines.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"6,7,8,9,10,11,12\"><code markup=\"tt\">img {\n  --b: 5px; \/* border width *\/\n\n  width: 280px;\n  aspect-ratio: 1;\n  background:\n    radial-gradient(\n      circle closest-side,\n      #ECD078 calc(99% - var(--b)),\n      #C02942 calc(100% - var(--b)) 99%,\n      #0000\n    );\n  cursor: pointer;\n  transition: .5s;\n}\nimg:hover {\n  transform: scale(1.35);\n}<\/code><\/pre>\n\n\n\n<p>Note the CSS variable, <code>--b<\/code>, I\u2019m using there. It represents the thickness of the \u201cborder\u201d which is really just being used to define the hard color stops for the red part of the radial gradient.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLqbNYB\/de195eef4df8dfe4c45dee3f6dcd507f\" src=\"\/\/codepen.io\/anon\/embed\/preview\/yLqbNYB\/de195eef4df8dfe4c45dee3f6dcd507f?height=550&amp;theme-id=1&amp;slug-hash=yLqbNYB\/de195eef4df8dfe4c45dee3f6dcd507f&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLqbNYB\/de195eef4df8dfe4c45dee3f6dcd507f\" title=\"CodePen Embed yLqbNYB\/de195eef4df8dfe4c45dee3f6dcd507f\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The next step is to play with the gradient size on hover. The circle needs to keep its size as the image grows. Since we are applying a <code>scale()<\/code> transformation, we actually need to <em>decrease<\/em> the size of the circle because it otherwise scales up with the avatar. So, while the image scales up, we need the gradient to scale down.<\/p>\n\n\n\n<p>Let\u2019s start by defining a CSS variable, <code>--f<\/code>, that defines the &#8220;scale factor&#8221;, and use it to set the size of the circle. I\u2019m using <code>1<\/code> as the default value, as in that\u2019s the initial scale for the image and the circle that we transform from.<\/p>\n\n\n\n<p>Here is a demo to illustrate the trick. Hover to see what is happening behind the scenes:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExpmjXW\/288f0e4bdc2b062d4f03b7db6d56da03\" src=\"\/\/codepen.io\/anon\/embed\/preview\/ExpmjXW\/288f0e4bdc2b062d4f03b7db6d56da03?height=450&amp;theme-id=1&amp;slug-hash=ExpmjXW\/288f0e4bdc2b062d4f03b7db6d56da03&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExpmjXW\/288f0e4bdc2b062d4f03b7db6d56da03\" title=\"CodePen Embed ExpmjXW\/288f0e4bdc2b062d4f03b7db6d56da03\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I added a third color to the <code>radial-gradient<\/code> to better identify the area of the gradient on hover:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"5\"><code markup=\"tt\">radial-gradient(\n  circle closest-side,\n  #ECD078 calc(99% - var(--b)),\n  #C02942 calc(100% - var(--b)) 99%,\n  lightblue\n);<\/code><\/pre>\n\n\n\n<p>Now we have to position our background at the center of the circle and make sure it takes up the full height. I like to declare everything directly on the <code>background<\/code> shorthand property, so we can add our background positioning and make sure it doesn\u2019t repeat by tacking on those values right after the <code>radial-gradient()<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">background: radial-gradient() 50% \/ calc(100% \/ var(--f)) 100% no-repeat;<\/code><\/pre>\n\n\n\n<p>The background is placed at the center (<code>50%<\/code>), has a width equal to <code>calc(100%\/var(--f))<\/code>, and has a height equal to <code>100%<\/code>.<\/p>\n\n\n\n<p>Nothing scales when <code>--f<\/code> is equal to <code>1<\/code> \u2014 again, our initial scale. Meanwhile, the gradient takes up the full width of the container. When we increase <code>--f<\/code>, the element&#8217;s size grows \u2014 thanks to the <code>scale()<\/code> transform \u2014 and the gradient&#8217;s size decreases.<\/p>\n\n\n\n<p>Here\u2019s what we get when we apply all of this to our demo:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYjWNed\/cf9da694f79514eb6a619439de6896c3\" src=\"\/\/codepen.io\/anon\/embed\/preview\/eYjWNed\/cf9da694f79514eb6a619439de6896c3?height=550&amp;theme-id=1&amp;slug-hash=eYjWNed\/cf9da694f79514eb6a619439de6896c3&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYjWNed\/cf9da694f79514eb6a619439de6896c3\" title=\"CodePen Embed eYjWNed\/cf9da694f79514eb6a619439de6896c3\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We\u2019re getting closer! We have the overflow effect at the top, but we still need to hide the bottom part of the image, so it looks like it is popping out of the circle rather than sitting in front of it. That\u2019s the tricky part of this whole thing and is what we\u2019re going to do next.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-bottom-border\">The bottom border<\/h3>\n\n\n<p>I first tried tackling this with the <code>border-bottom<\/code> property, but I was unable to find a way to match the size of the border to the size to the circle. Here&#8217;s the best I could get and you can immediately see it\u2019s wrong:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYLwvxp\/46302a3bb090e857947572e12795dfac\" src=\"\/\/codepen.io\/anon\/embed\/preview\/zYLwvxp\/46302a3bb090e857947572e12795dfac?height=550&amp;theme-id=1&amp;slug-hash=zYLwvxp\/46302a3bb090e857947572e12795dfac&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYLwvxp\/46302a3bb090e857947572e12795dfac\" title=\"CodePen Embed zYLwvxp\/46302a3bb090e857947572e12795dfac\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The actual solution is to use the <code>outline<\/code> property. Yes, <code>outline<\/code>, not <code>border<\/code>. In <a href=\"https:\/\/css-tricks.com\/fancy-image-decorations-outlines-and-complex-animations\/\">a previous article<\/a>, I show how <code>outline<\/code> is powerful and allows us to create cool hover effects. Combined with <code>outline-offset<\/code>, we have exactly what we need for our effect.<\/p>\n\n\n\n<p>The idea is to set an <code>outline<\/code> on the image and adjust its offset to create the bottom border. The offset will depend on the scaling factor the same way the gradient size did.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYjWpZG\/d748690660aa7fff5982f911fa622ace\" src=\"\/\/codepen.io\/anon\/embed\/preview\/eYjWpZG\/d748690660aa7fff5982f911fa622ace?height=550&amp;theme-id=1&amp;slug-hash=eYjWpZG\/d748690660aa7fff5982f911fa622ace&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYjWpZG\/d748690660aa7fff5982f911fa622ace\" title=\"CodePen Embed eYjWpZG\/d748690660aa7fff5982f911fa622ace\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now we have our bottom \u201cborder\u201d (actually an <code>outline<\/code>) combined with the \u201cborder\u201d created by the gradient to create a full circle. We still need to hide portions of the <code>outline<\/code> (from the top and the sides), which we\u2019ll get to in a moment.<\/p>\n\n\n\n<p>Here\u2019s our code so far, including a couple more CSS variables you can use to configure the image size (<code>--s<\/code>) and the \u201cborder\u201d color (<code>--c<\/code>):<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"10,11,12\"><code markup=\"tt\">img {\n  --s: 280px; \/* image size *\/\n  --b: 5px; \/* border thickness *\/\n  --c: #C02942; \/* border color *\/\n  --f: 1; \/* initial scale *\/\n\n  width: var(--s);\n  aspect-ratio: 1;\n  cursor: pointer;\n  border-radius: 0 0 999px 999px;\n  outline: var(--b) solid var(--c);\n  outline-offset: calc((1 \/ var(--f) - 1) * var(--s) \/ 2 - var(--b));\n  background: \n    radial-gradient(\n      circle closest-side,\n      #ECD078 calc(99% - var(--b)),\n      var(--c) calc(100% - var(--b)) 99%,\n      #0000\n    ) 50% \/ calc(100% \/ var(--f)) 100% no-repeat;\n  transform: scale(var(--f));\n  transition: .5s;\n}\nimg:hover {\n  --f: 1.35; \/* hover scale *\/\n}<\/code><\/pre>\n\n\n\n<p>Since we need a circular bottom border, we added a <code>border-radius<\/code> on the bottom side, allowing the <code>outline<\/code> to match the curvature of the gradient.<\/p>\n\n\n\n<p>The calculation used on <code>outline-offset<\/code> is a lot more straightforward than it looks. By default, <code>outline<\/code> is drawn <em>outside<\/em> of the element\u2019s box. And in our case, we need it to <em>overlap<\/em> the element. More precisely, we need it to follow the circle created by the gradient.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"727\" height=\"569\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_4BDCAE75E12C1EF4B0F3D6ACE87A49C2ED374481A0BCA5961B57D20797041FE3_1673437632687_image.png?resize=727%2C569&#038;ssl=1\" alt=\"Diagram of the background transition.\" class=\"wp-image-376678\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_4BDCAE75E12C1EF4B0F3D6ACE87A49C2ED374481A0BCA5961B57D20797041FE3_1673437632687_image.png?w=727&amp;ssl=1 727w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_4BDCAE75E12C1EF4B0F3D6ACE87A49C2ED374481A0BCA5961B57D20797041FE3_1673437632687_image.png?resize=300%2C235&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>When we scale the element, we see the space between the circle and the edge. Let\u2019s not forget that the idea is to keep the circle at the same size after the scale transformation runs, which leaves us with the space we will use to define the outline\u2019s offset as illustrated in the above figure.<\/p>\n\n\n\n<p>Let\u2019s not forget that the second element is scaled, so our result is also scaled&#8230; which means we need to divide the result by <code>f<\/code> to get the real offset value:<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">Offset = ((f - 1) * S\/2) \/ f = (1 - 1\/f) * S\/2<\/code><\/pre>\n\n\n\n<p>We add a negative sign since we need the outline to go from the outside to the inside:<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">Offset = (1\/f - 1) * S\/2<\/code><\/pre>\n\n\n\n<p>Here\u2019s a quick demo that shows how the outline follows the gradient:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwBbvRw\/4474e963f2823899e5b24635c56998fc\" src=\"\/\/codepen.io\/anon\/embed\/preview\/VwBbvRw\/4474e963f2823899e5b24635c56998fc?height=550&amp;theme-id=1&amp;slug-hash=VwBbvRw\/4474e963f2823899e5b24635c56998fc&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwBbvRw\/4474e963f2823899e5b24635c56998fc\" title=\"CodePen Embed VwBbvRw\/4474e963f2823899e5b24635c56998fc\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>You may already see it, but we still need the bottom outline to overlap the circle rather than letting it bleed through it. We can do that by removing the border\u2019s size from the offset:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">outline-offset: calc((1 \/ var(--f) - 1) * var(--s) \/ 2) - var(--b));<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBymOGz\/a4b0f3652cc89ed1613fc78ec89912a4\" src=\"\/\/codepen.io\/anon\/embed\/preview\/qBymOGz\/a4b0f3652cc89ed1613fc78ec89912a4?height=550&amp;theme-id=1&amp;slug-hash=qBymOGz\/a4b0f3652cc89ed1613fc78ec89912a4&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBymOGz\/a4b0f3652cc89ed1613fc78ec89912a4\" title=\"CodePen Embed qBymOGz\/a4b0f3652cc89ed1613fc78ec89912a4\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now we need to find how to remove the top part from the outline. In other words, we only want the bottom part of the image\u2019s <code>outline<\/code>.<\/p>\n\n\n\n<p>First, let\u2019s add space at the top with padding to help avoid the overlap at the top:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"9\"><code markup=\"tt\">img {\n  --s: 280px; \/* image size *\/\n  --b: 5px;   \/* border thickness *\/\n  --c: #C02942; \/* border color *\/\n  --f: 1; \/* initial scale *\/\n\n  width: var(--s);\n  aspect-ratio: 1;\n  padding-block-start: calc(var(--s)\/5);\n  \/* etc. *\/\n}\nimg:hover {\n  --f: 1.35; \/* hover scale *\/\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwBbaYM\/380b4bfb346acea592849f6a1d511c23\" src=\"\/\/codepen.io\/anon\/embed\/preview\/VwBbaYM\/380b4bfb346acea592849f6a1d511c23?height=550&amp;theme-id=1&amp;slug-hash=VwBbaYM\/380b4bfb346acea592849f6a1d511c23&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwBbaYM\/380b4bfb346acea592849f6a1d511c23\" title=\"CodePen Embed VwBbaYM\/380b4bfb346acea592849f6a1d511c23\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>There is no particular logic to that top padding. The idea is to ensure the outline doesn\u2019t touch the avatar&#8217;s head. I used the element&#8217;s size to define that space to always have the same proportion.<\/p>\n\n\n\n<p>Note that I have added the <code>content-box<\/code> value to the <code>background<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">background:\n  radial-gradient(\n    circle closest-side,\n    #ECD078 calc(99% - var(--b)),\n    var(--c) calc(100% - var(--b)) 99%,\n    #0000\n  ) 50%\/calc(100%\/var(--f)) 100% no-repeat content-box;<\/code><\/pre>\n\n\n\n<p>We need this because we added padding and we only want the background set to the content box, so we must explicitly tell the background to stop there.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"adding-css-mask-to-the-mix\">Adding CSS mask to the mix<\/h3>\n\n\n<p>We reached the last part! All we need to do is to hide some pieces, and we are done. For this, we will rely on the <code>mask<\/code> property and, of course, gradients.<\/p>\n\n\n\n<p>Here is a figure to illustrate what we need to hide or what we need to show to be more accurate<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"932\" height=\"526\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_4BDCAE75E12C1EF4B0F3D6ACE87A49C2ED374481A0BCA5961B57D20797041FE3_1673443822002_image.png?resize=932%2C526&#038;ssl=1\" alt=\"Showing how the mask applies to the bottom portion of the circle.\" class=\"wp-image-376679\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_4BDCAE75E12C1EF4B0F3D6ACE87A49C2ED374481A0BCA5961B57D20797041FE3_1673443822002_image.png?w=932&amp;ssl=1 932w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_4BDCAE75E12C1EF4B0F3D6ACE87A49C2ED374481A0BCA5961B57D20797041FE3_1673443822002_image.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_4BDCAE75E12C1EF4B0F3D6ACE87A49C2ED374481A0BCA5961B57D20797041FE3_1673443822002_image.png?resize=768%2C433&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>The left image is what we currently have, and the right is what we want. The green part illustrates the mask we must apply to the original image to get the final result.<\/p>\n\n\n\n<p>We can identify two parts of our mask:<\/p>\n\n\n\n<ul>\n<li>A circular part at the bottom that has the same dimension and curvature as the radial gradient we used to create the circle behind the avatar<\/li>\n\n\n\n<li>A rectangle at the top that covers the area inside the outline. Notice how the outline is outside the green area at the top \u2014 that\u2019s the most important part, as it allows the outline to be cut so that only the bottom part is visible.<\/li>\n<\/ul>\n\n\n\n<p>Here\u2019s our final CSS:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"23,24,25,26,27,28,29\"><code markup=\"tt\">img {\n  --s: 280px; \/* image size *\/\n  --b: 5px; \/* border thickness *\/\n  --c: #C02942; \/* border color *\/\n  --f: 1; \/* initial scale *\/\n\n  --_g: 50% \/ calc(100% \/ var(--f)) 100% no-repeat content-box;\n  --_o: calc((1 \/ var(--f) - 1) * var(--s) \/ 2 - var(--b));\n\n  width: var(--s);\n  aspect-ratio: 1;\n  padding-top: calc(var(--s)\/5);\n  cursor: pointer;\n  border-radius: 0 0 999px 999px;\n  outline: var(--b) solid var(--c);\n  outline-offset: var(--_o);\n  background: \n    radial-gradient(\n      circle closest-side,\n      #ECD078 calc(99% - var(--b)),\n      var(--c) calc(100% - var(--b)) 99%,\n      #0000) var(--_g);\n  mask:\n    linear-gradient(#000 0 0) no-repeat\n    50% calc(-1 * var(--_o)) \/ calc(100% \/ var(--f) - 2 * var(--b)) 50%,\n    radial-gradient(\n      circle closest-side,\n      #000 99%,\n      #0000) var(--_g);\n  transform: scale(var(--f));\n  transition: .5s;\n}\nimg:hover {\n  --f: 1.35; \/* hover scale *\/\n}<\/code><\/pre>\n\n\n\n<p>Let\u2019s break down that <code>mask<\/code> property. For starters, notice that a similar <code>radial-gradient()<\/code> from the <code>background<\/code> property is in there. I created a new variable, <code>--_g<\/code>, for the common parts to make things less cluttered.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--_g: 50% \/ calc(100% \/ var(--f)) 100% no-repeat content-box;\n\nmask:\n  radial-gradient(\n    circle closest-side,\n    #000 99%,\n    #0000) var(--_g);<\/code><\/pre>\n\n\n\n<p>Next, there\u2019s a <code>linear-gradient()<\/code> in there as well:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"4,5\"><code markup=\"tt\">--_g: 50% \/ calc(100% \/ var(--f)) 100% no-repeat content-box;\n\nmask:\n  linear-gradient(#000 0 0) no-repeat\n    50% calc(-1 * var(--_o)) \/ calc(100% \/ var(--f) - 2 * var(--b)) 50%,\n  radial-gradient(\n    circle closest-side,\n    #000 99%,\n    #0000) var(--_g);<\/code><\/pre>\n\n\n\n<p>This creates the rectangle part of the mask. Its width is equal to the radial gradient\u2019s width minus twice the border thickness:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">calc(100% \/ var(--f) - 2 * var(--b))<\/code><\/pre>\n\n\n\n<p>The rectangle\u2019s height is equal to half, <code>50%<\/code>, of the element\u2019s size.<\/p>\n\n\n\n<p>We also need the linear gradient placed at the horizontal center (<code>50%<\/code>) and offset from the top by the same value as the outline\u2019s offset. I created another CSS variable, <code>--_o<\/code>, for the offset we previously defined:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--_o: calc((1 \/ var(--f) - 1) * var(--s) \/ 2 - var(--b));<\/code><\/pre>\n\n\n\n<p>One of the confusing things here is that we need a <em>negative<\/em> offset for the outline (to move it from outside to inside) but a <em>positive<\/em> offset for the gradient (to move from top to bottom). So, if you\u2019re wondering why we multiply the offset, <code>--_o<\/code>, by <code>-1<\/code>, well, now you know!<\/p>\n\n\n\n<p>Here is a demo to illustrate the mask\u2019s gradient configuration:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwBVRNO\/dd563d0f41b9c22fcb9aac141bbef029\" src=\"\/\/codepen.io\/anon\/embed\/preview\/RwBVRNO\/dd563d0f41b9c22fcb9aac141bbef029?height=550&amp;theme-id=1&amp;slug-hash=RwBVRNO\/dd563d0f41b9c22fcb9aac141bbef029&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwBVRNO\/dd563d0f41b9c22fcb9aac141bbef029\" title=\"CodePen Embed RwBVRNO\/dd563d0f41b9c22fcb9aac141bbef029\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Hover the above and see how everything move together. The middle box illustrates the mask layer composed of two gradients. Imagine it as the visible part of the left image, and you get the final result on the right!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"wrapping-up\">Wrapping up<\/h3>\n\n\n<p>Oof, we\u2019re done! And not only did we wind up with a slick hover animation, but we did it all with a single HTML <code>&lt;img&gt;<\/code> element. Just that and less than 20 lines of CSS trickery!<\/p>\n\n\n\n<p>Sure, we relied on some little tricks and math formulas to reach such a complex effect. But we knew exactly what to do since we identified the pieces we needed up-front.<\/p>\n\n\n\n<p>Could we have simplified the CSS if we allowed ourselves more HTML? Absolutely. But we\u2019re here to learn new CSS tricks! This was a good exercise to explore CSS gradients, masking, the <code>outline<\/code> property\u2019s behavior, transformations, and a whole bunch more. If you felt lost at any point, then definitely check out <a href=\"https:\/\/css-tricks.com\/fancy-image-decorations-single-element-magic\/\">my series<\/a> that uses the same general concepts. It sometimes helps to see more examples and use cases to drive a point home.<\/p>\n\n\n\n<p>I will leave you with one last demo that uses photos of popular CSS developers. Don\u2019t forget to show me a demo with your own image so I can add it to the collection!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYLeOLM\" src=\"\/\/codepen.io\/anon\/embed\/zYLeOLM?height=500&amp;theme-id=1&amp;slug-hash=zYLeOLM&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYLeOLM\" title=\"CodePen Embed zYLeOLM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Do you know that kind of effect where someone\u2019s head is poking through a circle or hole? The famous Porky Pig animation where he waves goodbye while popping out of a series of red rings is the perfect example, and Kilian Valkhof actually re-created that here on CSS-Tricks a while back. I have a similar [&hellip;]<\/p>\n","protected":false},"author":281881,"featured_media":377071,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"A Fancy Hover Effect For Your Avatar by @ChallengesCSS","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[1027,1373,1298,18879],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/featured-image-avatar.png?fit=1093%2C555&ssl=1","jetpack-related-posts":[{"id":365738,"url":"https:\/\/css-tricks.com\/cool-hover-effects-that-use-css-text-shadow\/","url_meta":{"origin":376676,"position":0},"title":"Cool Hover Effects That Use CSS Text Shadow","date":"May 13, 2022","format":false,"excerpt":"In my last article we saw how CSS background properties allow us to create cool hover effects. This time, we will focus on the CSS text-shadow property to explore even more interesting hovers. You are probably wondering how adding shadow to text can possibly give us a cool effect, but\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/text-shadow.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365946,"url":"https:\/\/css-tricks.com\/css-hover-effects-background-masks-3d\/","url_meta":{"origin":376676,"position":1},"title":"Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D","date":"May 26, 2022","format":false,"excerpt":"We\u2019ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background properties, then moved on to the text-shadow property where we technically didn\u2019t use any shadows. We also combined them with CSS variables and calc()\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/Cool-hover-effects.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":20295,"url":"https:\/\/css-tricks.com\/uniqlo-stripe-hovers\/","url_meta":{"origin":376676,"position":2},"title":"Uniqlo Stripe Hovers","date":"February 27, 2013","format":false,"excerpt":"For the larger promotional boxes in the design of Uniqlo.com, they use animated stripes that reveal on hover. It's kind of awesome, if you ask me. Perhaps because they wanted to share the awesome with as many different browsers as possible, they used an animated GIF to produce the effect.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":374302,"url":"https:\/\/css-tricks.com\/fancy-image-decorations-outlines-and-complex-animations\/","url_meta":{"origin":376676,"position":3},"title":"Fancy Image Decorations: Outlines and Complex Animations","date":"October 28, 2022","format":false,"excerpt":"We\u2019ve spent the last two articles in this three-part series playing with gradients to make really neat image decorations using nothing but the <img> element. In this third and final piece, we are going to explore more techniques using the CSS outline property. That might sound odd because we generally\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/image-decorations-4.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":145699,"url":"https:\/\/css-tricks.com\/metafizzy-effect-with-sass\/","url_meta":{"origin":376676,"position":4},"title":"MetaFizzy Effect with Sass","date":"August 12, 2013","format":false,"excerpt":"The following post is by Kitty Giraudel, a regular contributor here. In the grand CSS-Tricks tradition, Hugo found a cool effect on the web and dug into how he could re-create it in a smart way. A couple of days ago, I saw this pen by Hugo Darby-Brown which intented\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":374194,"url":"https:\/\/css-tricks.com\/fancy-image-decorations-masks-and-advanced-hover-effects\/","url_meta":{"origin":376676,"position":5},"title":"Fancy Image Decorations: Masks and Advanced Hover Effects","date":"October 21, 2022","format":false,"excerpt":"Welcome to Part 2 of this three-part series! We are still decorating images without any extra elements and pseudo-elements. I hope you already took the time to digest Part 1 because we will continue working with a lot of gradients to create awesome visual effects. We are also going to\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/image-decorations-2.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/featured-image-avatar.png?fit=1024%2C520&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376676"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/281881"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=376676"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376676\/revisions"}],"predecessor-version":[{"id":377068,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376676\/revisions\/377068"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/377071"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=376676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=376676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=376676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}