[miketicaParticipant]

Hi,

I am working on a website for one of my clients. I have 2 questions that I am hoping to find an answer for.

1. Text on hover over the images. I have noticed that this is a frequently asked question that sometimes has been answered and sometimes has been consider outside the scope of this support forum. I will try my luck and ask it anyway 😉

I have used the solution presented here: https://community.theme.co/forums/topic/text-on-hover-in-block-grid/ . However, I have difficulty centering the text and containing it so it doesn’t overflow outside the circle image. Also, it becomes a big mess on mobile. If possible, I would like to replicate it on mobile, or even have the text overlay all the time, the hover effect is not very useful on mobile.

I am open to other solutions/plugins, etc that would help me show text on top of those images on hover, make them clickable and keep them as circles on a single row, if you have any suggestions.

2. The spinning social icons- there are some sections they go on top of(as you scroll down) and some sections/elements they go under or even become hidden in the case of a section with background color. I would like to control this and have the icons show on top all the time.

Best Regards.

[miketicaParticipant]

The website is chicagobestevents.com

[Rue NelModerator]

Hello There,

Thanks for writing in!

1] Please have your css code updated. You can make use of this code instead:

.x-1-5 .text-on-hover {
    position: absolute;
    bottom: -120px;
    opacity: 0;
    width: 100%;
    max-width: 200px;
    padding: 15px;
    background-color: #000;
    background-color: rgba(0,0,0,0.35);
    color: #fff;
    transition: all 0.5s ease;
}
.x-1-5:hover .text-on-hover {
    bottom: 0;
    margin-bottom: 55px;
    opacity: 1;
    transition: all 0.5s ease;
}

This method is quite from old. You can try to use Essential Grid to have something with the same effect. You can install it by going to X Addons > Extensions. To know more about Essential Grid, please check it here: https://community.theme.co/kb/integrated-plugins-essential-grid/ and you might want to check out the grid examples here: essential.themepunch.com/#examples

2] To make sure that your spinning icons will always display on top, please find this block of code:

.x-share-options {
    position: fixed;
    left: 0;
    top: 20%;
}

You need to update it and make use of this code instead:

.x-share-options {
    position: fixed;
    left: 0;
    top: 20%;
    z-index: 100;
}

We would loved to know if this has work for you. Thank you.

[Author]

Posts