Floating label

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
Type something in the input to see how the label is shown up.
.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;

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

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