// Click to copy the value in the input // click again, double-click, or right click to cycle what the input shows and/or brign up a custom menu
<div class="swatches"> <div class="swatch red"> <h1>Raging Red</h1> <input type="text" value="$color-red"> </div> <div class="swatch blue"> <h1>Bombstic Blue</h1> <input type="text" value="$color-blue"> </div> </div>
.swatches { margin: 24px; } .swatch { overflow: hidden; position: relative; float: left; width: 120px; max-height: 120px; margin-right: 24px; box-shadow: 0 10px 10px -8px rgba(black, 0.075), 0 12px 20px -8px rgba(black, 0.075), 0 15px 20px -8px rgba(black, 0.05), 0 0 10px 2px rgba(black, 0.025); border-radius: 6px; background-color: white; transition: max-height 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease; &:hover { max-height: 150px; transform: scale(1.15); transition: max-height 0.3s cubic-bezier(.09,.97,.7,1), transform 0.3s cubic-bezier(.09,.97,.7,1), box-shadow 0.3s cubic-bezier(.09,.97,.7,1); box-shadow: 0 0 10px -8px rgba(black, 0.075), 0 2px 20px -8px rgba(black, 0.075), 0 5px 20px -8px rgba(black, 0.05), 0 -10px 10px 2px rgba(black, 0.025); } &:before { content: ''; display: block; width: calc(100% + 12px); height: 90px; } &.red:before { background-color: #f03; } &.blue:before { background-color: #36f; } h1 { padding: 9px 6px; margin: 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1; text-transform: uppercase; text-align: center; color: #333; } input { width: 100%; margin: 0; padding: 6px 0; border: none; font-family: Consolas, monospace; font-size: 13px; text-align: center; color: #999; } }