Question

Just made a semi-transparent image into a link in my rails App

<%= link_to image_tag("cow.png"), cows_path %>

The actual image, however, doesn’t take up a perfect rectangle, because of its transparency, and when I hover over it with my mouse, it creates a black bar the width of the image rectangle below the image, protruding from either side of the non-transparent part of the image.

The question is how to get this hover behavior to stop.

The transparent image is of the cow, and the black bar there is the problem. The tan stuff is the page background, not the image.

Any ideas? I just don’t know the CSS command to fix this.

EDIT: Fiddle . Sorry. Was away from my computer for a bit. I included some of the suggestions, but they don’t seem to be fixing things. I may also be doing it wrong. This is a css.scss stylesheet.

Answer 1

The thing that worked for me was to put this in the .animal-buttons class:

a {
background: none;
}