Translucent Form Overlay

By Kevin

F6
#
How do I use This?

A translucent form overlay for placing on top of a hero image or section.

HTML
<div class="translucent-form-overlay">
  <form>
    <h3>Search for Properties</h3>
    <div class="row columns">
      <label>Keyword
        <input type="text" name="keyword" placeholder="Any">
      </label>
    </div>
    <div class="row columns">
      <label>Property Status
        <select name="status" type="text">
          <option>Any</option>
          <option value="rent">Rent</option>
          <option value="buy">Buy</option>
        </select>
      </label>
    </div>
    <div class="row columns">
      <label>Property Type
        <select name="status" type="text">
          <option>Any</option>
          <option value="office">Office</option>
          <option value="building">Building</option>
        </select>
      </label>
    </div>
    <div class="row columns">
      <label>Location
        <input type="text" name="location" placeholder="Any">
      </label>
    </div>
    <div class="row">
      <label class="columns small-12">Price</label>
      <div class="columns small-6">
        <input type="number" min="0" name="min" placeholder="Min">
      </div>
      <div class="columns small-6">
        <input type="number" min="0" name="max" placeholder="Max">
      </div>
    </div>
    <button type="button" class="primary button expanded search-button">
      Search
    </button>
 </form>
</div>


$translucent-form-overlay-max-width: 500px;

.translucent-form-overlay {
  max-width: $translucent-form-overlay-max-width;
  width: 100%;
  background-color: rgba(54, 54, 54, 0.8);
  padding: 20px;
  color: $white;

  // workaround 6.3.0 bug
  .columns.row {
    display: block;
  }

  h3, label {
    color: $white;
  }
  input, select {
    color: $dark-gray;
  }
  input::placeholder {
    color: $dark-gray;
  }
}


.translucent-form-overlay {
  max-width: 500px;
  width: 100%;
  background-color: rgba(54, 54, 54, 0.8);
  padding: 20px;
  color: #fefefe;
}

.translucent-form-overlay .columns.row {
  display: block;
}

.translucent-form-overlay h3, .translucent-form-overlay label {
  color: #fefefe;
}

.translucent-form-overlay input, .translucent-form-overlay select {
  color: #8a8a8a;
}

.translucent-form-overlay input::-webkit-input-placeholder {
  color: #8a8a8a;
}

.translucent-form-overlay input:-ms-input-placeholder {
  color: #8a8a8a;
}

.translucent-form-overlay input::placeholder {
  color: #8a8a8a;
}

JS