This article introduces in detail how to solve the problem of cropping or occluding images in CSS hover effect. By adjusting the HTML structure, using CSS' position attributes and z-index for precise layout and cascade control, and removing the overflow: hidden restrictions of the parent element, ensuring that the image remains visible in interactive animations and is located at the desired top level, thus achieving a smoother and more professional visual effect.

In web design, interactive cards (Cards) are common UI elements. When there is a hover animation on the card, such as background elements enlargement or color filling, you can sometimes encounter the problem that the image is cropped or covered by other elements. This is usually caused by improper settings of the CSS overflow attribute, location context, and z-index cascade order. This tutorial will dive into how to solve such problems, ensuring that the image remains visible at the top level under any hover effect.

Problem Analysis: Causes of the image being cropped or overwritten

In the provided code examples, the problem is mainly reflected in the following aspects:

1. overflow: hidden; Crop the child element : .card element sets overflow: hidden;. This means that anything beyond the .card boundary will be cropped. When hovering, the internal .overlay or .circle elements are enlarged by transform: scale(4) and are hidden if the image is inside or overwritten by these elements and the image itself exceeds the boundary of .card.
2. Improper image positioning : The image in the original code was placed inside the .circle and position: fixed; was used. position: fixed causes the element to position relative to the viewport, leaving the stream of its parent element, which is not in most cases “inside the card” behavior we expect and may cause the image position to be disconnected from the card.
3. Complexity of z-index Cascade context : Although images set higher z-index, the effectiveness of z-index depends on the positioning context. If the parent element of the image (.circle) itself is enlarged by the hover effect and overwrites the image, or the image is positioned so that it does not participate in normal stacking, it may cause display exceptions.

To solve these problems, we need to rethink where the image is placed, how it is located, and how it interacts with the parent element.

Solution: Optimize HTML structure and CSS positioning

The core idea is to "liberate" the image from the parent element that may cause cropping or casing problems and position it in a container that accurately controls its position and casing order.

1. Adjust HTML structure

First, we need to introduce a common parent container to wrap the cards and images. This will provide a reference for relative positioning of the image, allowing it to be positioned independently of the animation inside the card.

 

<span class="container"> <!-- New container-->
    <a href="#" class="card education">
        <div class="overlay"></div>
        <div class="circle"></div> <!-- The image is no longer a child element of .circle -->
        <p>VALORANT</p>
    </a>
    <!-- The image is now a direct child element of .container, at the same level as .card -->
    <img  class="card-image lazy" src="/static/imghw/default1.png" data-src="https://cdn.discordapp.com/attachments/998657954536489042/1106584776946746424/Raze_-_Full_body.png"   style="max-width:90%" alt="Technical Guide to Always Displaying on Top in CSS Hover Effect" >
</span>

explain:

• We create a new span element and give class="container".
• a.card and img.card-image are now direct child elements of span.container.
• The image is no longer nested inside .circle or .card, which makes it no longer affected by the transform animation of the circle or the overflow: hidden property of the card.

2. Adjust CSS style

Next, we need to apply the correct CSS style to the new HTML structure and images.

 /* ... (Retain the original body, .education, .credentialing, .wallet, .human-resources styles) ... */

.card {
  width: 200px;
  height: 310px;
  background: #ffff;
  border-top-right-radius: 10px;
  /* Remove or modify overflow: hidden; */
  /* If the image needs to exceed the card boundary, this property must be removed*/
  /* If the card content does need to be cropped, but the image is exceptional, a more complex layout or cropping method is required*/
  /* In this case, in order for the image to be fully displayed, we remove it*/
  /* overflow: hidden; */ /* Comment out or delete */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative; /* Keep relative positioning so that its internal elements can be absolutely positioned*/
  box-shadow: 0 14px 26px rgba(0,0,0,0.04);
  transition: all 0.3s ease-out;
  text-decoration: none;
  border-radius: 20px;
}

/* ... (Retain the original .card:hover, .card:active, .card p, .circle, .circle:after, .circle svg, .overlay style) ... */

