Controlling Z-index in Crio WordPress Theme Design

Tagged: Crio, Design

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
May 8, 2024 at 10:52 am #131031

Andy Andersson
Guest

I am using Crio and trying to have images expand on hover by adding <div class=”grow”> to each image and using the following CSS:

.grow img{
transition: 1s ease;
}
.grow img:hover{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
transition: 1s ease;
}

It works except the blown up images are under any element after them in the page. I would like the expanded images to be on top of everything on the page – see big image on site.

I have tried, without success, the following:
– Adding a z-index to the CSS, i.e., .grow img:hover{…………….. z-index: 99999}
– Adding important to the CSS, i.e., .grow img:hover{…………….. z-index: 99999 !important }
– Adding a position to the code for each image (I read somewhere that z-index only works on ‘positioned’ images), i.e., < style=”position: relative;……
– Adding a z-index to the code for each element on the page not being expanded, i.e., < style=”position: relative; z-index=-1……

So how can one control what appears on top of what in Boldgrid Crio as I am stumped?

May 8, 2024 at 10:56 am #131075
Brandon C
Keymaster
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.
May 13, 2024 at 10:33 am #131194

Andy Andersson
Guest

Brandon,

You are THE man! No.2 in your list did the trick.

Thanks for the help.

Andy

May 13, 2024 at 10:42 am #131210

Brandon C
Keymaster

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!
Author

Posts