Hover effect on boxes

[davecfm 10]

Howdy, Looking to have hover effect (white maybe or just a lighter version of image) for my boxes on my home page. My boxes have 64 x 64 px image that I'd like to isolate using firebug, add the correct css, and copy and paste into platforms custom css. http://www.davec.fm/ Any help is much appreciated. Dave

[catrina 103]

This is achievable by changing the opacity of the image on hover, which is created by this code:

opacity:0.4;filter:alpha(opacity=40)

This is the CSS you need to add to Custom CSS to create the lighten-on-hover effect:

div.fboxgraphic:hover {opacity:0.4;filter:alpha(opacity=40);}

[davecfm 10]

Wow that works great! I'm learning more and more thanks to you. My biggest problem has been finding the "selector"(?) for individual elements, eg: div.fboxgraphic:hover. Is it a div. or a # or just a .element, etc.. Now that I've added that to custom css, I go back to firebug and try to find the changes. Sometimes I see it... this time I don't. Thanks again! Now on to padding! Dave

[catrina 103]

Since the image is placed inside a div layer, it would be a div. The image doesn't have a class selector I could assign the opacity to, so I needed to use the div layer itself. Does that make sense? How do you want the padding fixed?

[davecfm 10]

It's slowly making more sense. I just need to learn the terminology/ definitions. Especially while reading/watching tutorials and/or cruising the forum. I'd like to lessen the padding between my header image and the dividing line* where the primary nav bar would go. I'd also like to make the dividing line a double line. Your help is great! *again with the terminology : )

[catrina 103]

Lessen the padding between header image and dividing line and making the line a double line:

margin-top: -10px; border-width: 3px; border-top-style: double; border-bottom: 0px;

Note: That dividing line is actually for the top border of the post content.

[davecfm 10]

Hi Catrina, Stumbling upon my weakness: ??#??div.????? {margin-top: -10px; border-width: 3px; border-top-style: double; border-bottom: 0px;} Am I on the right track? Thanks, Dave

[catrina 103]

I checked your website and the divider line that was there is gone. Did you add custom CSS to make it disappear? If so, can it be brought back again?

[davecfm 10]

Catrina, I removed the content within the pageline template settings and began adding the double lines to the bottom of my header image instead. Not much luck doing design in gimp. I'll add the content (divider) back to to the template. Thanks, Dave

[catrina 103]

Ah, I was going to say that you can leave the content removed since it's not even being used, but it's already back. Do you mind taking it out again? Sorry. Here's code for adding the border below the header/branding:

#branding div.branding_wrap {margin-top: -10px; border-width: 3px; border-bottom-style: double;}
	div.post {display: none;}

[davecfm 10]

Catrina, Thank you! That looks much better now. Dave

[bikithalee 0]

A simple hover example...

 

 

 .imgBox
{
width: 441px;
height: 248px;
background: url(http://www.corelangs.com/css/box/img/water.jpg) no-repeat;
}
.imgBox:hover
{
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
} 

 

Full Source .... http://www.corelangs.com/css/box/hover.html

 

Bikitha