About this snippet

Two layers stacked in the same box. The top layer is a finished profile card and the bottom layer is a blueprint grid with dashed placeholder boxes. Hovering wipes the top layer off.

The wipe is a single clip-path inset animating from zero to 100 percent on its right side, which collapses the visible part of the front layer toward the left edge. Because clip-path is animatable, the whole effect is one transition on one property.

The blueprint boxes are placed with inline styles in the markup, so you can move them to match your own layout without touching the stylesheet. Both layers share the same border radius, otherwise the square corners of the blueprint show through while the wipe is running.

Size
3.2 KB
Uses
HTML, CSS
Loads
placehold.co
Views
957

Collections

Related snippets

<div class="blueprint-card">
  
  <!-- The Hidden Wireframe Backing (Bottom Layer) -->
  <div class="wireframe-layer">
    <div class="wf-grid"></div>
    <div class="wf-box" style="top: 30px; left: 30px; width: 80px; height: 80px; border-radius: 50%;"></div>
    <div class="wf-box" style="top: 40px; left: 130px; width: 180px; height: 20px;"></div>
    <div class="wf-box" style="top: 75px; left: 130px; width: 120px; height: 16px;"></div>
    
    <div class="wf-box" style="bottom: 30px; left: 30px; width: calc(100% - 60px); height: 100px; border-radius: 16px;"></div>
  </div>
  
  <!-- The Beautiful Front UI Layer (Top Layer) -->
  <div class="ui-layer">
    <div class="ui-profile">
      <img src="https://placehold.co/80x80/3b82f6/ffffff?text=Avatar" alt="User" class="avatar-img">
      <div class="ui-info">
        <h3>System Architect</h3>
        <p>Frontend Division</p>
      </div>
    </div>
    
    <div class="ui-graphic">
      <p>Hover over this card to trigger a flawless clip-path wipe, exposing the foundational blueprint architecture securely beneath.</p>
    </div>
  </div>
  
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.blueprint-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 280px;
  border-radius: 24px;
  background: #0f172a;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  cursor: crosshair;
}

/* Bottom Layer: The Architectural Blueprint */
.wireframe-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  z-index: 1;
  overflow: hidden;
}

.wf-grid {
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(56, 189, 248, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.2) 1px, transparent 1px);
  background-size: 20px 20px;
}

.wf-box {
  position: absolute;
  border: 1px dashed #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}

/* Top Layer: The High-Fidelity UI */
.ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 24px;
  z-index: 2;
  padding: 30px;
  border: 1px solid #e2e8f0;
  /* The Magic: A perfectly clean wipe effect */
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.blueprint-card:hover .ui-layer {
  /* Wipes the top layer completely to the right */
  clip-path: inset(0 100% 0 0);
}

.ui-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 35px;
}

.avatar-img {
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
}

.ui-info h3 {
  margin: 0 0 6px 0;
  color: #0f172a;
  font-size: 1.25rem;
}

.ui-info p {
  margin: 0;
  color: #64748b;
  font-size: 0.95rem;
  font-weight: 500;
}

.ui-graphic {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 20px;
  border-radius: 16px;
}

.ui-graphic p {
  margin: 0;
  color: #475569;
  line-height: 1.6;
  font-size: 0.95rem;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save