CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
.home
~
.explore

Floating label

Type something in the input to see how the label is shown up.
<style>
.p-floating-container {
    position: relative;
}

.p-floating-container label {
    /* Position the label */
    left: 8px;
    position: absolute;
    top: 0;

    /* Hide it by default */
    opacity: 0;
    transition: 'all 200ms',
}

/* Show the label at desired position when the placeholder of input isn't shown */
.p-floating-container input:not(:placeholder-shown) + label {
    background: #FFF;
    transform: translate(0, -50%);
    opacity: 1;
}
</style>

<div class="p-floating-container">
    <!-- The input -->
    <input placeholder="Placeholder" />

    <!-- The label -->
    <label>Placeholder</label>
</div>
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!