CodePen Embed - DollDreamHome.com anchor Menu Demo

<div class="left">
</div>

<div class="right">
  <h2>Available dream homes</h2>
  <ul class="home-list">
    <li class="card"> 
      <div class="container">
         <img src="https://iili.io/JV439O7.md.jpg" alt="JV439O7.md.jpg" border="0">
          <div class="meta">
            <button class="more" style="anchor-name: --home-01-btn" popovertarget="home-01-menu">
              <span class="material-symbols-outlined">more_vert</span>
            </button>
            <div class="price">$46,700</div>
            <div class="addr">34 Boho Circle</div>
            <div class="details">
              <span class="beds">
                <span class="material-symbols-outlined">bed</span>
                <div>
                  <b>1</b>
                  <span desktop-only>Bedrooms</span>
                </div>
              </span>
              <span class="bath">
                <span class="material-symbols-outlined">shower</span>
                <div>
                  <b>1</b> 
                  <span desktop-only>Bathrooms</span>
                </div>
              </span>
              <span class="size">
                <span class="material-symbols-outlined">real_estate_agent</span>
                <div><b>1230</b> <small>sq.in.</small></div>
              </span>
            </div>
          </div>
      </div>
      <!-- Popovers -->
      <div id="home-01-menu" role="menu" class="submenu" style="position-anchor: --home-01-btn" popover>
        <button>Favorite</button>
        <button>Add to List</button>
        <button>Hide</button>
        <button>Share</button>
      </div>
    </li>
    <li class="card">
      <div class="container">
         <img src="https://iili.io/JWn4mUx.md.jpg" alt="JV439O7.md.jpg" border="0">
          <div class="meta">
            <button class="more" id="home-01-btn" popovertarget="home-01-menu">
              <span class="material-symbols-outlined">more_vert</span>
            </button>
            <div class="price">$122,900</div>
            <div class="addr">134 Dollhaus Lane</div>
            <div class="details">
              <span class="beds">
                <span class="material-symbols-outlined">bed</span>
                <div>
                  <b>4</b>
                  <span desktop-only>Bedrooms</span>
                </div>
              </span>
              <span class="bath">
                <span class="material-symbols-outlined">shower</span>
                <div>
                  <b>3</b> 
                  <span desktop-only>Bathrooms</span>
                </div>
              </span>
              <span class="size">
                <span class="material-symbols-outlined">real_estate_agent</span>
                <div><b>2430</b> <small>sq.in.</small></div>
              </span>
            </div>
          </div>
      </div>
    </li>
    <li class="card">
      <div class="container">
         <img src="https://iili.io/JWn4iD7.md.jpg" alt="JV439O7.md.jpg" border="0">
          <div class="meta">
            <button class="more" id="home-01-btn" popovertarget="home-01-menu">
              <span class="material-symbols-outlined">more_vert</span>
            </button>
            <div class="price">$89,500</div>
            <div class="addr">443 Dollhaus Ct</div>
            <div class="details">
              <span class="beds">
                <span class="material-symbols-outlined">bed</span>
                <div>
                  <b>3</b>
                  <span desktop-only>Bedrooms</span>
                </div>
              </span>
              <span class="bath">
                <span class="material-symbols-outlined">shower</span>
                <div>
                  <b>4</b> 
                  <span desktop-only>Bathrooms</span>
                </div>
              </span>
              <span class="size">
                <span class="material-symbols-outlined">real_estate_agent</span>
                <div><b>1300</b> <small>sq.in.</small></div>
              </span>
            </div>
          </div>
      </div>
    </li>
    <li class="card">
      <div class="container">
         <img src="https://iili.io/JWn4QVe.md.jpg" alt="JV439O7.md.jpg" border="0">
          <div class="meta">
            <button class="more" id="home-01-btn" popovertarget="home-01-menu">
              <span class="material-symbols-outlined">more_vert</span>
            </button>
            <div class="price">$149,900</div>
            <div class="addr">863 Dollhaus Ct</div>
            <div class="details">
              <span class="beds">
                <span class="material-symbols-outlined">bed</span>
                <div>
                  <b>4</b>
                  <span desktop-only>Bedrooms</span>
                </div>
              </span>
              <span class="bath">
                <span class="material-symbols-outlined">shower</span>
                <div>
                  <b>4</b> 
                  <span desktop-only>Bathrooms</span>
                </div>
              </span>
              <span class="size">
                <span class="material-symbols-outlined">real_estate_agent</span>
                <div><b>2200</b> <small>sq.in.</small></div>
              </span>
            </div>
          </div>
      </div>
    </li>
    <li class="card">
      <div class="container">
         <img src="https://iili.io/JWn4PNS.md.jpg" alt="JV439O7.md.jpg" border="0">
          <div class="meta">
            <button class="more" id="home-01-btn" popovertarget="home-01-menu">
              <span class="material-symbols-outlined">more_vert</span>
            </button>
            <div class="price">$47,900</div>
            <div class="addr">101 Dollhaus Road</div>
            <div class="details">
              <span class="beds">
                <span class="material-symbols-outlined">bed</span>
                <div>
                  <b>2</b>
                  <span desktop-only>Bedrooms</span>
                </div>
              </span>
              <span class="bath">
                <span class="material-symbols-outlined">shower</span>
                <div>
                  <b>1</b> 
                  <span desktop-only>Bathrooms</span>
                </div>
              </span>
              <span class="size">
                <span class="material-symbols-outlined">real_estate_agent</span>
                <div><b>900</b> <small>sq.in.</small></div>
              </span>
            </div>
          </div>
      </div> 
    </li>
     <li class="card">
      <div class="container">
         <img src="https://iili.io/JWn4blj.md.jpg" alt="JV439O7.md.jpg" border="0">
          <div class="meta">
            <button class="more" id="home-01-btn" popovertarget="home-01-menu">
              <span class="material-symbols-outlined">more_vert</span>
            </button>
            <div class="price">$47,900</div>
            <div class="addr">101 Dollhaus Road</div>
            <div class="details">
              <span class="beds">
                <span class="material-symbols-outlined">bed</span>
                <div>
                  <b>1</b>
                  <span desktop-only>Bedrooms</span>
                </div>
              </span>
              <span class="bath">
                <span class="material-symbols-outlined">shower</span>
                <div>
                  <b>1</b> 
                  <span desktop-only>Bathrooms</span>
                </div>
              </span>
              <span class="size">
                <span class="material-symbols-outlined">real_estate_agent</span>
                <div><b>670</b> <small>sq.in.</small></div>
              </span>
            </div>
          </div>
      </div> 
    </li>
  </ul>
