Elevate the opacity with a hover effect

Question

Elevate the opacity with a hover effect

I am currently in the process of building my own website using siteorigin page builder on wordpress. One issue I have encountered is that they do not offer a hover option, so I had to create a custom CSS to add a hover effect on the background color. When I hover over a specific "div" or "child" element of the background, it changes the opacity differently than the rest. Here is a picture to illustrate the problem.

hover problem

As you can see, the blue backgrounds are different, even though the same rule is applied to the ".featr" background class.

Can anyone provide assistance with this? Thank you.

css wordpress hover widget siteorigin

Answer 1

Answer №1

Don't forget that the hover selector should directly follow the class, like this:

.featr:hover

Instead of:

.featr :hover

If you need assistance, make sure to provide your full code. It seems like the transition might not be necessary.

In response to the comment below: To create a smooth transition from the initial background color to the hover state, specify the starting point (.featr) and then define the ending state (.featr:hover). Include all the transition lines for compatibility with different browsers as it can vary in performance.

.featr {
background:rgba(0,0,0,1);
-o-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-khtml-transition: background 0.5s linear;
-webkit-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
transition: background 0.5s linear;
}

.featr:hover {
background:rgba(0,0,0,0.5);
}

Answer 2

Don't forget that the hover selector should directly follow the class, like this:

.featr:hover

Instead of:

.featr :hover

If you need assistance, make sure to provide your full code. It seems like the transition might not be necessary.

In response to the comment below: To create a smooth transition from the initial background color to the hover state, specify the starting point (.featr) and then define the ending state (.featr:hover). Include all the transition lines for compatibility with different browsers as it can vary in performance.

.featr {
background:rgba(0,0,0,1);
-o-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-khtml-transition: background 0.5s linear;
-webkit-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
transition: background 0.5s linear;
}

.featr:hover {
background:rgba(0,0,0,0.5);
}

Elevate the opacity with a hover effect

Answer №1

Similar questions

Adjusting the properties of a <span> tag when hovering over a different element

Generate a see-through overlay when hovering over an image that matches the image's precise dimensions

"Troubleshooting problems with jQuery accordion collapse and styling using CSS

Ensuring that the div remains at the top of the page while scrolling

The issue with HTML where the header and footer elements are continuously repeating when

Creating a bootstrap form field that spans 100% in width:

Arrange four divisions so that they are displayed in pairs on each row when the viewport width is smaller

How can I style the inner div by adding a class to the first div?

Vertically Center Image in a Div

Issue with Firefox position: absolute not producing the desired outcome

Find the nearest iframe relative to a parent element

Is there a way to ensure that the header is centered at the top and the footer is centered at the bottom of every printed page, even when

HTML - Custom styled <select> element

Move the object beyond the boundaries of the container that can be scrolled

first item's grandchild selection

The dimensions of text that wraps itself around multiple lines are distinct from those of text that remains on a single line

Updating the Background Color of a Selected Checkbox in HTML

Why are the UI components (`Card Number`, `MM/YY`, `CVC`) not being displayed in the React app when using Card

Utilize CSS to exclusively filter through items

The hyperlink within the dropdown menu in HTML code is malfunctioning