/* New container style*/
.container {
  position: relative; /* Key: Provide positioning context for the absolute positioning elements inside*/
  /* Adjust width and height as needed to include cards and images*/
  /* For example: width: 200px; height: 310px image_extra_height; */
  /* Or let it automatically adjust according to the content*/
}

/* Image style*/
.card-image {
  position: absolute; /* Key: Absolute positioning relative to .container*/
  top: -36px; /* Adjust according to the needs of the image displayed above the card*/
  left: 0; /* Adjust according to the image's horizontal direction of the card*/
  z-index: 1; /* Key: Make sure the image is above .overlay (z-index:0) and .circle (z-index:1)*/
              /* Note: If .circle zooms in on hover, a higher value may be required*/
  pointer-events: none; /* Optional: Make the image not capture mouse events, allowing clicking of the card below*/
}

explain:

• .card style adjustment : The most critical change is to remove or comment out the overflow: hidden; on .card. This is because the image is now a child of the container, not a child of the card, but if the image needs to "look" like it extends out of the card and exceeds the visual boundary of the card itself, the card's own overflow: hidden property will crop this part. By removing it, the image can be freely beyond the visual boundaries of the card without being cropped.
• .container style : set position: relative;. This is a necessary condition for absolute positioning elements (.card-image), which defines a positioning context so that .card-image can be positioned relative to .container.
• .card-image style :
  • position: absolute;: Removes the image from the document stream and locates relative to its nearest positioned ancestor element (i.e., .container).
  • top: -36px; and left: 0;: These values are adjusted according to the visual position of the image in the original code. -36px means that the image is offset by 36 pixels upwards, causing part of it to exceed the top of the card. left: 0; Align the left edge of the image with the left edge of the container. You need to adjust these values according to the actual image and card design.
  • z-index: 1;: Make sure the image is above other elements on the card. In the original code, the z-index of .overlay is 0 and the z-index of .circle is 1. Since the image is now at the same level as .card and its z-index is set to 1, it will be at the same level as .circle, but because its order in the DOM is after .card and is absolute positioned, it will usually overwrite the non-absolute positioned simultaneous elements. If you need to absolutely guarantee that the image is still on it after the circle is enlarged, you may need to set z-index to a higher value, such as z-index: 2; or higher, depending on the z-index settings of other elements.
  • pointer-events: none;: This is a very useful property. It makes the image not respond to mouse events (such as clicks, hover). This attribute is essential if the image is only decorative and you want the user to be able to click on the card below the image.

Complete code example

Integrate the above modification into the original code to get the final solution:

CSS Code

 body {
    background: #f2f4f8;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    height: 100vh;
    font-family: "Open Sans";
}

.education {
    --bg-color: #FD4556;
    --bg-color-light: #ffeeba;
    --text-color-hover: white;
    --box-shadow-color: #FD4556;
}

.credentialing {
    --bg-color: #B8F9D3;
    --bg-color-light: #e2fced;
    --text-color-hover: #4C5656;
    --box-shadow-color: rgba(184, 249, 211, 0.48);
}

.wallet {
    --bg-color: #CEB2FC;
    --bg-color-light: #F0E7FF;
    --text-color-hover: #fff;
    --box-shadow-color: rgba(206, 178, 252, 0.48);
}

.human-resources {
    --bg-color: #DCE9FF;
    --bg-color-light: #f1f7ff;
    --text-color-hover: #4C5656;
    --box-shadow-color: rgba(220, 233, 255, 0.48);
}

