Hi Andy,

Thank you for reaching out! It sounds like you’re facing some layering issues with CSS in your Crio theme when trying to make images expand over other content on hover. Your attempts to use z-index are on the right track, but z-index only affects elements that are positioned (not static, which is the default). Here’s a refined approach to ensure your images expand and overlap other elements correctly:

1. Ensure Positioning is Correct: As you’ve read, z-index works on positioned elements (i.e., those with position: relative, absolute, or fixed). Since z-index didn’t work even after you applied position: relative;, you may need to ensure that no parent container has a stacking context interfering with your z-index.
2. Refine Your CSS Code: Apply position: relative; directly in the hover state and ensure that the z-index is high enough to overlap other content. Here’s how you might adjust your CSS:

   .grow img {
   transition: 1s ease;
   position: relative;
   z-index: 1; /* Ensure a base level z-index is set */
   }.grow img:hover { transform: scale(1.2); z-index: 9999; /* High z-index to ensure it's on top */ transition: 1s ease; }

   This ensures that the image has a base z-index which then gets elevated upon hover.

I hope this helps Andy!  Please let us know if you have more questions for us.

Hi Andy, you’re most certainly welcome and that’s awesome to hear!  Don’t hesitate to reach back out to us if you have any other questions, we’re always here to help!