stopping the white hover color

Tagged: exoplanet, hero, hover, icon, image

This topic has 5 replies, 2 voices, and was last updated 6 years, 4 months ago by Andy.

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

Author

Posts
July 31, 2018 at 7:19 pm #5346

Howardthebrit
Participant

Using exoplanet pro, I’m trying to make the featured services section work for me on my home page, with images instead of icons. I’m almost there but as soon as the pointer points to the image/icon a big white rectangle obliterates my (white) text, leaving just the image. I think that’s the hover color, but I can’t find a way to set that in the theme. I’d like to switch that off or make it transparent or something. I played around with CSS with this

.featured-icon:hover {
color: transparent;

}

but it’s not working… help!

July 31, 2018 at 7:58 pm #5347
Andy
Keymaster
It is the background of the whole of the featured service (not the icon) that changes on hover so the correct styling to use would be this:
```
.featured-post:hover {
    background: transparent;
}
```
July 31, 2018 at 9:11 pm #5348

Howardthebrit
Participant

Yep. That was it. You wonderful, wonderful person! I wish all tech support could be so prompt and so actually useful! Thanks!

August 1, 2018 at 12:22 am #5349

Howardthebrit
Participant

…spoke too soon. Small screens still see the white boxes…

That css snippet only seems to apply to desktop browser, white boxes are appearing on android, iphone, and ipad

August 1, 2018 at 12:49 am #5350

Howardthebrit
Participant

It seems to work with:

@media screen and (max-width: 2000px) {
.featured-post {
background: transparent;
}
}

but that feels really clunky setting 2000 to be a catch-all.

August 1, 2018 at 6:38 am #5354
Andy
Keymaster
This should work
```
@media screen and (max-width: 768px) {
    .featured-post {
        background: transparent;
    }
}
```
Author

Posts

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

The topic ‘stopping the white hover color’ is closed to new replies.