Image-Menu

Image menu that requires lazy loading

by Mustafa Beken

HTML

<div class="top-menu-warp">
  <div class="top-menu-inner">
    <div class="top-menu-innerr">


      <a href="#">
        <div id="product1" class="top-menu-button">

          <div class="coming-soon-top">
            Most Popular
          </div>

          <div class="top-menu-text">
            Text
          </div>
        </div>
      </a>

      <a href="#">
        <div id="product2" class="top-menu-button">
          <div class="top-menu-text">
            Text
          </div>
        </div>
      </a>

      <a href="#">
        <div id="product3" class="top-menu-button">
          <div class="top-menu-text">
            Text
          </div>
        </div>
      </a>

      <a href="#">
        <div id="product4" class="top-menu-button">
          <div class="top-menu-text">
            Text
          </div>

        </div>
      </a>


      <div id="product5" class="top-menu-button">

        <div class="coming-soon-top">
          Coming soon
        </div>

        <div class="top-menu-text">
          Text
        </div>
      </div>
    </div>

  </div>

CSS

.top-header-settings {
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 45px;
  padding: 45px 0 0;
  color: #524949;
  border-top: 1px solid #ddd;
}

.top-menu-wrap {
  margin: 0 auto;
  position: relative;
  ;
  background-color: #343434;
}

.top-menu-inner {
  max-width: 1200px;
  height: 260px;
  /*/background-color:#343434;/*/
  margin: 0 auto;
}

.top-menu-innerr {
  max-width: 1161px;
  height: 200px;
  margin: 0 auto;
  padding-top: 20px;
}

#product1 {
  background: url("http://via.placeholder.com/220x220");
}

#product2 {
  background: url("http://via.placeholder.com/220x220");
}

#product3 {
  background: url("http://via.placeholder.com/220x220");
}

#product4 {
  background: url("http://via.placeholder.com/220x220");
}

#product5 {
  background: url("http://via.placeholder.com/220x220");
}

.top-menu-button {
  width: 220px;
  height: 220px;
  display: inline-block;
  margin: 5px;
  text-align: center;
  font-size: 16px;
  opacity: .6;
  transition: 0.3s;
}

.top-menu-button:hover {
  opacity: 1
}

@font-face {
  font-family: 'roboto';
  src: url(https://fonts.googleapis.com/css?family=Roboto);
}

.top-menu-text {
  width: 125px;
  height: 30px;
  /*/background-color:red;/*/
  margin: 150px auto;
  text-align: center;
  color: white;
  font-family: 'roboto';
  font-size: 20px;
  background: #343434;
  -khtml-opacity: .50;
  -moz-opacity: .50;
  -ms-filter: ”alpha(opacity=50)”;
  filter: alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity: .60;
  border-style: solid;
  border-width: 1px;
  line-height: 25px;
}

.coming-soon-top {
  width: 75px;
  height: 20px;
  font-size: 10px;
  text-align: center;
  color: white;
  position: absolute;
  font-family: 'roboto';
  background: #c78f8f;
}

@media only screen and (max-width:1200px) {
  .top-menu-wrap {
    margin: 0 auto;
    position: relative;
    background-color: #343434;
  }
 ...