Recreating the Google Images Search Layout with CSS

article
#1

Originally published at: http://www.sitepoint.com/recreating-google-images-search-layout-css/

My immediate reaction was that I would need to use JavaScript to set some layout and box model properties which I’m always reluctant to do and will only ever do as a last resort. As there was an already perfectly working example, I decided to open up developer tools to see how Google does it (why reinvent the wheel, right?)

Turns out that Google breaks down the structure into two divs, one div contains all of the image cells and the other div is for the expanding area. Once an image is clicked (and expanded), JavaScript inserts a spacer div after the last image cell in the row of the clicked div. JavaScript sets its height to the same as the expanded div, and positions the expanded div absolutely into the position that the spacer div occupies. This is clever, but not ideal due to it’s heavy reliance on JavaScript.

I had a basic idea that I’ve managed to develop into a working demo using CSS for all layout and box model properties. The only JavaScript necessary is to change class names based on the expansion toggle.

The Basic Markup

First of all, we need to construct the .image-grid container along with each .image__cell. Here’s the HTML:

<section class="image-grid">
  <div class="image__cell is-collapsed">
    <div class="image--basic">
      <a href="#expand-jump-1">
        <img id="expand-jump-1" 
                 class="basic__img"
                 src="http://lorempixel.com/250/250/fashion/1" alt="Fashion 1"/>
      </a>
      <div class="arrow--up"></div>
    </div>
    <div class="image--expand">
      <a href="#close-jump-1" class="expand__close"></a>
      <img class="image--large" 
           src="http://lorempixel.com/400/400/fashion/1" alt="Fashion 1"/>
    </div>
  </div>
  ...
</section>

The markup above contains one example .image cell element which will need to be duplicated for each image in the grid. Please note the identifiers for #close-jump-1 and #expand-jump-1, and the subsequent href attributes will need to be unique to the .image__cell. Hash links such as: href="#expand-jump-1" enable the browser to jump to the active image cell when pressed.

Continue reading this article on SitePoint

2 Likes
#2

Looks nice.

But it needs some additional code to work when users ctrl-click to open the links in new tabs.

I have built some things like that, where a bit of JS checks for a hash at page-load, and updates the state if the page to match what the onclick would do.

..but now I wonder if that part couldn't be implemented in CSS too, these days?
If im not mistaken, Wikipedia uses some useful trick like that for footnotes.

1 Like
#3

@MatsSvensson Yep, Wikipedia does do that. I wrote about it a while back:

http://www.impressivewebs.com/dynamically-highlight-content-wikipedia-css3/

Dan actually said he's working on incorporating this into a 2nd demo. We'll link it here when it's working correctly. Thanks for the suggestion!

2 Likes
#4

Nice idea @MatsSvensson. As @louislazaris mentioned I've been working on an additional demo which uses the :target pseudo selector to do the toggling of the expanded area instead of jQuery. I've put together a quick demo with this in action on my personal codepen here. Unfortunately, Codepen won't allow you to use hash links in the url as it uses iframes. Although not recommended or supported by Codepen, you can open the iframe in a new window by opening one of the image links in a new tab. That's how I've tested that it works anyway.

#5

Nice article!

I was wondering though, what is the actual benefit of doing it all in CSS?

If you used a little more js the expansion HTML for each image:

<div class="image--expand">
  <a href="#close-jump-1" class="expand__close"></a>
  <img class="image--large" 
       src="http://lorempixel.com/400/400/fashion/1" alt="Fashion 1"/>
</div>

could be missed out and generated by the js instead, saving quite a bit of page weight when including 10+ images.

#6

Cool.
But how is the support among browser for this?

Old crappy IE is becoming less of a problem,
but now more and more people are using old stock-browsers in mobile devices.
As a web-dev, IOS and Android almost makes you nostalgic for IE6 sometimes.

#7

Funny enough, Sitepoint will be releasing an article soon about this wink . (hopefully)

#8

Thanks @djeyewater, the reference in aiming to avoid using JS was in relation to setting the layout properties of the expanding area, not particularly the HTML content. If page weight is an issue then you could use JS to populate HTML within the expanding area asynchronously perhaps, after page load - assuming the images are in a collapsed state.

#10

This is great, thanks for posting this. This was one of two examples of how I could do this that I've been able to find. This was the superior example because it doesn't use a lot of heavy javascript. Thanks!

closed #11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.