PDA

View Full Version : CSS Image Hover, etc.



CarlMartin10
Jul 20th, 2010, 04:28 AM
I am trying to do two things here, and need some assistance.

My site: www.billboardfamily.com

What I am attempting to do:

1) Trying to create a "Partners" area, like what is on this page, at the bottom: http://iwearyourshirt.com/

I have the image I am using the right size, but it is displaying with some dots (look like bullets), and you can not see the images.

2) I have some css that is taking these images and it is supposed to display the grayscale image, and it becomes color on mouse hover. That is kind of working.

Please advise! thanks.

TriLLi
Jul 20th, 2010, 11:35 AM
Hi,

Lets presume that this is your link
<a href="#" class="btn-one">One</a>

than you need css like this in order to achieve this

a.btn-one
{
background-image: url('link to your inactive image') scroll no-repeat transparent;
width: 100px; /*width of your image*/
height: 20px; /*height of your image*/
display: block;
overflow: hidden; /*hide anything beyond borders*/
text-indent: -1000; /*using to hid text of link*/
}
/*and now just add another class
a.btn-one:HOVER
{
background-image: url('link to your active image') scroll no-repeat transparent;
}
/*and that is all*/
*/


just let me know if this helps.

CarlMartin10
Jul 20th, 2010, 11:50 AM
Hi,

Lets presume that this is your link
<a href="#" class="btn-one">One</a>

than you need css like this in order to achieve this

a.btn-one
{
background-image: url('link to your inactive image') scroll no-repeat transparent;
width: 100px; /*width of your image*/
height: 20px; /*height of your image*/
display: block;
overflow: hidden; /*hide anything beyond borders*/
text-indent: -1000; /*using to hid text of link*/
}
/*and now just add another class
a.btn-one:HOVER
{
background-image: url('link to your active image') scroll no-repeat transparent;
}
/*and that is all*/
*/


just let me know if this helps.


I figured it out. My hover images were working perfectly, it was a formatting issue (bullets from the <li> were making alignment an issue. This is resolved, thanks.