</div>

@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";

.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 100,
    'GRAD' 0,
    'opsz' 24
  ;
}

.left {
  background: url('https://i.ibb.co/mv6CktG/Screenshot-2024-04-15-at-9-00-26-PM.png');
  background-size: cover;
  padding: 0;
  overflow: hidden;
  resize: horizontal;
  width: 50vw;
  border-inline-end: 1px #fff9;
  filter: hue-rotate(100deg);
}

.right {
  overflow-y: auto;
  padding: 2rem;
  box-sizing: border-box;
  border-left: 3px solid magenta;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  display: grid;
  grid-template-columns: max-content 1fr;
  height: 100dvh;
  overflow: hidden;
  width: 100%;
  margin: 0;
  
  > div {
    width: 100%;
  }
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

.right > h2 {
  margin: -1rem 0 1rem;
  font-weight: 200;
  font-size: 2rem;
}

.home-list {
  container-type: inline-size;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(18ch, 1fr));
}

.meta {
  position: relative;
  padding: .75rem 1rem;
}

.price {
  font-weight: 400;
  font-size: 1.75em;
  line-height: 1;
}

.addr {
  color: #444;
}

.details {
  display: grid;
  margin-top: .5rem;
  color: #444;
  
  .material-symbols-outlined {
    color: #666;
  }
  
  b {
    color: #111;
  }
  
  > * {
    display: flex;
    place-items: center;
    gap: 1ch;
  }
  
  @container (32ch < width < 50ch) {
/*     grid-auto-flow: column; */
/*     gap: 1rem; */
  }
}

.card:has(:popover-open) .more {
  background: salmon;
  border-color: maroon;
  box-shadow: 3px 3px maroon;
  color: white;
}

.more {
  position: absolute;
  background: white;
  display: inline-flex;
  place-items: center;
  right: .5rem;
  top: .5rem;
  border: 1px solid lightpink;
  border-radius: 50%;
  aspect-ratio: 1;
  transition: all 0.25s;
  
  .material-symbols-outlined {
    font-size: 14px;
    font-variation-settings:
      'FILL' 0,
      'wght' 300,
      'GRAD' 0,
      'opsz' 24
    ;
  }
  
  &:hover {
    background: salmon;
    border-color: maroon;
    box-shadow: 3px 3px maroon;
    color: white;
  }
}

/* reset */
[popover] {
  inset: auto;
}

/* Anchor */
.submenu:popover-open {
  position: absolute;
  inset-area: bottom span-left;
  margin: 0;
  border: 1px solid maroon;
  background: #ffdeda;
  display: grid;
  padding: 0;
  border-radius: 0.5rem;
  width: 10rem;
  
  button {
    border: none;
    background: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 900;
    padding: 0.25rem 0.5rem;
    transition: background 0.25s, color 0.25s;
    
    &:first-child {
      padding-top: 0.5rem;
    }
    
    &:last-child {
      padding-bottom: 0.5rem;
    }
    
    &:hover {
      background: salmon;
      color: white;
    }
  }
}

/* CQ */
.card {
  container-type: inline-size;
  box-shadow: 3px 3px magenta, 6px 6px pink, 0 0 8px lightgray;
  transition: box-shadow 0.25s;
  border-radius: 1rem;
  overflow: clip;
  
  &:hover {
    box-shadow: 6px 6px magenta, -6px -6px pink, 0 0 8px lightgray;
  }
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .container {
    width: 100%;
    display: grid;
    
    @container (30ch < width < 50ch) {
      display: grid;
      grid-template-columns: 1fr 2fr;
    }
  }
}

// https://freeimage.host/i/JWn4wNI
// https://freeimage.host/i/JWn4h9p
// https://freeimage.host/i/JWn4WSR
// https://freeimage.host/i/JWn4jAN
// https://freeimage.host/i/JWn4eoX
// https://freeimage.host/i/JWn4kVn
// https://freeimage.host/i/JWn4SKG
// https://freeimage.host/i/JWn4vPs
// https://freeimage.host/i/JWn4Ulf
// https://freeimage.host/i/JWn44Hl
// https://freeimage.host/i/JWn4gS4
// https://freeimage.host/i/JWn46R2
// https://freeimage.host/i/JWn4PNS
// https://freeimage.host/i/JWn4QVe
// https://freeimage.host/i/JWn4Lx9
// https://freeimage.host/i/JWn4iD7
// https://freeimage.host/i/JWn4DKb
// https://freeimage.host/i/JWn4mUx
// https://freeimage.host/i/JWn4blj

This Pen is owned by Una Kravets on CodePen.

See more by @una on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.