The best way to do mouseovers

[lukeurtnowski]

im trying to figure out the best way to do mouseovers…
Heres an example

and when my mouse moves over the image

its made using
(HTML)

<div id="Library"></div>

(CSS)

      #Library {
 background-image: url('LibraryTransparent.png');
 height: 70px;
 width: 120px;
}

#Library:hover {
background-image: url('LibraryHoverTrans.png');
}

I was thinking if I ha a image with a transparent background, is there a way to have that image appear like a square with a white background, but when the mouse hovers over it, only its background seems to change. like

<img class="tran" src="circle.gif">

then in the CSS, put something like

img.tran {
width:400px;
height:400px;
background-color: #000;
}
img.tran:hover {
background-color: #231f20 
}

[RyanReese]

Are you missing some code there?

[lukeurtnowski]

opps, fixed

[coothead]

Hi there lukeurtnowski,

here is one example…

[code]

untitled document body { background-color:#f0f0f0; } #Library { width:16.54vw; height:16vw; line-height:1.2; padding:2vw 1vw; margin:auto; border:1px solid #000; background-color:#201619; background-image:url(http://coothead.co.uk/images/dog.jpg); font-weight:bold; font-size:3vw; color:#fff; text-align:center; background-size:100% auto; box-shadow:0.5vw 0.5vw 0.5vw #999; text-shadow:0 0 1px #000,0 0 2px #000,0 0 3px #000; } #Library:hover { background-image:none; }

Some
text
goes
here

[/code]

coothead

[RyanReese]

You could wrap your image with a shrink-to-ft type wrapper and set the background on that intermediate element. That way #Library isn’t affected, but the background will change, and thus the transparent will.

[Erik_J]

@lukeurtnowski

I was thinking if I ha a image with a transparent background, is there a way to have that image appear like a square with a white background, but when the mouse hovers over it, only its background seems to change. like

<img class="tran" src="circle.gif">

then in the CSS, put something like

img.tran {
width:400px;
height:400px;
background-color: #000;
}
img.tran:hover {
background-color: #231f20 
}

Yes you can, if I understand what you want correctly: If the image with a foreground square/circle is made with a transparent background. Then you can apply a white/black background to it and change that on hover.

If you only want to cover the images on hover as I think was the other part of your question;
As your example images seems to be content in the html, a good way would be to wrap them in spans and use absolute positioned overlays with or w/o background color-image that will cover each image on hover. E.g.:

span{
    position:relative;
    display:inline-block;
}
span:after{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    content:"\a0";
}
span:hover:after{
    background:21f120;
}

<span><img src="image.jpg" alt="object"></span>

This can also be used with the first square/circle example with those images as background image and add/change background color on hover.:

span{
    position:relative;
    display:inline-block;
}
span:after{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background: white url("circle.gif");
    content:"\a0";
}
span:hover:after{
    background-color:#21f120;
}