CODEWITHSUNDEEP
htmlcss
Udi Heller
Udi Heller

Reputation: 51

CSS change image on hover of DIV doesn't work

I have a DIV that change his color when mouse over

I want to change the image inside the div when mouse over the div, not over the necessarily on the image

In the HTML

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

CSS

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

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

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

Another thing is that the image appears with border although i tell border:0 why ?

10x very much Udi

Upvotes: 0

Views: 104

Answers (1)

AmmoPT
AmmoPT

Reputation: 958

The following code will do what you want:

HTML

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

CSS

.about-project1 {
    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-project1 {
    background: url("https://www.gstatic.com/webp/gallery/4.sm.jpg") no-repeat;
}

Finally, your image had a border because it was an img element with no src attribute, I changed the original code to use a div instead.

Fiddle is here

Upvotes: 1

Related Questions