A Pen by Moncho Varela.

1/26/2014 - 8:21 PM

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
   background: #1B1A1A;
}
 
::-webkit-scrollbar-thumb {
    background: #333;
}
html,body{
  background: #1B1A1A;
  font-family: 'Lato', sans-serif;
  font-size:1em;
}
.likeGoogle-list{
  position:relative;
  display:inline-block;
  *display:inline;
  zoom:1;
  width:16%;
  height: 150px;
  overflow: hidden;
}
.likeGoogle-list:before{
  position: absolute;
  bottom: 0;
  left: -1000px;
  margin: 0 auto;
  padding: 0.25em;
  content:  attr(data-title);
  color: #fdfdfd;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  font-size: 0.8em;
  background: #333;
  width:100%;
  transition:all 1s ease;
}
.likeGoogle-list:hover:before{
  left: 0px;
  transition:all 1s ease;
}

.likeGoogle-img{
  max-width:100%;
  width:100%;
  cursor:pointer;
}
.likeGoogle-show {
  color: #555;
  text-align: center;
  position: relative;
  width: 99%;
  float: left;
  padding: 0;
  display: none;
  margin-bottom: 10px;
  background: #333;
  color: #fdfdfd;
  margin-top: 10px;
  padding: 0.5%;
}
.likeGoogle-show h3{
  font-family: 'Lato', sans-serif;
  font-weight: bold;
}
.likeGoogle-show{
  font-family: 'Lato', sans-serif;
}
.likeGoogle-current-img {
  max-width: 100%;
}
.likeGoogle-float{
  float:left;
}
.likeGoogle-close {
  opacity: 0.7;
  cursor: pointer;
  position: absolute;
  top: 1em;
  right: 2em;
  color: #fdfdfd;
  font-family: monospace;
}
.likeGoogle-close:hover{
  opacity:1;
}
@media only screen and (min-width: 240px){
  .likeGoogle-list{
    width:48.5%;
    height:70px;
  }
  .likeGoogle-close {
    top:0;
    right:0;
  }
}
@media only screen and (min-width: 320px){
  .likeGoogle-list{
    width:49.5%;
    height:100px;
  }
    .likeGoogle-close {
    top:0;
    right:0;
  }
}
@media only screen and (min-width: 480px){
  .likeGoogle-list{
    width:49.5%;
    height:150px;
  }
  .likeGoogle-close {
    top:1em;
    right:2em;
  }
}
@media only screen and (min-width: 768px){
  .likeGoogle-list{
    width:33%;
  }
}
@media only screen and (min-width: 1025px){
  .likeGoogle-list{
    width:24.7%;
  }
}

script.js



(function () {

  'use-strict';

  $.fn.likeGoogle = function () {

    var likeGoogle = $('<div class="likeGoogle-show"><h3></h3><p></p></div>'),
        likeGoogleimg = $('<img src="" class="likeGoogle-current-img">'),
        likeGoogleclose = $('<div class="likeGoogle-close">Close This</div>');

    
    likeGoogle
    .append(likeGoogleimg)
    .append(likeGoogleclose);
    

    return this.each(function () {

      $('.likeGoogle-list').click(function () {

        var currentimg = $(this).find('.likeGoogle-img'),
            activeImg = $('.likeGoogle-current-img'),
            imgData = currentimg.data('img'),
            datatitle = $(this).data('title'),
            datainfo = currentimg.data('info');


        likeGoogle.find('h3').html(datatitle);
        likeGoogle.find('p').html(datainfo);
        likeGoogleimg.attr('src', imgData);


        if (activeImg.css('opacity') >= 0){ 
          activeImg.animate({
            opacity: 1
          }, 800);
        }

        if ($(this).next().hasClass('likeGoogle-show')){
          likeGoogle.toggle();
        }else{ 
          likeGoogle.insertAfter(this).css('display', 'block');
        }


        $('html, body').animate({
          scrollTop: likeGoogle.position().top
        }, 'slow');

        return false;

      });

      $('.likeGoogle').on('click', '.likeGoogle-close', function () {
        $('.likeGoogle-current-img').animate({
          opacity: 0
        },200, function () {
          $('.likeGoogle-show').slideUp('slow');
        });
      });

    });
  };
})(jQuery);



