CODEWITHSUNDEEP
htmlcss
fia928
fia928

Reputation: 143

Adding gradient to button image upon hover

I have a png graphic that I'm using as a button and when the user hovers over the image, I would like to have a color gradient appear over just the button image. Everything I'm finding is working for background images.

My html looks like this: 

<img id="connectionRight_img" class="btn" src="imgs/trailEnd_turnRight.png" alt="Right Arrow"/>

And now I'm wondering what needs to go inside the css to accomplish the color change upon hover: 

.btn:hover: {
??
}

Any suggestions would be appreciated.

Upvotes: 0

Views: 717

Answers (2)

Howard
Howard

Reputation: 3848

This works fine for me. Still recommend not to use image as background if possible. It will slowdown the performance.

<style>
    button.mylink  { border-width:0px; text-align:center; width : 60px; height : 20; display: inline-block; background-image : url(imgs/trailEnd_turnRight.png); text-decoration:none  }
    button.mylink:hover { background-image : url(imgs/trailEnd_turnRight_hover.png) }
</style>

<button class="mylink" href="#">abc</button>

Upvotes: 1

cameronjonesweb
cameronjonesweb

Reputation: 2506

You need to wrap your img with an inline or inline-block element and add a pseudo element to that wrap that only displays on hover

FIDDLE: http://jsfiddle.net/xz7xy8dg/

CSS:

.wrap {
    position:relative;
    display:inline-block;
}

.wrap::after {
    position:absolute;
    height: 100%;
    width:100%;
    top:0;
    left:0;
    background: -moz-linear-gradient(top, rgba(0,255,0,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,255,0,1)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#00ffffff',GradientType=0 );
    display:none;
    content: ' ';
}

.wrap:hover::after {
    display:block;
}

HTML:

<div class="wrap">
<img id="connectionRight_img" class="btn" src="imgs/trailEnd_turnRight.png" alt="Right Arrow"/>
</div>

Upvotes: 0

Related Questions