Hover Box How?

How to create a css box that changes colors on hover.

[Sabyre]

Greetings,

I need help trying to accomplish something. I have searched and searched for a solution and I can't find anything ... I have tried a bunch of different things and still no luck. I'm sure it's something simple but I am not all that fluent with css, you could say that I am somewhat new to it other than the basics.

I am trying to create retangular box to put an image in. The box around the image will make the image look like a poloroid photograph. Ok, I got that and can do it.

I would like that box to change color when hovered over. The image is a clickable link. I would also like the background to stay changed for 'visited'. Best I can get it to do is change the border color which is not what I am looking for. Even then its the border of the image and not the box.

I hope that was clear enough.

Picture a poloroid that changes color when you mouse over and stays changed if you click it.

Thanks

[Major_Payne]

Post your current code and the full link to image being used. Help would be a lot more forthcoming if someone could see your efforts to date without coding it all from scratch.

What you want can be done.

[alias]

For your purposes, you probably should use :focus instead of :visited, or simply add custom classnames.

Anyway, a usable sample code to work on would be much more of use for us, if you want any help.

[Sabyre]

Thanks for the replies,

I worked out almost exactly what I am looking for with the below posted code. I havent really messed with the 'visited' part of it yet.

The big problem that I am having is due to the 'float: left' I can not get things to line up properly. I would post a link, but I think I read somewhere that its against your policy, not to mention it is an adult oriented site.

Basically what I have is a gallery. The places I am looking to have this effect has a loop running, and each instance of the loop uses the below posted CSS. It creates a table. But because of the 'float:left' I can not get it to horizontal center or verticle center.

.albumcont {
border: 1px solid #000;
horizontal-align: middle;
width: 230px;
height: 375px;
vertical-align: center;
float: left;
}
.album a {
margin: 0px 25px 25px 0px; 
border: 2px solid #000;
padding: 10px 10px 20px 10px;
display: inline-block;
/*float: left;*/
background: #F9F8F7;
font-family: sans-serif;
color: #000000;
text-decoration: none;
text-align: center;
line-height: 100%;
}

[Major_Payne]

Anytime you float a container, you remove it from the document flow and it will move as far as it can within its own container. If you do not need it to float, but need it to center, then remove the float and add:

margin: 0 auto;

You have a width less than 100% so the container should center within whatever container it is in.

Yeh, link to adult site would be a definite no-no...darn it! LOL

[Sabyre]

Well ... ok, some progress... They are now centered horizontally, but I can not get then to center vertically.

Here is the CSS in use now. I'm not even positive how they are centered horizontally.

.thumbcont {

border: 1px solid #000;

width: 150px;
height: 175px;

/*float: left;*/
}
.thumbalbum a {
vertical-align: middle;
border: 1px solid #000;
padding: 5px 5px 15px 5px;
display: inline-block;
background: #F9F8F7;
}

[Sabyre]

margin: 0 auto; did nothing for me btw.

[Sabyre]

EURIKA!

God, after days and days...

.acont {
margin: 10px;
width: 195px;
height: 350px;
display: table;
float: left;
}
.albumcont {
display: table-cell;
vertical-align: middle;
}
.album a {
border: 2px solid #000;
padding: 10px 10px 20px 10px;
display: inline-block;
background: #F9F8F7;
font-family: sans-serif;
color: #000000;
text-decoration: none;
text-align: center;
line-height: 100%;
}
.album a:hover {
border: 2px solid #000000;
background: #FEDEFE;
}

Has the desired effect!

Thanks for all your help.

[Major_Payne]

Great news. Glad you got it solved and thank you for posting your solution.