{"id":373508,"date":"2022-10-13T08:10:15","date_gmt":"2022-10-13T15:10:15","guid":{"rendered":"https:\/\/css-tricks.com\/?p=373508"},"modified":"2022-12-08T08:07:09","modified_gmt":"2022-12-08T16:07:09","slug":"a-pure-css-gallery-focus-effect-with-not","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/a-pure-css-gallery-focus-effect-with-not\/","title":{"rendered":"A Pure CSS Gallery Focus Effect with :not"},"content":{"rendered":"\n<p>Oftentimes in the past, I needed to figure out how to add styles to all elements inside the container but <em>not<\/em> the hovered one.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"250\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/pure-css-gallery-effect-with-not-demo.gif?resize=600%2C250&#038;ssl=1\" alt=\"Animated GIF of a mouse cursor hovering over elements. The element the mouse cursor enters remains visible and the other elements fade.\" class=\"wp-image-373827\" data-recalc-dims=\"1\"\/><figcaption class=\"wp-element-caption\">Demo of the expected &#8220;fade-out&#8221; effect on siblings to let users &#8220;focus&#8221; on a particular element.<\/figcaption><\/figure>\n\n\n\n<p>This effect requires selecting the siblings of a hovered element. I used to apply JavaScript for this, adding or removing the class that defined the proper CSS rules on <code>mouseenter<\/code> and <code>mouseleave<\/code> events, similar to this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abGBbNZ\" src=\"\/\/codepen.io\/anon\/embed\/abGBbNZ?height=450&amp;theme-id=1&amp;slug-hash=abGBbNZ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abGBbNZ\" title=\"CodePen Embed abGBbNZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Although the code does the trick, my gut feeling always told me that there must be some pure-CSS way to achieve the same result. A few years ago, while working on a certain slider for my company, I came up with a solution similar to <a href=\"https:\/\/css-tricks.com\/how-to-re-create-a-nifty-netflix-animation-in-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">how Chris Geelhoed recreated the famous Netflix homepage animation<\/a> and I understood that I didn\u2019t need JavaScript for this anymore.<\/p>\n\n\n\n<p>A couple of months ago I was trying to implement the same approach to a grid-based feed on my company website and \u2014 boom \u2014 it didn\u2019t work because of the gap between the elements!<\/p>\n\n\n\n<p>Luckily for me, it appeared that it doesn\u2019t have to stay like this, and once again I didn\u2019t need JavaScript for it.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"markup-and-base-css\">Markup and base CSS<\/h3>\n\n\n<p>Let\u2019s start coding by preparing the proper markup:<\/p>\n\n\n\n<ul>\n<li><code>.grid<\/code> is a grid-based <code>&lt;ul&gt;<\/code> list;<\/li>\n\n\n\n<li>and <code>.grid__child<\/code> elements are <code>&lt;li&gt;<\/code> children that we want to interact with.<\/li>\n<\/ul>\n\n\n\n<p>The markup looks like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;ul class=\"grid\">\n  &lt;li class=\"grid__child\">&lt;\/li>\n  &lt;li class=\"grid__child\">&lt;\/li>\n  &lt;li class=\"grid__child\">&lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<p>The style should look like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, 15rem);\n  grid-gap: 1rem;\n}\n\n.grid__child {\n  background: rgba(0, 0, 0, .1);\n  border-radius: .5rem;\n  aspect-ratio: 1\/1;\n}<\/code><\/pre>\n\n\n\n<p>This example code will create three list items occupying three columns in a grid.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-power-of-css-selectors\">The power of CSS selectors<\/h3>\n\n\n<p>Now, let\u2019s add some interactivity. The approach that I initially applied was based on two steps:<\/p>\n\n\n\n<ol>\n<li>hovering on the container should change the styles of all elements inside\u2026 &nbsp;<\/li>\n\n\n\n<li>\u2026except the one that cursor is hovering at the moment.<\/li>\n<\/ol>\n\n\n\n<p>Let\u2019s start with grabbing every child while the cursor is hovering over the container:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid:hover .grid__child {\n  \/* ... *\/\n}<\/code><\/pre>\n\n\n\n<p>Secondly, let\u2019s exclude the currently hovered item and reduce the <code>opacity<\/code> of any other child:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid:hover .grid__child:not(:hover) {\n  opacity: 0.3;\n}<\/code><\/pre>\n\n\n\n<p>And this would be perfectly enough for containers without gaps between the child elements:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"250\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/pure-css-gallery-effect-with-not-no-gaps.gif?resize=600%2C250&#038;ssl=1\" alt=\"Animated GIF of a mouse cursor interacting with elements that are not separated by any gaps.\" class=\"wp-image-373829\" data-recalc-dims=\"1\"\/><figcaption class=\"wp-element-caption\">Demo of a solution that works without gaps.<\/figcaption><\/figure>\n\n\n\n<p>However, in my case, I couldn\u2019t remove these gaps:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"250\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/pure-css-gallery-effect-with-not-gaps-1.gif?resize=600%2C250&#038;ssl=1\" alt=\"Animated GIF of a mouse cursor hovering over elements. However, when the mouse enters a gap between two elements, the effect ends as the mouse leaves the element.\" class=\"wp-image-373830\" data-recalc-dims=\"1\"\/><figcaption class=\"wp-element-caption\">Demo of the problem encountered when gaps are introduced.<\/figcaption><\/figure>\n\n\n\n<p>When I was moving the mouse between the tiles all of the children elements were fading out.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"ignoring-the-gaps\">Ignoring the gaps<\/h3>\n\n\n<p>We can assume that gaps are parts of the container that are not overlayed by its children. We don\u2019t want to run the effect every time the cursor enters the container, but rather when it hovers over one of the elements inside. Can we ignore the cursor moving above the gaps then?&nbsp;<\/p>\n\n\n\n<p>Yes, we can, using <code>pointer-events: none<\/code> on the <code>.grid <\/code>container and bringing them back with <code>pointer-events: auto<\/code> on its children:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid {\n  \/* ... *\/\n  pointer-events: none;\n}\n\n\/* ... *\/\n\n.grid__child {\n  \/* ... *\/\n  pointer-events: auto;\n}<\/code><\/pre>\n\n\n\n<p>Let\u2019s just add some cool transition on opacity and we have a ready component:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZExJRMZ\" src=\"\/\/codepen.io\/anon\/embed\/ZExJRMZ?height=450&amp;theme-id=1&amp;slug-hash=ZExJRMZ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZExJRMZ\" title=\"CodePen Embed ZExJRMZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It\u2019s probably even cooler when we add more tiles and create a 2-dimensional layout:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBYjgQK\" src=\"\/\/codepen.io\/anon\/embed\/qBYjgQK?height=450&amp;theme-id=1&amp;slug-hash=qBYjgQK&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBYjgQK\" title=\"CodePen Embed qBYjgQK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The final CSS looks like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, 15rem);\n  grid-gap: 3rem;\n  pointer-events: none;\n}\n\n.grid:hover .grid__child:not(:hover) {\n  opacity: 0.3;\n}\n\n.grid__child {\n  background: rgba(0, 0, 0, .1);\n  border-radius: .5rem;\n  aspect-ratio: 1\/1;\n  pointer-events: auto;\n  transition: opacity 300ms;\n}<\/code><\/pre>\n\n\n\n<p>With only 2 additional lines of code we overcame the gap problem!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"possible-issues\">Possible issues<\/h3>\n\n\n<p>Although it\u2019s a compact solution, there are some situations where it might require some workarounds.<\/p>\n\n\n\n<p>Unfortunately, this trick won\u2019t work when you want the container to be scrollable, e.g., like in some kind of horizontal slider. The <code>pointer-events: none<\/code> style would ignore not only the hover event but all the others, too. In such situations, you can wrap the <code>.grid<\/code> in another container, like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"container\">\n  &lt;ul class=\"grid\">\n    &lt;li class=\"grid__child\">&lt;\/li>\n    &lt;li class=\"grid__child\">&lt;\/li>\n    &lt;li class=\"grid__child\">&lt;\/li>\n    &lt;li class=\"grid__child\">&lt;\/li>\n    &lt;li class=\"grid__child\">&lt;\/li>\n    &lt;li class=\"grid__child\">&lt;\/li>\n    &lt;li class=\"grid__child\">&lt;\/li>\n  &lt;\/ul>\n&lt;\/div><\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"summary\">Summary<\/h3>\n\n\n<p>I strongly encourage you to experiment and try to find a simpler and more native approach for tasks that are usually expected to have some level of complexity. Web technologies, like CSS, are getting more and more powerful and by using out-of-the-box native solutions you can achieve great results without the need of maintaining your code and cede it to browser vendors.<\/p>\n\n\n\n<p>I hope that you liked this short tutorial and found it useful. Thanks!<\/p>\n\n\n\n<p><em>The author selected the\u00a0<a href=\"https:\/\/www.brightfunds.org\/funds\/tech-education\" rel=\"noopener\">Tech Education Fund<\/a>\u00a0to receive a donation as part of the\u00a0<a href=\"https:\/\/do.co\/w4do-cta\" rel=\"noopener\">Write for DOnations<\/a>\u00a0program.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Oftentimes in the past, I needed to figure out how to add styles to all elements inside the container but not the hovered one. This effect requires selecting the siblings of a hovered element. I used to apply JavaScript for this, adding or removing the class that defined the proper CSS rules on mouseenter and [&hellip;]<\/p>\n","protected":false},"author":288714,"featured_media":374431,"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 Pure CSS Gallery Focus Effect with :not by Krzysztof Gonciarz","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1506],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/pure-css-gallery-effect-with-not-header.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":8807,"url":"https:\/\/css-tricks.com\/hover-on-everything-but\/","url_meta":{"origin":373508,"position":0},"title":"Hover on &#8220;Everything But&#8221;","date":"March 23, 2011","format":false,"excerpt":"Hover states are easy, but what if you want to apply a hover state to every element besides the one you are hovering over? We can do it with a little trickery.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/03\/twitterhover.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":305681,"url":"https:\/\/css-tricks.com\/how-to-re-create-a-nifty-netflix-animation-in-css\/","url_meta":{"origin":373508,"position":1},"title":"How to Re-Create a Nifty Netflix Animation in CSS","date":"April 7, 2020","format":false,"excerpt":"The design for Netflix's browse page has remained pretty similar for a few years now. One mainstay component is the preview slider that allows users to scroll through content and hover on items to see a preview. One unique characteristic of the UI is its hover behavior. When a show\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/netflix-carousel.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":6129,"url":"https:\/\/css-tricks.com\/more-than-one-way-delegate-edition\/","url_meta":{"origin":373508,"position":2},"title":"More than one way\u2026 (delegate\u00a0edition)","date":"April 7, 2010","format":false,"excerpt":"There was a question in the forums about affecting non-hovered items. The effect they were after is that they had an unordered list of items and when they were rolled over, they would all dim (lower opacity) except the one hovered. This can be done with CSS, using pseduo-selectors. ul\u2026","rel":"","context":"In &quot;Advanced&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":333018,"url":"https:\/\/css-tricks.com\/scrollbars-on-hover\/","url_meta":{"origin":373508,"position":3},"title":"Scrollbars on Hover","date":"January 20, 2021","format":false,"excerpt":"First, scrollbars are a usability and accessibility thing. Second, a rule of thumb: if an area scrolls, it should have a visible scrollbar. But the web is a big place and I like tricks, so I'm going to cover the idea of only revealing them on hover. Even macOS itself\u00b9\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/scrollbar-hover.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":292735,"url":"https:\/\/css-tricks.com\/dont-comma-separate-focus-within-if-you-need-deep-browser-support\/","url_meta":{"origin":373508,"position":4},"title":"Don&#8217;t comma-separate :focus-within if you need deep browser support","date":"July 24, 2019","format":false,"excerpt":"I really like :focus-within. It's a super useful selector that allows you to essentially select a parent element when any of its children are in focus. Say you wanted to reveal some extra stuff when a is hovered... div:hover .extra-stuff { \/* reveal it *\/ } That's not particularly keyboard-friendly.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/keyboard-focus.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304250,"url":"https:\/\/css-tricks.com\/selectors-explained\/","url_meta":{"origin":373508,"position":5},"title":"Selectors Explained","date":"March 2, 2020","format":false,"excerpt":"Have you ever found yourself either writing a CSS selector that winds up looking confusing as heck, or seen one while reading through someone's code? That happened to me the other day. Here's what I wrote: .site-footer__nav a:hover u003e svg ellipse:first-child { } At the end of it, I honestly\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/selectors-explained.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373508"}],"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\/288714"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=373508"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373508\/revisions"}],"predecessor-version":[{"id":376013,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373508\/revisions\/376013"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/374431"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=373508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=373508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=373508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}