The Deadlock Wiki

User:Toad64/Homepage: Difference between revisions

Browse history interactively
← Older edit

Toad64 (talk | contribs)

1 user group
480 edits
undo
VisualWikitext
Toad64 (talk | contribs)
Contributors
480 edits
can this be code work on the hero page cards too? time to test
Toad64 (talk | contribs)
Contributors
480 edits
m Toad64 moved page User:Toad64/Sandbox to User:Toad64/Homepage: making the idea a seperate page outside of my sandbox testing
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
<h3>Hero Card interaction with mouse</h3>
<h3>Herocard design idea</h3>
<p>This javascript code adds a listener to the <code>.HeroCard</code> element to allow the card the mouse is currently hovered over to tilt based on the mouse's location, relative to the center of the card:</p>
<p>This javascript code adds a listener to the <code>.HeroCard</code> element to allow the card the mouse is currently hovered over to tilt based on the mouse's location, relative to the center of the card:</p>
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
Line 55: Line 55:
</syntaxhighlight>
</syntaxhighlight>


<p> You can see this code in action by clicking [https://deadlock.wiki/User:Toad64/Sandbox?withJS=User:Toad64/common.js Here] (desktop required).</p>
Using some css code, the background of the Hero Card can  its background change when hovered (if not blocked behind the hero image).<syntaxhighlight lang="css">
{{Deadlock Wiki/Heroes}}
.HeroCard .CardBacker {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
 
    background-image: url("/images/1/1c/Card_backer.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
 
    opacity: 0;
    transition: opacity 0.2s ease, filter 0.2s ease;
   
    filter: brightness(0) saturate(100%) invert(74%) sepia(35%) saturate(620%) hue-rotate(114deg) brightness(91%) contrast(89%);
}
 
.HeroCard:hover .CardBacker {
    opacity: 1;
}


Using a similar code, this also works with the hero image card found on that Hero's wiki page:
.HeroCard .HeroImage,  
<syntaxhighlight lang="javascript">
.HeroCard .HeroName {
add new java script block here, if needed
    position: relative;
    z-index: 2;
}
</syntaxhighlight>
</syntaxhighlight>
{{Infobox hero
 
| key = hero_unicorn
<templatestyles src="User:Toad64/styles.css"/>
| voice_actor = <!--Natalie Lander (SPECULATION) -->
<p> You can see the javascript code in action by clicking [https://deadlock.wiki/User:Toad64/Sandbox?withJS=User:Toad64/common.js Here] (desktop required).</p>
| release_date = February 9 2026
{{Deadlock Wiki/Heroes}}
| codenames = Unicorn, Pepper
}}
Retrieved from "https://deadlock.wiki/User:Toad64/Homepage"