Let's explore the scenario where the text has z-index:2 and the image has z-index:1, assuming that the H2 text will remain fixed. However, this assumption is incorrect when it comes to understanding how z-index functions.
The z-index property determines the stacking order of elements on a webpage. Simply having a higher or lower z-index value does not automatically ensure that elements with higher values will always appear on top. To control the layering of elements, you need to incorporate the position property as well.
For example, if two elements possess different z-index values but share a relative position, their positioning will be influenced by each other - regardless of which element has a higher or lower z-index.
Illustrated below is a basic demonstration:
.top {
height: 200px;
background: purple;
position: relative;
z-index: 1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, .5);
}
.top:hover {
z-index: 3;
}
.bottom {
height: 300px;
background: yellow;
position: relative;
z-index: 2;
}
<div class="top">
</div>
<div class="bottom">
</div>
In this case, despite the varying z-index values of the elements, their positions interact due to both being relatively positioned. Hovering over the top div reveals the box-shadow overlapping on the bottom div, yet the spatial arrangement remains constant in terms of top, right, bottom, left - solely altering the stacking order.
Now, focusing on your specific instance:
We utilize position: absolute to detach the img element from the document flow, granting us the ability to leverage the z-index property. With the image outside the document flow, its presence no longer influences surrounding elements.
The subsequent code snippet offers a simplistic portrayal with modified position for the image. While it may not align precisely with your vision, it serves as a starting point for customization.
Additional considerations include:
- The
<center> tag is considered obsolete; opt for text-align: center targeting the h2 instead.
- To refine visual aesthetics, contemplate relocating the image outside the
h2 tags and enclosing both the h2 and img within a container element (e.g., div). This tactic enhances precision in positioning the image upon display.
h2 {
line-height: 68px !important;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
font-weight: 0 !important;
color: #000;
z-index: 12;
text-align: center;
}
.artisthover {
display: none
}
h2.two:hover img {
display: block;
z-index: -1;
position: absolute;
margin-top: -200px;
margin-left: -250px
}
h2.two a {
color: #000;
}
h2.three:hover img {
display: block;
z-index: -1;
position: absolute;
margin-top: -200px;
margin-right: -250px
}
h2.three a {
color: #000;
}
<h2 class="two">
<a href="http://lawnyavawnya.com/2018/artists/absolutelyfree">ABSOLUTELY FREE</a>
<img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="">
</h2>
<h2 class="three">
<a href="http://lawnyavawnya.com/2018/artists/badgeepoqueensemble">BADGE EPOQUE ensemble</a>
<img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px">
</h2>