Different BG on Hover

[fikasem]

Hey there,

I’m trying to create a hover thing where the background color change for an icon only. It’s on this site: https://marketingofdesign.com/ and the first section under “WHAT WE DO”. I managed to create a different color on hover but it is being applied to the entire column although the class is added specifically to the text box where the icon appear. I got some of the code from another thread so might be completely messed up for what I am trying to do.

Any chance you guys can help?

Thanks!
Ann

This is what I added:

.my-hover:hover:after {
transition: background-color 100ms linear;
background-color: rgba(0,0,0,0.1);
}

.my-hover:after {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
transition: background-color 100ms linear;
}

[paul.r]

Hi Ann,

Please replace your css code to this.

.x-text.my-hover:hover {
   background-color:red;
}

Thanks

[fikasem]

Yes! That’s exactly what I wanted, thanks Paul! Seems like I tried too hard huh

[jade]

You’re most welcome.