Image Hover with Expanding Preview

image-hover-with-expanding-preview.markdown

Image Hover with Expanding Preview

Similar to google images preview.

A Pen by cannandev on CodePen.

License.

index.html

<section id="portfolio" class="lighter">
  <div class="container">
    <div class="row text-center title"><h1>Expanding Previews</h1>
      <p>Click image to expand</p>
    </div>
    <div class="grid row">
      <div class="grid-cell">
        <a href="http://jollythemes.com/html/bloxo/ajax/project3.html"><img class="img-responsive" src="http://images.unsplash.com/photo-1438109519352-a52c41243c1a?fit=crop&fm=jpg&h=800&q=80&w=1200">
        <div class="caption">
          <h3>Project 1</h3>
          <span>css3, html5, responsive</span>
        </div>
        </a>
        <p class="expander"><a href="#" class="close">Close [X]</a>Lorem ipsum 1 dolor sit amet, consectetur adipisicing elit. Deleniti delectus doloribus atque maiores et suscipit error cupiditate voluptatem est, porro corporis quod hic quaerat, veniam perferendis eos fugit quas, incidunt!</p>
      </div>
      <div class="grid-cell">
        <a  href="http://jollythemes.com/html/bloxo/ajax/project3.html"><img class="img-responsive" src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?fit=crop&fm=jpg&h=800&q=80&w=1200">
        <div class="caption">
          <h3>Project 2</h3>
          <span>wordpress, jquery, ajax, responsive</span>
        </div>
        </a>  
        <p class="expander"><a href="#"  class="close">Close [X]</a>Lorem ipsum 2 dolor sit amet, consectetur adipisicing elit. Deleniti delectus doloribus atque maiores et suscipit error cupiditate voluptatem est, porro corporis quod hic quaerat, veniam perferendis eos fugit quas, incidunt!</p>
      </div>
      <div class="grid-cell">
        <a href="http://jollythemes.com/html/bloxo/ajax/project3.html"><img class="img-responsive" src="https://images.unsplash.com/photo-1437075130536-230e17c888b5?fit=crop&fm=jpg&h=800&q=80&w=1200">
        <div class="caption">
          <h3>Project 3</h3>
          <span>css3, jquery, responsive</span>
        </div>
        </a>  
        <p class="expander"><a href="#"  class="close">Close [X]</a>Lorem ipsum 3 dolor sit amet, consectetur adipisicing elit. Deleniti delectus doloribus atque maiores et suscipit error cupiditate voluptatem est, porro corporis quod hic quaerat, veniam perferendis eos fugit quas, incidunt!</p>
      </div>
      <div class="grid-cell">
        <a href="http://jollythemes.com/html/bloxo/ajax/project3.html"><img class="img-responsive" src="http://images.unsplash.com/photo-1439003511744-2a0490ea0a88?fit=crop&fm=jpg&h=800&q=80&w=1200">
        <div class="caption">
          <h3>Project 4</h3>
          <span>css3, jquery, ajax</span>
        </div>
        </a>  
        <p class="expander"><a href="#" class="close">Close [X]</a>Lorem ipsum 4 dolor sit amet, consectetur adipisicing elit. Deleniti delectus doloribus atque maiores et suscipit error cupiditate voluptatem est, porro corporis quod hic quaerat, veniam perferendis eos fugit quas, incidunt!</p>
      </div>
    </div><!--/.row-->
  </div><!--/.container-->
	</section>

script.js

$(document).ready(function() {
  
  function collapseAll(){
    $('.active').removeClass('active').css({'height': 'auto'});
    $('.expander').slideUp('fast');    
  }
  
  function setHeight(a,b){
    return a.outerHeight(true) + b.outerHeight(true);
  }
  
  $('.grid-cell a').on('click', function(e) {
    var activeCell, expander, pushDownHeight;
    e.preventDefault();
    activeCell = $(this).parent();
    expander = $(this).siblings('.expander');
    activeCell.addClass('active').css({'height': setHeight(activeCell, expander)});
    expander.slideDown('fast');
  })
    .mouseenter(function(e){
    e.preventDefault();
    $(this).children(".caption").slideDown("slow");
  })
    .mouseleave(function(e){
    e.preventDefault();
    $(this).children(".caption").slideUp("slow");  
  });
  
  $('.grid-cell .close').on('click', function(e){
    e.preventDefault();
    collapseAll();  
  });
    
  $(window).resize(function() {
    collapseAll();
  });
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.less

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: sans-serif;
}

.title {
  text-align: center;
}

img {
  width: 100%;
  height: auto;
}
section {
  width: 100%;
  margin: 0 auto;
  @media all and (min-width: 1200px){
    width: 1200px;
  }
}
.grid {
    width: 100%;
    position: relative;
}
.grid-cell {
  width: 100%;
  @media all and (min-width: 800px){
    width: 49%;
  }
  @media all and (min-width: 1200px){
    width: 33%;
  }
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: top;
  overflow: hidden;
  transition: height 0.3s ease-in-out; 
}
.grid-cell > a {
  display: block;
  width: 100%;
  border: 2px solid #f2dd09;
  overflow: hidden;
  position: relative;
  bottom: 0;
  &:hover {
    img {
      transition: all 0.2s ease-in-out;        
      transform: scale(1.5);      
    }
  }  
}
.grid-cell .caption {
    display: none;
    position: absolute;
    bottom: 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    z-index: 6;
    width: 100%;
    transition: background 0.3s ease-in-out;
    font-size: 13px;
}
.grid-cell .expander {
    position: absolute;
    padding: 20px;
    background: #ddd;
    display: none;
    min-height: 200px;
    top: auto;
    left: 0;
    width: 100%;
    margin-top: 10px;
    text-align: left;
    overflow: hidden;
}
.grid-cell .close {
  display: block;
  text-align: right;
  text-decoration: none;
  margin-bottom: 10px;
}