Standard

Sretched

Navigation

Backgrounds

CSS Grid Highlight UsageHomeCodes › CSS Grid Highlight Usage

  • Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis tortor ligula, in luctus nulla. Donec eget erat eu urna lobortis imperdiet et ac purus.

  • Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis tortor ligula, in luctus nulla. Donec eget erat eu urna lobortis imperdiet et ac purus.

  • Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis tortor ligula, in luctus nulla. Donec eget erat eu urna lobortis imperdiet et ac purus.

  • Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis tortor ligula, in luctus nulla. Donec eget erat eu urna lobortis imperdiet et ac purus.

  • Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis tortor ligula, in luctus nulla. Donec eget erat eu urna lobortis imperdiet et ac purus.

  • Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis tortor ligula, in luctus nulla. Donec eget erat eu urna lobortis imperdiet et ac purus.


CSS Grid Highlight

A CSS only image-hover effect for showing twice the content in one element! You can find out more at sohtanaka.com.


Images

A PSD has been included for the same sized images as above.


Javascript

There is none. It's CSS only! However, make sure this is in the <head>:

<link href="scripts/grid-gallery/css.css" rel="stylesheet" type="text/css" media="screen">

HTML

The HTML below is only for the grid plugin. To add sorting visit here and to add Fancybox visit here.

The columns are made up of unordered list items, within each list item is the thumbnail image and the details of the item wrapped in a class of "info".

<ul class="columns">
<li>
<img src="thumbnail.jpg" alt="" />
<div class="info">
<h2>Title</h2>
<p>Short Description</p>
<div class="more"><a href="#">More</a></div>
</div>
</li>
</ul>

Official Documentation and Support

Official documentation can be found at sohtanaka.com.