Accordion-style Expanding Grid View With jQuery - Gridacord.js

Gridacord.js is a fancy jQuery plugin for creating an Accordion-like grid view where the grid item will expand to the full size while shrinking the others on roll over. Also provides a grayscale effect for the images based on CSS3 filters.

How to use it:

1. Add images to the grid view following the markup structure like this:

<div id="gridacord-container">
  <div class="line">
    <div class="item" data-focus-x="50" data-focus-y="30">
      <img src="1.jpg">
    </div>
    <div class="item" data-focus-x="50" data-focus-y="30">
      <img src="2.jpg">
    </div>
    <div class="item" data-focus-x="50" data-focus-y="30">
      <img src="3.jpg">
    </div>
  </div>
  <div class="line">
    <div class="item" data-focus-x="50" data-focus-y="30">
      <img src="4.jpg">
    </div>
    <div class="item" data-focus-x="50" data-focus-y="30">
      <img src="5.jpg">
    </div>
    <div class="item" data-focus-x="50" data-focus-y="30">
      <img src="6.jpg">
    </div>
  </div>
  ...
</div>

2. The main CSS styles for the grid view:

#gridacord-container {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  flex-direction: column;
  overflow: hidden;
}

#container .line {
  display: flex;
  width: 100%;
  overflow: hidden;
  outline: 5px solid white;
  z-index: 5;
}

#container .line .item {
  height: 100%;
  overflow: hidden;
  outline: 5px solid white;
  z-index: 5;
}

#container .item img {
  position: relative;
  transition: filter 1s ease-in-out;
  -webkit-transition: -webkit-filter 1s ease-in-out;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

#container .item:hover > img {
  transition: filter 1s ease-in-out;
  -webkit-transition: -webkit-filter 1s ease-in-out;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

3. Load jQuery library and the jQuery Gridacord.js script at the end of the webpage. That's it.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="gridacord.js"></script>

---

This awesome jQuery plugin is developed by tloureiro. For more Advanced Usages, please check the demo page or visit the official website.