|
|
| Line 1: |
Line 1: |
| /* Ensure the parent container is positioned relative */
| |
| .hover-wrapper {
| |
| position: relative; /* Establishes a reference point for the absolute positioning of child elements */
| |
| }
| |
|
| |
| /* The hover element */
| |
| .hover-to-show {
| |
| cursor: pointer;
| |
| }
| |
|
| |
| /* The hidden overlay */
| |
| .hide { | | .hide { |
| display: none; | | display: none; |
| opacity: 0; | | opacity: 0; |
| transition: opacity 0.5s ease; | | transition: opacity 0.5s ease; |
| position: absolute; /* Position absolute to overlay without shifting other content */
| |
| top: 100%; /* Position it below the hover element, adjust as necessary */
| |
| left: 0; /* Align it horizontally, adjust if needed */
| |
| z-index: 2; /* Ensure it appears above other content */
| |
| cursor: pointer;
| |
| } | | } |
|
| |
|
| /* Display the overlay on hover */
| |
| .hover-to-show:hover + .hide { | | .hover-to-show:hover + .hide { |
| display: block;
| | display: block; |
| opacity: 1;
| | position: fixed; |
| | top: inherit; |
| | z-index: 2; |
| | cursor: pointer; |
| | opacity: 1; |
| | transition: opacity 0.5s ease; |
| } | | } |
.hide {
display: none;
opacity: 0;
transition: opacity 0.5s ease;
}
.hover-to-show:hover + .hide {
display: block;
position: fixed;
top: inherit;
z-index: 2;
cursor: pointer;
opacity: 1;
transition: opacity 0.5s ease;
}
