camera icon and thumbnails

camera icon and thumbnails

HTML

<div class="img-thumb-camera-container">
  <div class="left-thumbnails-container">
    <img src="" class="img-thumb" />
    <img src="" class="img-thumb" />
    <img src="" class="img-thumb" />
  </div>

  <div class="camera-icon">
    <div class="circ-container">
      <a>Take Photo</a>
    </div>
    
  </div>

  <div class="right-thumbnails-container">
    <img src="" class="img-thumb" />
    <img src="" class="img-thumb" />
  </div>

</div>

CSS

.img-thumb-camera-container {
  background: #ddd;
  height: 80px;
}

.left-thumbnails-container {
  padding: 5px;
  display: inline-block;
  width: 38%;
  height: 100%;
  vertical-align: top;
}

.camera-icon {
  display: inline-block;
  width: 20%;
  height: 100%;
  vertical-align: top;
}

.right-thumbnails-container {
  float: right;
  display: inline-block;
  width: 35%;
  height: 100%;
  padding: 5px;
  position: relative;
}

.img-thumb {
  border: 1px solid black;
  float: left;
  width: 4em;
  height: 4em;
  margin: 0 .4em .4em 0;
}

.circ-container{
  background: #fff;
  height: 100px;
  width: 100px;
  border-radius: 40px;
  margin: 0 auto;
  margin-top: -10px;
  position: relative;
}

.circ-container a {
  border: 1px solid red;
  display: block;
  position: absolute;
  top: 40px;
  left: 15px;
}


.right-thumbnails-container .img-thumb{
  float: right;
}


/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) {
    .responsive-fieldset {
        display: inline-block;
        padding: 10px 5px;
        width: 48%;
    }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
  .left-thumbnails-container {
    border: 1px solid yellow;
  }
  .img-thumb {
    border: 1px solid black;
    float: left;
    width: 3em;
    height: 3em;
    margin: .3em .3em .3em 0;
  }
}