Feature Box Hover Over Color

[webxid]

Hi, I was wondering how i could get the feature box background color to change when the mouse is hovered over it, like an animation.

[Prasant]

Hello Daniel,

Thanks for writing in!

Please use following CSS under X > Theme Options > CSS:

.x-feature-box:hover i {
    border: 1px solid red !important;
    color: white !important;
    background-color: #000 !important;
    transition: all 0.3s ease-in-out;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[webxid]

Doesn’t quite work. It only changes the icon color when I hover over it. I wanted the background of the featured box to change color when hovered over.

[jade]

Hi Daniel,

Please try this:

.x-feature-box {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.x-feature-box:hover {
    background-color: #efefef;
}

If you want to apply this to a specific feature box, you can assign a class to the feature box element then update the code to:

.x-feature-box.the-class-you-assigned {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.x-feature-box.the-class-you-assigned:hover {
    background-color: #efefef;
}

Hope this helps.

Where the-class-you-assigned is the class you assigned to the feature box.

[webxid]

@Jade

.x-feature-box.the-class-you-assigned {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}

.x-feature-box.the-class-you-assigned:hover {
background-color: #efefef;
}

Doesn’t quite work. Doesn’t do anything.

[ruenel]

Hello Daniel,

The code did not work because you did not add a custom class to your feature boxes. I would recommend that you update the code and use this instead:

.x-feature-box {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.x-feature-box:hover {
    background-color: #ccc !important;
}

We would love to know if this has worked for you. Thank you.