CODEWITHSUNDEEP
htmlcsswordpress
Joneskvist
Joneskvist

Reputation: 137

Switch colours when hovering over an image

I have created a html code with css which displays the image 1 below (left image). What I want to accomplish is that when you hover with your mouse over image 1, I want the image 2 (Right picture) to appear (do not mind the difference in sizes).

Image 1Image2

HTML:

<body>
    <div class="borderbox">
        <h3 class="header-3">+</h3>
        <p class="paragraph-text">visa fler bästsäljare</p>
    </div>
</body>

CSS:

.borderbox {
    border-style: dashed;
    border-width: 2px;
    border-color: #d3d3d3;
    position: absolute;
    height: 362px; !important
    width: 241px;  !important
    top: 0;
    left: 0;
    margin-right: 5%;      
}

h3.header-3 {
    font-size: 130px;
    text-align: center;
    color: #00a0df;
    margin: 4px auto 17px;
}

p.paragraph-text {
    font-size: 20px;
    text-align: center;
    color: #00a0df;
    text-transform: uppercase;
    font-family: inherit; font-weight: bold;

}

How can I implement this to my CSS, when you hover with your mouse over the Image 1 I want it to switch colour (image 2). The colour code for the blue is #00a0df.

URL to my website

Upvotes: 0

Views: 66

Answers (4)

MatthewG
MatthewG

Reputation: 9303

You can use the CSS :hover pseudo-class, which changes the style when the mouse is hovering over the element. Apply the colors you want (backround and font colors) to the hover attribute which will override the default (non-hovered) style. If you put the font and background color in the .borderbox class, then all you need is to override these in a .borderbox:hover like so:

.borderbox:hover {
  background-color: #00a0df;
  color: white;
}

The full example follows:

.borderbox {
    border-style: dashed;
    border-width: 2px;
    border-color: #d3d3d3;
    color: #00a0df;
    position: absolute;
    height: 362px; !important
    width: 241px;  !important
    top: 0;
    left: 0;
    margin-right: 5%;      
}

.borderbox:hover {
  background-color: #00a0df;
  color: white;
}

h3.header-3 {
    font-size: 130px;
    text-align: center;
    margin: 4px auto 17px;
}

p.paragraph-text {
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    font-family: inherit; font-weight: bold;

}
<body>
    <div class="borderbox">
        <h3 class="header-3">+</h3>
        <p class="paragraph-text">visa fler bästsäljare</p>
    </div>
</body>

Upvotes: 1

user3722439
user3722439

Reputation:

http://jsfiddle.net/mk7hrs49/3/

In order to get the white border you want when you hover over it.

Just add border color: 

.borderbox:hover{
    background-color: #00a0df;
    color: #FFF;
    border-color: white;  <---
}

cheers

Upvotes: 1

jmore009
jmore009

Reputation: 12933

Add color: #00a0df; to borderbox and change your text's color to color: inherit. Then on hover you can change the background-color, text color, border color and anything else you want:

.borderbox {
    border-style: dashed;
    border-width: 2px;
    border-color: #d3d3d3;
    position: absolute;
    height: 362px; !important
    width: 241px;  !important
    top: 0;
    left: 0;
    margin-right: 5%; 
    color: #00a0df; //add
}


h3.header-3 {
    font-size: 130px;
    text-align: center;
    color: inherit; //change
    margin: 4px auto 17px;
}



p.paragraph-text {
    font-size: 20px;
    text-align: center;
    color: inherit; //change
    text-transform: uppercase;
    font-family: inherit; font-weight: bold;

}

.borderbox:hover{
    background-color: #00a0df;
    color: #FFF;
    border-color: #FFF;
}

FIDDLE

Upvotes: 2

hallole
hallole

Reputation: 171

You should use the :hover Pseudoclass. If this is new to you, check out the explanations on W3Schools. Your code should look like that afterwards:

.borderbox:hover {
#Here comes all your css on hover
background-color: #00a0df;
}

Hope this solves your problem. :-)

Upvotes: 0

Related Questions