Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags
(1 edit) (+1)
.game_grid_widget .game_cell .game_thumb .gif_overlay {
background-color: transparent !important;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0s;
-ms-transition: opacity 0s;
transition: opacity 0s;
animation: wobble 1s;   display: none;
}
@-webkit-keyframes wobble  {
  0%  { -webkit-transform:  rotate(0deg); }
  20%  { -webkit-transform:  rotate(2deg); }
  50%  { -webkit-transform:  rotate(-2deg); }
  100%  { -webkit-transform:  rotate(0deg); }
}
@keyframes wobble  {
  0%  { transform:  rotate(0deg); }
  20%  {transform:  rotate(2deg); }
  50%  { transform:  rotate(-2deg); }
  100%  { transform:  rotate(0deg); }
}
.image_header :hover {
animation: wobble 1s;   }
.game_cell_data :hover {
animation: wobble 1s;   }
.game_grid_widget .game_cell .game_thumb {
   box-shadow: 0 0 0 3px white;
}
.game_grid_widget .game_cell .game_thumb :hover  {
   box-shadow: 1px 0px 5px 6px white;
}
.game_grid_widget .game_cell {
    text-align: center;
}
(+1)

the gif images on the page are gif captures using Licecap. The first frame I place in with gimp so that it has some cover art before you hover over the image.

Thanks for sharing this! I also use LICEcap for gifs. The GIMP trick is a good one. I didn't notice any of the effects, but I really like the grid layout (I have something identical on my site home page right now).

That gives me an idea -- I can generate the CSS/images for the home page automatically like I do for my static site today ...

Thanks for this, it really helps.