CSS unable to alter image on DIV hover due to technical issue

I have a DIV that changes its color when hovered over

I am looking to change the image inside the div when hovering over the entire div, not necessarily just on the image itself.

Here is the HTML:

<div class="about">
<img class="about-project1">

In the CSS:

.about-project1 {
    width: 121px;
    height: 42px;
    background: url("img/coching.png") no-repeat;
    border: 0;
}

.about:hover h3 {
    color: #fff;
}

.about a.about-project1:hover {
    background: url("img/coching_white.png") no-repeat;
}

Also, why does the image appear with a border even though I have declared border:0?

Thank you very much,

Udi

htmlcss

Answer №1

If you're looking to achieve a specific outcome, this code snippet can help:

HTML

<div class="about">
   <div class="about-project2"/>
</div>

CSS

.about-project2 {
    width: 121px;
    height: 42px;
    background: url("https://www.gstatic.com/webp/gallery3/1.sm.png") no-repeat;
}

.about:hover h3 {
    color: #fff;
}

.about:hover .about-project2 {
    background: url("https://www.gstatic.com/webp/gallery/4.sm.jpg") no-repeat;
}

The image border issue was likely due to using an img element without the src attribute. By switching to a div, the problem should be resolved.

Check out the Fiddle here

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

issue with mark.js scrolling to selected sections

Our document searching functionality utilizes mark.js to highlight text and navigate to the results. You can see an example of this in action here. If you search for "Lorem ipsum" -> the highlighting works perfectly, but the navigation jumps to fragmen ...

javascripthtmljquerymark.js

Creating column gaps that remain consistent when resizing a webpage is essential for maintaining a clean and organized layout

Visit my current site [This is the HTML code for my website:][2] <div class="column-box" style="width: 100%"></div> <div id="column1" style="float:left; margin:15; width:33%;"> <p>Sara Adams<br> I am a Web Developer and C ...

htmlcss

Issue with deploying responsive background image on Github platform

My responsive background image isn't displaying properly on mobile devices after I deployed my project to Github. Although it appears correctly under the Google Chrome inspect mobile tool, when accessed live on a mobile device, the image covers the ba ...

cssgithubresponsive-designbackground-imagematerialize

Tips for utilizing a razor template inside quotation marks

When attempting to create a razor template within a link <a asp-action="Details/@(customerModel.CustomerId)" class="button">Detail</a> the resulting HTML output is unexpected: https://localhost:44316/User/Details%2F92e48 ...

c#htmlasp.net-mvcrazor

What is the difference between a CSS background image and a default background?

I am faced with a challenge concerning a div element that has both a background color and an image with a transparent background. My objective is to have the default background color of the div be white, while having a different color as the background fo ...

backgroundbackground-imagecss

Tips for customizing fonts in a WordPress object

WordPress is sending me an object that I need to work with. The main issue at hand: the font styles of WordPress posts in my app are all inconsistent. How can I go about styling these fonts uniformly? Take a look at this Plunkr if you'd like to expe ...

angularjscss

Show a live feed of rows from a SQL database table

I've been struggling with this issue for more than a week now. I have an offline SQL database/website set up where the browser screen is divided into two sections - the full table displayed at the bottom with limited details, and a styled version of i ...

phpjqueryhtmlmysqlajax

The PHP SDK function works flawlessly in the local host environment and in console, however, it fails to perform on the browser when deployed

My PHP function is behaving differently between the server's command line and the web page, with successful execution on a local WAMP host. Any thoughts on what could be causing this inconsistency? function getCFTemplateSummary($CFUrl){ //init client ...

phpamazon-web-servicescommand-linehtmlaws-cloudformation

Utilize the input field value in an HTML dialog box to assign it to a variable in the code.gs file with the help

I'm trying to create a dialog box where the user can select a year, and then have the server process the selected value using the function doSomethingWithCompetitionYear(theYear). I've researched several discussions, but I'm having trouble ...

javascripthtmlgoogle-apps-scriptdialog

Jquery click event is functioning for only one specific id, not for both

I'm experiencing an unexpected issue that I can't seem to figure out. I've been working on a webpage where users can download images captured from a webcam or phone camera. Initially, I used an anchor tag with a "download" text that triggere ...

javascriptjqueryhtmlonclickclick

Begin your journey with Foundation Navigation as it seamlessly transitions from left to right

I am currently working on this navigation: I am trying to modify the behavior of the hamburger menu so that when it is clicked, it slides from left to right instead of its current downward motion. Additionally, I would like to adjust the width of the menu ...

jqueryhtmlcsszurb-foundationnavbar

Is there a way for me to incorporate a self-referencing onclick event into each <a> tag?

My single page app requires that link clicks are not processed in the regular way, but are instead passed to my router. I currently have a menu code that works perfectly (with the goto function changing the HTML and returning false): <a class="nav- ...

javascripthtmljqueryonclickhref

Receiving 'Unexpected end of input' error when using a string as a JavaScript function argument

I am trying to implement an ajax request function in my project. This is the code snippet I have: function Reject(id, scomment) { jQuery.ajax({ type: "POST", url: "reject.php", data: {id: id, Scomment: scom ...

javascriptphphtmljqueryajax

Drop and Drag File Uploading

I'm currently facing some challenges trying to locate what I need and figuring out how to implement it. At the moment, I have a simple PHP file uploader that works by allowing users to click on a custom upload button, select a file, and using JavaScr ...

phpjqueryhtmluploaddrag-and-drop

What is the best way to smoothly move a fixed-size div from one container to another during a re-render process?

Introduction Anticipated change Similar, though not identical to my scenario: Situation 0: Imagine you have a container (chessboard with divs for game pieces) and a dead-pieces-view (container for defeated pieces). The positioning of these containers i ...

javascripthtmlcssreactjscss-transitions

Retrieve the bounding rectangle of a div that has the CSS style `display: contents` using the getBoundingClientRect

My objective is to apply styling and obtain the bounding box of an entire "row" within a CSS grid, including features like highlighting when hovering over it. To achieve the styling aspect, I make use of the display: contents property, so that the styles ...

javascripthtmlcss

Unable to load variables into site.css in order for Flask app to successfully render home.html

I'm encountering difficulties in getting my site.css file to accept two variables passed in from my app.py using Jinja2 templates, namely {{ variable }}. In app.py, I have defined two variables named empty_fill_line and fill_line, which dynamically up ...

pythoncssflaskjinja2

What is the best way to perform calculations within a PHP loop for <input> elements and then display the results using a JavaScript loop?

Hello everyone, I'm currently struggling with displaying the calculations from a loop of input tags. What I'm trying to achieve is having 5 rows with input fields. At the end of each row, there should be a span area that displays the calculation ...

javascriptphpjqueryajaxhtml

What is the best way to bring a single object from Django into an HTML template?

Currently, I am working on a Django website project that involves two models: Gifi (which contains .gif images) and Categorite. My goal is to navigate to another HTML template with specific image information when a .gif image is clicked. Although I have ma ...

pythonhtmldjangowebdjango-queryset

What is the equivalent of window.onload in emscripten?

In my HTML file, I have been copying and pasting the Emscripten generated code into the <script></script> region. However, the browsers tend to execute the Emscripten code before the entire HTML file has been processed. This causes issues if ...

javascripthtmlcemscripten