.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; }
Viewing post in Examples of Great Game Pages
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.