User:Nano/common.css: Difference between revisions
From IdleOn MMO Wiki
(Created page with "→Hover Box for switching the visibility of the selected item: .hoverbox { display:inline-block; padding:0em; } .hoverbox .hoveritem { display:none; margin:0em; padding:0em; } .hoverbox .hoveritem.selected { display:inline-block; } .hoverbox:hover .hoveritem { display:inline-block; } .hoverbox:hover .hoveritem.selected { display:none; }") |
No edit summary |
||
| (13 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.hover-image { | |||
. | position: relative; | ||
. | display: inline-block; | ||
} | |||
. | |||
. | .hover-image .tooltip-image { | ||
display: none; | |||
position: absolute; | |||
top: 0; | |||
left: 120%; | |||
z-index: 10; | |||
max-width: 300px; | |||
max-height: 300px; | |||
overflow: hidden; | |||
} | |||
.hover-image:hover .tooltip-image { | |||
display: block; | |||
} | |||
.tooltip-content img { | |||
display: block; | |||
max-width: 100%; | |||
max-height: 100%; | |||
visibility: visible; | |||
opacity: 1; | |||
} | |||
Latest revision as of 19:32, 24 November 2024
.hover-image {
position: relative;
display: inline-block;
}
.hover-image .tooltip-image {
display: none;
position: absolute;
top: 0;
left: 120%;
z-index: 10;
max-width: 300px;
max-height: 300px;
overflow: hidden;
}
.hover-image:hover .tooltip-image {
display: block;
}
.tooltip-content img {
display: block;
max-width: 100%;
max-height: 100%;
visibility: visible;
opacity: 1;
}
