User:Toad64/Homepage: Difference between revisionsGive feedback
Jump to navigation
Jump to search
added css code to herocards :D |
updated css code on page |
||
| Line 56: | Line 56: | ||
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"> | 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"> | ||
.HeroCard .CardBacker { | |||
position: absolute; | position: absolute; | ||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
pointer-events: none; | pointer-events: none; | ||
z-index: 1; | |||
- | background-image: url("/images/1/1c/Card_backer.png"); | ||
background- | background-size: 100% 100%; | ||
transition: | 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; | |||
} | } | ||
.HeroCard .HeroImage, | |||
.HeroCard .HeroName { | |||
position: relative; | |||
z-index: 2; | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||