To achieve the hover effect on an image, you should wrap the img tag within an inline or inline-block element and then add a pseudo-element to that wrapper which will only be displayed when hovering over it.
Check out this FIDDLE for demonstration: 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>