[Jason BParticipant]

Themeco,

I am having problems getting this done. I have attempted to do this using all related articles to no avail. I am using Cornerstone.

I would like to do the following:

1)Use a Feature Box.
2)Use a background image for the Feature Box.
3)Have a color (semi-transparent) overlay the background image upon hover.
4)Change the color of the Feature Box title and content upon hover.

Thank you for your assistance. Login info will be in next private reply.

[Jason BParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi Jason,

To achieve that, you can add this under Custom > CSS in the Customizer.

.my-feature-box:hover .x-feature-box-title {
     color:red;
     transition: color 100ms linear;
}

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

.my-feature-box:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: background-color 100ms linear;
}

Then add my-feature-box in the class field of your feature box element.

Hope that helps.

[Jason BParticipant]

Paul,

Thank you for this. I am not great with CSS, and your support is the reason I continue to use this theme. Your answer almost worked, and I can see we are going down the right path.

—-

To complete one portion of my above inquiry,

“4)Change the color of the Feature Box title AND CONTENT upon hover.”

I copied your above portion for the .x-feature-box-title color and edited it to apply the same functionality to the content:

.my-feature-box:hover .x-feature-box-content {
color:red;
transition: color 100ms linear;
}

—

Using your solution, it actually overlays the background color over the content/title of the Feature Box. This makes it impossible to choose proper colors for both the content/title of the Feature Box.

Is there a way to avoid this, and to only have the background overlay color effect the background image?

Also, I have a couple of other questions regarding the background color overlay of the X Feature Box

1.) Using CSS, is it possible to have a background color overlay the background image BEFORE hover? How would I accomplish this?

2.) Using CSS, is it possible to make this background overlay color (before hover) start darker in the upper corner and become lighter towards the center? How would I accomplish this?

I will send a private message with an example I am trying to closely duplicate.

-Thanks

[Jason BParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add this :

.x-feature-box-content {
    position: relative;
    z-index: 2000;
}
.x-feature-box.my-feature-box:before {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

#3 You can generate gradient here http://www.cssportal.com/css-gradient-generator/ and replace generated code with background-color: rgba(0,0,0,0.5); in code above.

Hope it helps.

[Author]

Posts