Gallery roll over

<ul class="grid"> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=1" alt="" /> <div class="info"> <p>Kitty 1</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=2" alt="" /> <div class="info"> <p>Kitty 2</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=3" alt="" /> <div class="info"> <p>Kitty 3</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=4" alt="" /> <div class="info"> <p>Kitty 4</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=5" alt="" /> <div class="info"> <p>Kitty 5</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=6" alt="" /> <div class="info"> <p>Kitty 6</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=7" alt="" /> <div class="info"> <p>Kitty 7</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=8" alt="" /> <div class="info"> <p>Kitty 8</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=9" alt="" /> <div class="info"> <p>Kitty 9</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=10" alt="" /> <div class="info"> <p>Kitty 10</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=11" alt="" /> <div class="info"> <p>Kitty 11</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=12" alt="" /> <div class="info"> <p>Kitty 12</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=13" alt="" /> <div class="info"> <p>Kitty 13</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=14" alt="" /> <div class="info"> <p>Kitty 14</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=15" alt="" /> <div class="info"> <p>Kitty 15</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=1" alt="" /> <div class="info"> <p>Kitty 16</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=2" alt="" /> <div class="info"> <p>Kitty 17</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=3" alt="" /> <div class="info"> <p>Kitty 18</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=4" alt="" /> <div class="info"> <p>Kitty 19</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=5" alt="" /> <div class="info"> <p>Kitty 20</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=6" alt="" /> <div class="info"> <p>Kitty 21</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=7" alt="" /> <div class="info"> <p>Kitty 22</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=8" alt="" /> <div class="info"> <p>Kitty 23</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=9" alt="" /> <div class="info"> <p>Kitty 24</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=10" alt="" /> <div class="info"> <p>Kitty 25</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=11" alt="" /> <div class="info"> <p>Kitty 26</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=12" alt="" /> <div class="info"> <p>Kitty 27</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=13" alt="" /> <div class="info"> <p>Kitty 28</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=14" alt="" /> <div class="info"> <p>Kitty 29</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=15" alt="" /> <div class="info"> <p>Kitty 30</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=1" alt="" /> <div class="info"> <p>Kitty 31</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=2" alt="" /> <div class="info"> <p>Kitty 32</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=3" alt="" /> <div class="info"> <p>Kitty 33</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=4" alt="" /> <div class="info"> <p>Kitty 34</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=5" alt="" /> <div class="info"> <p>Kitty 35</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=6" alt="" /> <div class="info"> <p>Kitty 36</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=7" alt="" /> <div class="info"> <p>Kitty 37</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=8" alt="" /> <div class="info"> <p>Kitty 38</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=9" alt="" /> <div class="info"> <p>Kitty 39</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=10" alt="" /> <div class="info"> <p>Kitty 40</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=11" alt="" /> <div class="info"> <p>Kitty 41</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=12" alt="" /> <div class="info"> <p>Kitty 42</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=13" alt="" /> <div class="info"> <p>Kitty 43</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=14" alt="" /> <div class="info"> <p>Kitty 44</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=15" alt="" /> <div class="info"> <p>Kitty 45</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=1" alt="" /> <div class="info"> <p>Kitty 46</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=2" alt="" /> <div class="info"> <p>Kitty 47</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=3" alt="" /> <div class="info"> <p>Kitty 48</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=4" alt="" /> <div class="info"> <p>Kitty 49</p> </div> </a> </li> <li> <a href="#"> <img src="http://placekitten.com/200/200?image=5" alt="" /> <div class="info"> <p>Kitty 50</p> </div> </a> </li> </ul> <!-- CSS --> body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; -webkit-font-smoothing : antialiased } .grid { margin: 0 auto; padding: 0; width: 100%; max-width: 1000px; } .grid li { width: 10%; background: #000000; float: left; position: relative; overflow: hidden; } .grid img { float: left; width: 100%; height: auto; position: relative; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); } .grid .info { position: absolute; width: 100%; height: 100%; padding: 15px; background: #DC584C; display: none; z-index: 2; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); } .grid p { font-size: 14px; font-weight: bold; color: #FFF; } <!-- JS --> ### Simple effect for roll over on grids, where the content slides based on the previous position Libraries: jQuery and jQuery.transit ### $ -> grid = $ ".grid" current = index:-1, column:0, line:0 columns = 10 easing = "cubic-bezier(0.165, 0.840, 0.440, 1.000)" time = 400 grid.find("a").on "mouseenter", (e) => el = $ e.currentTarget info = el.find ".info" image = el.find "img" index = el.parent().index() column = index % columns line = Math.floor(index / columns) console.log index, column, line item = el:el, index:index, column:column, line:line, info:info, image:image # stop if the return if current.el and current.index is index if line == current.line and column > current.column showItem item, "-100%", 0, "25%", 0 hideItem current, "100%", 0, "-25%", 0 else if line == current.line and column < current.column showItem item, "100%", 0, "-25%", 0 hideItem current, "-100%", 0, "25%", 0 else if line > current.line and column == current.column showItem item, 0, "-100%", 0, "25%" hideItem current, 0, "100%", 0, "-25%" else showItem item, 0, "100%", 0, "-25%" hideItem current, 0, "-100%", 0, "25%" current = item showItem = (item, infoX, infoY, imageX, imageY) -> item.info.stop().css(x:infoX, y:infoY, display:"block").transition x:0, y:0, duration:time, easing:easing item.image.stop().transition x:imageX, y:imageY, opacity:.5, duration:time, easing:easing hideItem = (item, infoX, infoY, imageX, imageY) -> return unless item.el item.info.stop().transition x:infoX, y:infoY, duration:time, easing:easing item.image.stop().css(x:imageX, y:imageY, opacity:.5).transition x:0, y:0, opacity:1, duration:time, easing:easing