Product Grid Hover Effect

Question

Does anyone know how can I find the script or base code for the Product grid hover on this page http://www.collectedmemories.com/cgi-bin/WebObjects/cmStore.woa/wa/catpage?catnum=11 ?

Of course I would have it totally different in style but I would like to know how it was done.

Answer 1

Roll your own, you can even do that in CSS3 now-a-days with animation effects without much of a fuss. Something like this should do:

.element {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 50px;
}

.box {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
}

.box:hover {
  transition: top 0.1s, left 0.1s, bottom 0.1s, right 0.1s ease-in;
  top: -50px; left: -50px;
  bottom: -50px; right: -50px;
}

Example: http://plnkr.co/edit/hxF0Bo34tjgCHJJvlIRL?p=preview

You will have to do some additional work to make it your own, add in the additional functionality to show more on hover, etc. But it shouldn't be much more work.