// Call likeGoogle
$(function() {
  $('.likeGoogle').likeGoogle();
});

likeaGoogle.markdown

Rendered
Source

likeaGoogle

Based on plugin http://toddmotto.com/labs/superbox/ Photos of unsplash.com

A Pen by Moncho Varela on CodePen.

License.

index.html

<!-- google fonts -->
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>


<!-- you can use tumbs, more better -->

  <section class="likeGoogle">
    <!-- image -->
    <div class="likeGoogle-list" data-title="Example Title">
      <img
           src="http://bit.ly/1m7ZjzQ"
           data-img="http://bit.ly/1m7ZjzQ"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- / image -->

    <!-- image -->
    <div class="likeGoogle-list"  data-title="Example Title 2">
      <img
           src="http://bit.ly/1jQWWPI"
           data-img="http://bit.ly/1jQWWPI"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- / image -->

    <!-- image -->
    <div class="likeGoogle-list"  data-title="Example Title 3">
      <img
           src="http://bit.ly/1jQX1mA"
           data-img="http://bit.ly/1jQX1mA"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- / image -->

    <!-- image -->
    <div class="likeGoogle-list"  data-title="Example Title 4">
      <img
           src="http://bit.ly/1jQWMrB"
           data-img="http://bit.ly/1jQWMrB"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- / image -->

    <!-- image -->
    <div class="likeGoogle-list"  data-title="Example Title 5">
      <img
           src="http://bit.ly/1jQWu3Z"
           data-img="http://bit.ly/1jQWu3Z"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- / image -->

    <!-- image -->
    <div class="likeGoogle-list"  data-title="Example Title 6">
      <img
           src="http://bit.ly/1m7ZlHK"
           data-img="http://bit.ly/1m7ZlHK"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- / image -->

    <!-- image -->
    <div class="likeGoogle-list"  data-title="Example Title 7">
      <img
           src="http://bit.ly/1m7ZhI3"
           data-img="http://bit.ly/1m7ZhI3"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- / image -->

    <!-- image -->
    <div class="likeGoogle-list"  data-title="Example Title 8" >
      <img
           src="http://bit.ly/1m7Zhb7"
           data-img="http://bit.ly/1m7Zhb7"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- / image -->

    <!-- image -->
    <div class="likeGoogle-list"  data-title="Example Title 9" >
      <img
           src="http://bit.ly/1m7Zgny"
           data-img="http://bit.ly/1m7Zgny"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- / image -->

    <!-- image -->
    <div class="likeGoogle-list"  data-title="Example Title 10" >
      <img
           src="http://bit.ly/1m7Z8V8"
           data-img="http://bit.ly/1m7Z8V8"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- / image -->

    <!-- image -->
    <div class="likeGoogle-list"  data-title="Example Title  11" >
      <img
           src="http://bit.ly/1m7YlU0"
           data-img="http://bit.ly/1m7YlU0"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- / image -->

    <!-- image -->
    <div class="likeGoogle-list"  data-title="Example Title 12" >
      <img
           src="http://bit.ly/1m7WnTR"
           data-img="http://bit.ly/1m7WnTR"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- / image -->

    <!-- image -->
    <div class="likeGoogle-list"  data-title="Example Title 13" >
      <img
           src="http://bit.ly/1m7XyT4"
           data-img="http://bit.ly/1m7XyT4"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- / image -->

    <!-- image -->
    <div class="likeGoogle-list"  data-title="Example Title 14" >
      <img
           src="http://bit.ly/1m7VgmS"
           data-img="http://bit.ly/1m7VgmS"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- / image -->


    <!-- image -->
    <div class="likeGoogle-list"  data-title="Example Title 15" >
      <img
           src="http://bit.ly/1m7UTZI"
           data-img="http://bit.ly/1m7UTZI"
           data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
           class="likeGoogle-img" title="Example Title">
    </div>
    <!-- image -->

    <!-- preview -->
    <div class="likeGoogle-float"></div>
    <!-- /preview -->
    
</section>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

A Pen by Moncho Varela.

likeaGoogle