imagearchive

HOVER OVER IMAGE CODE

<style>
  .container {
    position: relative;
    width: 148px;
    float: left;
    margin: 2px;
    }
  .image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
    }
  .middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
    }
.container:hover .image {
  opacity: 0.3;
}
  
.container:hover .middle {
  opacity: 1;
}

.text-one {font-family:akkurat-bold, sans-serif; font-size:24px; letter-spacing:0px;
  line-height: 24px;
  color: #ffffff;
  white-space: nowrap;
}
  
.text-two {font-family:sentinel-book, serif; font-size:12px; letter-spacing:0px;
  line-height: 12px;
  color: #ffffff;
  white-space: nowrap;
}
</style>

<!--PROJECT TITLE-->
<div class="container">
  <a href="LINK URL">
  <img src="IMG URL" alt="PROJECT TITLE" class="image" style="width:100%">
  <div class="middle">
    <div class="text-one">PROJECT TITLE</div>
    <br>
    <div class="text-two"><i>PROJECT SUBTITLE</i></div>
  </div>
  </a>
</div>

 

 

SIDESCROLL IMGS HTML

<style>
  .horizontal_scrolling {
  position: relative;
  height: 400px;
  width: auto;
  !--  add margin: ?px; to my taste --
  left: 0;
  right: 0;
  float: left;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  display: inline-block;
  }
</style>

<div class="horizontal_scrolling">
<img src="IMG URL" height="400px">
   
</div>

home-01.png
josephchung-01.png
morph_overlay-01.jpg
overlay_SBUX-01.jpg
overlay_SBUX-02.jpg

"OTHER PROJECTS" library


square_edit-01.jpg
square_edit-09.jpg
31474101220_8b0dd8f2fb_o.jpg
square_edit-03.jpg
square_edit-11.jpg
cover.jpg
square_edit-05.jpg
square_edit-13.jpg
cover2.jpg
square_edit-07.jpg
cover.jpg

IMG_4792.jpg
IMG_4771.jpg
MGF_5342.jpg
IMG_4784.jpg
IMG_4758.jpg
sketch.png
RoasteryExterior_square.jpg
IMG_4780.jpg
10.jpg
007.jpg
IMG_4777.jpg
MGF_5342.jpg