Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

How do you get that hover effect on itch io pages?

A topic by LunarMoonStudios created Jul 18, 2023 Views: 745 Replies: 3
Viewing posts 1 to 4

Hi I've been wondering for  a while how one would go about implementing that effect where when you hover over your game or asset pack on your itch io page it changes size. For example: https://jdsherbert.itch.io/

I just thought it looked cool and would like to use it...

(2 edits)

When you get permission (after contacting support) to add formatting to your game page, you can use custom CSS effects.

See https://itch.io/docs/creators/design for more information with the itch side of things.

See https://www.w3schools.com/CSSref/sel_hover.php for how to change CSS styling for when the mouse hovers over the html document element.
Note: It doesn't even need to be <a> links - you can hover over other tags like <p> paragraphs!
Note2: I haven't done this yet with anything that I've made, so I'm not currently able to help with implementing it.

(1 edit) (+1)

I added something similar to my userpage yesterday. 

Here's the code (change the selectors and properties as you want):

.user_page .profile_content .game_cell { 
    transition: all .2s; 
}  
.user_page .profile_content .game_cell:hover {
    transform: scale(1.05);
    z-index: 10000; /* prevent enlarged game from showing behind other elements */
}

Use your browser console to get the selectors of elements in page. Do check out the links in the last post if you don't know/remember CSS that well.

Note that all userpage selectors must have .user_page (#wrapper for game pages) at the start to make sure core itch.io UI is not affected. 

I have more uerpage CSS which I can share if you need.

Thank you

This topic has been auto-archived and can no longer be posted in because there haven't been any posts in a while.