Styling featured hover state

[Dandelion222]

Is it possible to style the look of the screen that comes up when I roll over my featured boxes on the homepage? I’d like to adjust the color and opacity, if that is possible.

[Bill Robbins]

You could use this in your Custom CSS to alter the color and opacity of the background that slides up there:

.boxcaption {
	background: rgba(0, 0, 0, 0.8);
}

and this for the text color:

.boxgrid h4 {
	color: #fff;
}

Hope that helps out,
Bill

[Dandelion222]

Thank you! Can I also use the boxgrid h4 to change the size of the text there without effecting other text in other areas?

[Dandelion222]

Something interesting happened when I added the .boxgrid h4 definition and changed the color to a blue. It only effected the first featured box. And it dropped the drop shadow. (Not that i’m sure I need it.) All the rest of the boxes have the same text style as before.

[Bill Robbins]

I believe there are two spots for the color there. Add this as well:

.boxcaption a, 
.boxcaption a:visited {
	color: #fff;
}

and see if that doesn’t help set those colors.

[Dandelion222]

Yes! It is getting there! Now I need to lose the shadow, make the text bigger, and I think center it.

[Bill Robbins]

I try to set my themes up so that most changes can be made by overriding something in the style.css file. The way that works is you locate the section in the stylesheet that goes with the spot you want to change. You copy that section out and place it in the custom CSS box where you can edit and/or override what is there.

The way CSS works, the last style loaded will be the one that gets used on the site. The Custom CSS is the last styling that makes the cut so what you place there will take priority unless there is something more specific out there (like with an !important declaration).

If you’ve ever edited a stylesheet, this works the same. The only difference is you can’t remove something just by deleting it out. You’ll have to zero that value out or set it back to the default.

Here’s the section that goes with the featured row. Try adding it to the Custom CSS and see what you can cook up by editing it:

.boxgrid { 
	width: 167px; 
	height: 167px; 
	float: left; 
	overflow: hidden; 
	position: relative; 
	display: inline;
	margin: 0 0 21px 21px;
	z-index: 1;
}

.boxgrid img { 
	position: absolute; 
	top: 0; 
	left: 0; 
	border: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.boxgrid p { 
	margin-bottom: 10px; 
	color: #fff;   
}

.boxgrid h4 {
	color: #fff;
	background-color: transparent;
}
		
.boxcaption { 
	float: left;
	text-align: left;
	position: absolute;
	background: #000; 
	height: 167px;
	padding: 15px; 
	width: 85%;
	background: rgba(0, 0, 0, 0.8); 
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.captionfull .boxcaption {
	top: 167px;
	left: 0;			
}

.boxcaption a, 
.boxcaption a:visited {
	color: #fff;
	padding-bottom: 167px;
	padding-right: 167px;
	text-shadow: #000 2px 2px 3px;
}

.boxcaption a:hover {
	color: #ccc;
}

Enjoy your weekend,
Bill

[Dandelion222]

Wow. Thanks for sharing the whole toolbox Bill. And for the tip about checking the style sheet. I have written CSS from scratch, but don’t have much occasion to in recent years. I’ll have some fun with this. Thank you!

Have a great weekend!

[Author]

Posts