On 06.07.2012 14:24, Courtney Sohn wrote:
I am very new to this. I am using the forever theme. In my sidebar I have a
couple of images (as widgets) which link, when clicked, to other sites. I'd
like to have another image (same picture different color) replace the current
image when it is hovered over. After I've added the new image to my media file,
what css coding do I use to create the hover image?
The site I am using is: girlavantgarde.com
We usually swap background-images, not foreground-images, but if you
style those links somewhat like the following you can use the same
technique to swap either background or foreground image.
aside:first-child .textwidget a {outline: solid 1px red /* testing only
*/; display: block; overflow: hidden; width: 100px; height: 102px;
margin: 10px auto;}
aside:first-child .textwidget a img {display: block; margin: 0 auto;}
The link itself creates a boundary, beyond which all is hidden
(overflow: hidden;).
Images are made as tall as is necessary to contain all states you want -
link, visited, hover etc, one above the other with an even empty space
between each state.
Image is then positioned so first, second, third or whatever state comes
into view in the link, depending on whether it is a non-visited link, a
hovered-on link, a visited link, etc.
Once finished you remove the "testing only" outline, and are left with
evenly divided image-links that swap states on demand.
regards
Georg
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
