title: Changing a grid item's display status when hovering over another grid item
body: <p>I have a basic 3 x 3 CSS Grid layout and I'm having trouble making some text appear when hovering over an animated icon. It's a portfolio homepage where each side of the screen leads to a different section of the site. To avoid a messy layout I wanted the name of the section to be hidden until  the user shows interest in it by hovering. </p>
  
  <p>I need some assistance on properly targeting a certain grid area item when hovering other another.</p>
  
  <p>I've tried every method I could find on trying to target the h2 text by hovering over the icons but the only solution I could find that works is by targeting the entire grid-container. Anything more specific than that and the h2 text doesnt show.</p>
  
  <p>I'm guessing I could maybe make this doable by making the grid bigger and putting the h2 elements and the font awesome icons in their own area. I would like to keep the grid smaller though if possible.</p>
  
  <pre><code>&lt;body
    &lt;div class="grid-container"&gt;
      &lt;div class="main"&gt;
        &lt;img src="https://i.imgur.com/va67zMv.jpg"/&gt;
        &lt;h1&gt;Hello! My name is Tyler Sunderland and I'm a &lt;span id="rotate"&gt;this&lt;/span&gt;!&lt;h1/&gt;
      &lt;/div&gt;
      &lt;div class="top"&gt;
        &lt;h2&gt;About Me&lt;/h2&gt;
        &lt;i class="fal fa-chevron-right fa-3x" data-fa-transform="rotate-90"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
        &lt;i class="fal fa-chevron-right fa-3x faa-passing animated" data-fa-transform="rotate-180"&gt;&lt;/i&gt;
        &lt;h2&gt;Projects&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="left"&gt;
        &lt;h2&gt;Blog&lt;/h2&gt;
      &lt;i class="fal fa-chevron-right fa-3x"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="down"&gt;
      &lt;i class="fal fa-chevron-right fa-3x" data-fa-transform="rotate-270"&gt;&lt;/i&gt;
        &lt;h2&gt;Contact Me&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <pre><code>body {
    padding: 0;
    margin: 0;
  }
  
  h1 {
    font-size: 1em;
  }
  
  .grid-container {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: ". top ." "left main right" ". down .";
    grid-gap: 5px;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: hidden;
  
  }
  
  .grid-container &gt; div &gt; h1, h2, p {
    font-family: 'Roboto', sans-serif;
  }
  
  .grid-container &gt; div &gt; h2 {
    padding: 0px;
    margin: 0px;
    font-size: 1.5em;
  }
  
  .main { 
    display: grid;
    grid-area: main;
    align-items: center;
    justify-items: center;
  }
  
  .main &gt; img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
  
  .main &gt; h1 {
    margin: 0;
    padding: 0;
  }
  
  .right {
    display: grid;
    grid-area: right;
    align-items: center;
    justify-items: end;
    align-self: center;
    grid-auto-flow: row;
  }
  
  .right &gt; h2 {
    display: none;
    grid-row: 1;
    color: #008C00;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
  
  body.grid-container:hover .right &gt; h2 {
    display: unset;
  }
  
  .right &gt; .fa-chevron-right {
    grid-row: 1;
    color: #008C00;
    margin: 10px;
    animation: passingright 3s infinite;
  }
  
  @keyframes passingright {
  0% {
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  opacity: 0;
  }
  50% {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  opacity: 1;
  }
  100% {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  opacity: 0;
  }
  }
  
  .top {
    display: grid;
    grid-area: top;
    align-items: start;
    justify-items: center;
  }
  
  .top &gt; .fa-chevron-right {
    display: block;
    column-row: 1;
    color: #00008C;
    animation: passingtop 3s infinite;
  }
  
  @keyframes passingtop {
  0% {
  -webkit-transform: translateY(-25%);
  transform: translateY(-25%);
  opacity: 0;
  }
  50% {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 1;
  }
  100% {
  -webkit-transform: translateY(25%);
  transform: translateY(25%);
  opacity: 0;
  }
  }
  
  .top &gt; h2 {
    display: none;
    color: #00008C;
  }
  
  body.grid-container:hover .top &gt; h2 {
    display: contents;
  }
  
  .left {
    display: grid;
    grid-area: left;
    align-items: center;
    justify-items: left;
    align-self: center;
    grid-auto-flow: row;
  }
  .left &gt; h2 {
    display: none;
    grid-row: 1;
    color: #460046;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
  
  body.grid-container:hover .left &gt; h2 {
    display: unset;
  }
  
  .left &gt; .fa-chevron-right {
    grid-row: 1;
    color: #460046;
    margin: 10px;
    animation: passingleft 3s infinite;
  }
  
  @keyframes passingleft {
  0% {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  opacity: 0;
  }
  50% {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  opacity: 1;
  }
  100% {
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  opacity: 0;
  }
  }
  
  .down {
    display: grid;
    grid-area: down;
    align-items: end;
    justify-items: center;
  }
  
  .down &gt; .fa-chevron-right {
    color: #8C0000;
     animation: passingdown 3s infinite;
  }
  
  @keyframes passingdown {
  0% {
  -webkit-transform: translateY(25%);
  transform: translateY(25%);
  opacity: 0;
  }
  50% {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 1;
  }
  100% {
  -webkit-transform: translateY(-25%);
  transform: translateY(-25%);
  opacity: 0;
  }
  }
  
  .down &gt; h2 {
    display: none;
    color: #8C0000;
    }
  
  body.grid-container:hover .down &gt; h2 {
    display: contents;
  }
  </code></pre>
  
  <p>I expected </p>
  
  <pre><code>body.grid-container.top.fa-chevron-right:hover .top &gt; h2 {
  display: contents;
  }
  </code></pre>
  
  <p>to make the h2 text on top show when hovering over the animated icon but the only code I could get to work is the code below, which is way too broad to be useful.</p>
  
  <pre><code>body.grid-container:hover .top &gt; h2 {
    display: contents;
  }
  </code></pre>