- Posts
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?
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-indexare on the right track, butz-indexonly affects elements that are positioned (notstatic, which is the default). Here’s a refined approach to ensure your images expand and overlap other elements correctly:- Ensure Positioning is Correct: As you’ve read,
z-indexworks on positioned elements (i.e., those withposition: relative,absolute, orfixed). Sincez-indexdidn’t work even after you appliedposition: relative;, you may need to ensure that no parent container has a stacking context interfering with yourz-index. - Refine Your CSS Code: Apply
position: relative;directly in the hover state and ensure that thez-indexis 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-indexwhich then gets elevated upon hover.
I hope this helps Andy! Please let us know if you have more questions for us.
Brandon,
You are THE man! No.2 in your list did the trick.
Thanks for the help.
Andy
- Ensure Positioning is Correct: As you’ve read,
- The topic ‘Controlling Z-index in Crio WordPress Theme Design’ is closed to new replies.
