position of thumbnails titles on mouseover
-
Hello,
I've just finished designing a new website and there is one last aspect I need to solve.I would like the thumbnails titles to appear on mouseover always in the same position (in the bottom right corner of the page).
As you can see, I managed to place the element in the desired position. However, the titles are often hidden under the thumbnails. Would you know how to make it appear on top of them instead?
Here is the website and here is the custom CSS:
.title {
position: fixed;
bottom: 10px;
right: 5%;
z-index: 10;
}Thank you very much!
Andrea -
hi!
you have to read this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
and then go through all of the parent containers of your image. and overwrite the css that produces a stacking context, with css that does not produce a stacking context. (by creating custom css in lay options → custom css)
so i think its like
row is pos relative:
.row{
position: relative;
}and it needs to be
.row{
position: static;
}and so on
make sure to really read the article and understand it
-
Hi @arminunruh and thank you so much for pointing me in the right direction! I adjusted all the parent elements and it works now.
Thanks again!
Andrea
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it