CSS: Adjusting color when hovering

I've been working on a website featuring clickable images, but I'm struggling with the ...:hover function. My goal is to have the image overlayed with a white color at 0.1 opacity upon hovering.

<html>
<head>
    <style>
        body {padding: 0; margin: 0;}
        img {
            margin-top: -10px;
            width: 100%;
            height: auto;
        }
        a:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        #asca:hover {background-color: rgba(255, 255, 255, 0.1);}
        #fhca:hover {background-color: rgba(255, 255, 255, 0.1);}
        #asca img:hover {background-color: rgba(255, 255, 255, 0.1);}
        #fhca img:hover {background-color: rgba(255, 255, 255, 0.1);}
    </style>
</head>
<body>
    <a id="asca" href="asc.php">
        <img src="Pictures/chevcorvette4kp.png" width="4096" height="900"  alt="ascpic">
    </a>
    <a id="fhca" href="fhc.php">
        <img src="Pictures/fhyper.png" width="4096" height="900"  alt="fhcpic"> 
    </a>
</body>
</html>

I've made multiple attempts to change the hover color without success. Any advice would be greatly appreciated.

htmlcssimagehoverbackground-color

Answer №1

The issue arises due to the image overlapping its own background-color. There are several methods to achieve the desired outcome, but the simplest approach is to apply a background-color to the anchor tags and adjust the image opacity on hover.

<html>
<head>
    <style>
        body {padding: 0; margin: 0;}
        img {
            margin-top: -10px;
            width: 100%;
            height: auto;
        }

        #asca,
        #fhca {
            background-color: rgb(255,255,255);
        }

        #asca:hover img,
        #fhca:hover img {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <a id="asca" href="asc.php">
        <img src="Pictures/chevcorvette4kp.png" width="4096" height="900"  alt="ascpic">
    </a>
    <a id="fhca" href="fhc.php">
        <img src="Pictures/fhyper.png" width="4096" height="900"  alt="fhcpic"> 
    </a>
</body>
</html>

Answer №2

The issue lies within your CSS styling where the background color set for hover is positioned behind the foreground image, making it unseen as the foreground image covers it completely.

To achieve the desired effect without altering your current HTML structure, you can update your CSS code as shown below. (Key portions of CSS highlighted in comments)

<style>
    body {padding: 0; margin: 0;}
    img {
        margin-top: -10px;
        width: 100%;
        height: auto;
    }
    a {
        background-color: #fff; /* Apply a white background to the <a> tag */
    }
    a:hover img {
        opacity: .9; /* Decrease foreground image transparency by 10% to reveal the white background slightly. */
    }
</style>

Answer №3

Consider adjusting the opacity to prevent the background from affecting the layout.

body {
  padding: 0;
  margin: 0;
}

img {
  margin-top: -10px;
  width: 100%;
  height: auto;
}

a:hover img {
  opacity: 0.2;
}

#asca:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#fhca:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#asca img:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#fhca img:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
<a id="asca" href="asc.php">
  <img src="http://via.placeholder.com/350x150"   alt="ascpic">
</a>
<a id="fhca" href="fhc.php">
  <img src="http://via.placeholder.com/350x150"   alt="fhcpic"> 
</a>

Answer №4

Unfortunately I am unable to test at the moment, however you may want to experiment with utilizing z-index properties.

img {
    margin-top: -10px;
    width: 100%;
    height: auto;
    z-index: 0;
}
a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 10;
}

Answer №5

Give this code a shot:

a {
    position: relative;
    overflow: hidden;
}
a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.78);
    opacity: 0;
    transition: all ease 0.3s;
}
a:hover:before {
    opacity: 1;
}

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

Tips for managing three select menus in AngularJS

Assistance needed for creating a series of interconnected dropdown menus in AngularJS. The functionality should allow the second dropdown to open upon selecting a value in the first dropdown, and the third dropdown to open upon selecting a value in the sec ...

htmlangularjsselect

User information in the realm of website creation

Can someone provide insight on where user data such as photos, videos, and posts is stored? I doubt it is saved in an SQL database or any similar system. ...

javascripthtmlmysqlnode.jsdatabase

Avoid importing the React CSS style file at all costs

Currently, I am working on a project and facing a minor issue related to importing the style.css file. I am aware that the syntax should be import "./style.css", however, upon implementation, I encountered a Terminal Output error. The output generated by ...

cssreactjs

Adjusting the appearance of a JavaScript element based on its hierarchy level

