image display inline

by Ethan Ryan

HTML

<style>
  #lightbox {
    position: fixed;
    /* keeps the lightbox window in the current viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    /*use below to make a 1px black image with 75% opacity for the dark background instead of above. above has issues in IE*/
    /*background:url(overlay.png) repeat; */
    text-align: center;
    z-index: 99999;
  }

  #lightbox p {
    text-align: center;
    color: #fff;
    margin-right: 20px;
    font-size: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    z-index: 99999;
  }

  #lightbox img {
    box-shadow: 0 0 25px #111;
    -webkit-box-shadow: 0 0 25px #111;
    -moz-box-shadow: 0 0 25px #111;
    width: 80%;
    max-width: 940px;
    max-height: 800px;
    z-index: 99999;
  }

  .mobile_label_view {
    display: none;
  }

  @media only screen and (max-width: 950px) {
    .lightbox_trigger {
      display: none;
    }
    .mobile_label_view {
      display: inline;
    }
  }

  .lightbox_trigger {
    margin-top: 15px;
    cursor: pointer;
  }

  .mobile_label_view {
    margin-top: 15px;
    cursor: pointer;
  }

  a.label_container {
    max-width: 100px !important;
    width: 100px !important;
  }

</style>

<div id="wrapper">
  <!--have view label text-->
  <!--<a href="/image.png" class="lightbox_trigger">-->
  <!--               View Label-->
  <!--               </a>-->
  <!--               <a href="/image.png" target="_blank" class="mobile_label_view">-->
  <!--               View Label-->
  <!--               </a>-->
  <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" width="100px" class="lightbox_trigger">
  <a href="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" target="_blank" class="label_container"><img...