.card {
    width: 200px;
    height: 310px;
    background: #ffff;
    border-top-right-radius: 10px;
    /* Remove overflow: hidden; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 14px 26px rgba(0,0,0,0.04);
    transition: all 0.3s ease-out;
    text-decoration: none;
    border-radius: 20px;
}

.card:hover {
    transform: translateY(-5px) scale(1.005) translateZ(0);
    box-shadow: 0 24px 36px rgba(0,0,0,0.11),
        0 24px 46px var(--box-shadow-color);
}

.card:hover .overlay {
    transform: scale(4) translateZ(0);
}

.card:hover .circle {
    border-color: var(--bg-color-light);
    background: var(--bg-color);
}

.card:hover .circle:after {
    background: var(--bg-color-light);
}

.card:hover p {
    color: var(--text-color-hover);
}

.card:active {
    transform: scale(1) translateZ(0);
    box-shadow: 0 15px 24px rgba(0,0,0,0.11),
        0 15px 24px var(--box-shadow-color);
}

.card p {
    font-size: 28px;
    color: #4C5656;
    margin-top: 60px;
    padding-top: 30px;
    z-index: 1000;
    transition: color 0.3s ease-out;
}

.circle {
    margin-bottom: -22px;
    width: 131px;
    height: 131px;
    border-radius: 50%;
    background: #ffff;
    border: 2px solid var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease-out;
}

.circle:after {
    content: "";
    width: 118px;
    height: 118px;
    display: block;
    position: absolute;
    background: var(--bg-color);
    border-radius: 50%;
    top: 7px;
    left: 7px;
    transition: opacity 0.3s ease-out;
}

.circle svg {
    z-index: 10000;
    transform: translateZ(0);
}

.overlay {
    width: 118px;
    position: absolute;
    height: 118px;
    border-radius: 50%;
    background: var(--bg-color);
    top: 36px;
    left: 50px;
    z-index: 0;
    transition: transform 0.3s ease-out;
}

/* New container style*/
.container {
    position: relative; /* Provides positioning context for the absolute positioning elements inside*/
    /* The size of the container can be adjusted as needed to ensure that the card and image can be fully included*/
}

/* Image style*/
.card-image {
    position: absolute; /* Absolute positioning relative to .container*/
    top: -36px; /* Offset upwards so that the image part exceeds the top of the card*/
    left: 0; /* The left edge of the image is aligned with the left edge of the container*/
    z-index: 2; /* Make sure the image is on top of all card elements, including the enlarged circle */
    pointer-events: none; /* Image does not capture mouse events*/
}

HTML Code

 

<span class="container">
    <a href="#" class="card education">
        <div class="overlay"></div>
        <div class="circle"></div>
        <p>VALORANT</p>
    </a>
    <img  class="card-image lazy" src="/static/imghw/default1.png" data-src="https://cdn.discordapp.com/attachments/998657954536489042/1106584776946745424/Raze_-_Full_body.png"   style="max-width:90%" alt="Technical Guide to Always Displaying on Top in CSS Hover Effect" >
</span>

Notes and summary

1. The impact of overflow attribute : overflow: hidden; is a very powerful attribute that forces content cropping. When designing interactive animations, if some elements need to exceed the visual boundaries of their parent container, overflow: hidden; must be carefully considered or removed.
2. Positioning context : position: relative; and position: absolute; are very important concepts in CSS layout. Understanding how they create positioning contexts is essential to precisely control element positioning. The element of position: absolute; is positioned relative to its nearest non-static positioned ancestor element.
3. z-index Cascade order : z-index is only valid for elements that have been positioned (position attribute value is not static). Understanding the creation rules of Stacking Context in complex layouts can help you better control the order in which elements are displayed. Typically, elements with higher z-index values are displayed on top of elements with lower z-index values.
4. pointer-events : pointer-events: none; is useful when dealing with decorative, non-interactive overlay elements, which ensures that the user can still interact with the elements covered below.
5. Responsive Design : In a real project, you may also need to consider how images and cards perform at different screen sizes. Using relative units (such as em, rem, %, vw, vh) or media queries can help achieve better responsive layouts.
6. Performance optimization : A large number of transform animations and complex z-indexes may have a performance impact. Reasonable use of hardware acceleration (such as transform: translateZ(0);) can improve the smoothness of animation.

With the above adjustments, you will be able to create card effects that remain visible and on the top of the hover animation, improving the user experience and interface professionalism.

The above is the detailed content of Technical Guide to Always Displaying on Top in CSS Hover Effect. For more information, please follow other related articles on the PHP Chinese website!