Currently, I am utilizing Jqtree to create a drag and drop tree structure. My main goal is to customize the appearance of the tree based on different node levels. Javascript Tree Structure var data = [ { name: 'node1', id: 1, chi ...

javascripthtmlcssjqtree

Why is my React build's index.html coming up empty?

I've been working on a React app using Snowpack, and everything seems to be in order. The build process completes successfully, but when I try to open the index.html file from the build folder, the page appears blank. To temporarily resolve this issu ...

javascripthtmlreactjssnowpack

Customize your website with CSS and Bootstrap: create a transparent navbar-wrapper

Is there a way to make the menu bar background transparent without affecting the transparency of the text on the menu bar? This template is based on Twitter Bootstrap carousel. In this specific line, <div class="navbar navbar-inverse navbar-static-to ...

htmlcsstwitter-bootstrap

What is the best way to smoothly switch from one Font Awesome icon to another?

I am working on an HTML button with the following code: <button id="sidebar-toggle-button" class="btn btn-primary header-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample&q ...

htmlcssbootstrap-5font-awesome

Ensure that each row of x images has the same height based on the height of the viewport

Currently, I am working on a website using HTML and CSS, specifically focusing on a "blog" header section. I am aiming to create a responsive grid layout featuring x images with equal heights (width adjusted according to their natural dimensions) and consi ...

javascriptjqueryhtmlcss

The navigation bar is not suitable for this situation

Navbar Image : Expected Result : Actual Result : Can you help me fix this? Here is my navbar code: <nav class="navbar navbar-default navbar fixed-top"> <div class="container-fluid"> <div cl ...

htmlcssbootstrap-4

Adding an external link in the `require()` function within the `src` attribute of an `<img>` tag

I am facing a similar issue to the one described in this question here: Linking to images referenced in vuex store in Vue.js The main difference is that I am dealing with an external link for the src attribute of an img tag, like 'https://....' ...

javascriptimagevue.jsnuxt.js

Creating dynamic form fields using AngularJS

I have a form that includes an input field, a checkbox, and two buttons - one for adding a new field and one for deleting a field. I want to remove the add button and instead show the next field when the checkbox is checked. How can I achieve this? angu ...

javascriptjqueryhtmlangularjs

Adjusting the arrangement of elements based on the size of the screen

Two floating <div>'s are styled with classes .a and .b. Both <div>'s are floated to the left, each taking up 50% of the width, aligning them horizontally. On smaller screens, I want both <div>'s to be aligned vertically. ...

htmlcss-floatcss-position

There seems to be an issue with the location.href function in the server-side code of

I'm encountering an issue in the code below where I am attempting to redirect to the login page, but it seems to not be functioning as expected. app.get('/current-pass', (req, res) => { res.sendFile(path.join(staticPath, "currentPass ...

javascripthtmlnode.jsfirebasenpm

Datetimepicker cannot be displayed on this bootstrap version

I am looking to implement a datetime picker for a textbox, but I suspect that I am missing some necessary Bootstrap links. Could someone please point them out for me? Thank you in advance. <div class="form-group row align-items-center justify-conten ...

htmlbootstrap-4

Ensure that adjacent elements operate independently from one another

The code snippet provided above showcases four components: StyledBreadcrumbs, FilterStatusCode, Filter, LinkedTable. The FilterStatusCode component enables users to input search data using TagInput. If the user inputs numerous tags, this component expands ...

javascriptcssreactjsmaterial-ui

Adjust the width of content within a wrapper using HTML and CSS to automatically resize

I am facing an issue with a content div that has variable length content arranged horizontally. I want the width of this content div to adjust automatically based on the length of its content. Removing the arbitrary "20%" value from the width property is c ...

htmlcss

Text successfully inserted into the input field using Xpath

I need help with the following issue: I am trying to use Selenium to verify if an input field contains a specific text that has been manually entered. Here is an example of an input field with the value '50': <input type="text" class="value ...

phphtmlseleniumxpathweb

Does anyone have tips on how to properly align a table within a page or div so that it appears centered?

I followed an online tutorial to create this table, but now I want to center it on the page and I'm not sure how to do that. Can someone help me out? Thank you in advance! http://jsbin.com/xiwayugu/8/ ...

jqueryhtmlcss

Sending input values to controller action parameters in CakePHP

I am working on an HTML form in which I need the URL output to be structured as follows: "example.com/mycontroller/action/mike/apple" Upon submitting the form using "post" method, the form values are not visible and can only be accessed through "_POST" ...

phphtmlcakephpcakephp-2.0forms

`The multiple selection options are not appearing correctly on the screen`

Below is the code I am using: <select id="accessList" name="accessList" multiple="multiple" style="position:relative;left:5px;overflow-x:auto;width:200px"> <option value="36453" style="text-align:left;width:auto">TestGroupterminal121 ...

htmlcss