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.

csswordpresshoverwidgetsiteorigin

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);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Utilizing React.js to implement white-space styling on numeric values for

I am a beginner in Reactjs and eager to learn and improve. Here is some code I have been working on: there's an <h1> element with the text "test", and beneath it, I want to display numbers vertically like this: 1:1, 1:2, 1:3. However, the CSS do ...

javascripthtmlcssreactjsjsx

What is the best way to disable the click function for <a> tags that have a specific class?

I am dealing with parent navigation items that have children, and I want to prevent the parent items from being clickable. Here is an example of how they currently look: <a href="parent">Parent Item</a> Is there a way to select the <a> ...

javascriptjquerycssanchor

Is there a way in Angular2 to append a class name from a variable to the host element without removing the current classes?

I am facing a challenge where I have a class name stored in a variable and I need to apply it to the host element of my Angular2 component. However, I am struggling to find a solution for this. While I can easily add a constant string as a class using Hos ...

cssangularthemes

How to Create a Hover Drop Down Menu that Disappears When Not Hovered Over

When I hover over the drop down menus on my Navbar, they display perfectly. However, it's impossible to click on the items in the menu because as soon as I move the cursor away from the main nav, it disappears. I've tried adding display:block and ...

htmlcsshovernavbar

Personalize the appearance of dynamically generated DIV elements

This script generates a random number of squares (ranging from 20 to 40) and adds text to each square. The script then calculates the width of each square so that they all fit in a single row. Here is the code snippet: var quantity = Math.floor(Math.ran ...

javascriptcss

Adjust the size of the font based on the screen resolution

What is the best way to adjust font size based on screen resolution so that text remains as a single line when the screen is small? For example: http://prntscr.com/2qa9ze <div class="centerbreaking"> <section id="breaking-news"> <div id ...

htmlcsstext

Problem with IE off-canvas scrolling

Currently, I am facing an issue with the scrolling functionality of an off-canvas sidebar on my Joomla 3 website. It seems to be working fine in Chrome and Firefox, but when it comes to Internet Explorer, the visible scroll bar refuses to move when attempt ...

javascripthtmlcssjoomla

list without specific order spacing

I have implemented an unordered list in the footer section of my HTML document. Within this list, the first two items consist of social media logos displayed as images. To enhance their visibility and prominence within the footer, I have assigned them a wh ...

htmlcsspaddingmarginhtml-lists

Preventing multiple clicks by toggling the HTML tag on and off

Here is the jQuery structure that I am currently working with: $(document).on('click', '.view-details', function () { $(this).prop("disabled", true); // API call1 // API call2 // API call3 $(this).prop("disabled" ...

javascriptjqueryhtmlcss

Issue with loading function in FullCalendar React integration

Currently experimenting with FullCalendar v5 for React and exploring the Resource Timeline view feature. Facing an issue with the "loading" function - the idea is to monitor the state of FullCalendar and, if it's in a loading state, display a Spinner ...

htmlcssreactjsfullcalendarfullcalendar-5

What could be causing my fixed header to disappear in Safari 5?

I am experiencing a strange issue with my fixed header on Safari 5 for iPad. The header disappears once it scrolls down to a certain point, even though it works fine in IE, Firefox, Chrome, and the latest version of Safari. Has anyone else encountered this ...

htmlcsssafaripositionmobile-safari

Creating a Border Length Animation Effect for Button Hover in Material-UI

I'm currently exploring Material-UI and trying to customize a component. My goal is to add a 'Border Length Animation' effect when hovering over the button. Unfortunately, I have yet to successfully implement this animation as intended. For ...

javascriptcssreactjsmaterial-uicss-animations

The v-btn label in Vuetify is extending beyond the lateral borders and overlapping

In this scenario, the button is supposed to break the line and increase its height. However, the text is overlapping the lateral borders (you can see this behavior in the Codepen link provided below). Is there a way to correct this issue? Codepen Link & ...

cssvue.jsvuetify.js

Increasing the padding at the top of the logo when scrolling down the page

When scrolling down the page, there seems to be extra padding above the logo that is throwing off the alignment with the rest of the site. I've been trying different solutions to correct this issue: //$('.navbar-brand').css({ 'padding- ...

javascriptjqueryhtmlcsstwitter-bootstrap

The attempt to remove the ajax-loaded page while preserving the original div is proving to be

I have a function that is triggered when a link is clicked. This function uses ajax to load a new page over a div. <pre><code> function displayContent(id) { loadPage_signup = "register.php"; loadPage_info = "userinfo.php"; $.aj ...

javascriptjqueryhtmlcssajax

Overlap and cover additional elements within a DIV

I am looking to create a versatile function that can effortlessly overlay various elements such as selects, textfields, inputs, divs, tables, and more with a partially transparent div matching their exact height and width. I have managed to obtain the pos ...

javascriptjquerycssjquery-pluginstwitter-bootstrap-3

Can a CSS3 filter be utilized to transform gradient colors into solid colors?

I have an interesting scenario where I am using a -webkit-mask with a radial-gradient to create small dots on a background image. These dots are transparent, allowing the background image to show through. However, each dot has a gradient color within it. ...

csscolorsradial-gradientscss-filterscss-mask

Tips for resolving vertical alignment styling for images of varying sizes within Vue.js transition-group?

I have created an image slider example, but I'm facing a styling issue when using images of different dimensions. The element leaving the array is positioned absolutely for smooth transitions, but this causes the image to move up. I am trying to vert ...

cssanimationvue.jstransition

What is the best way to center and personalize slider arrow placements vertically?

I applied CSS to customize the appearance of the previous and next arrows for .customer-logos, but I'm still seeing the default button style along with my changes. How can I resolve this issue and position the buttons on either side of the slider inst ...

jqueryhtmlcss

Transitioning from Tailored CSS to Bootstrap

While I am experienced in HTML and CSS, I am new to working with Bootstrap. Here is a code snippet that works well but has a lot of custom CSS. Below you can see my HTML and CSS code. .container { padding: 150px; display: flex; align-items: center ...

htmlcssbootstrap-4