How to add another div to featured images

[mpet29]

I can pretty easily target my featured image with (on my site, at least)

#featured-post-4 img

If I just wanted to do a color border or whatever, no problem. But what I'm trying to do is overlay a transparent PNG on it to make for a nice custom image border, and that means i need to target a separate div over the image, rather than the image itself. Does anyone know how that can be done?

[DTHkelly]

http://surefirewebservices.com/development/genesis-framework/how-to-add-a-structural-wrap-to-anything-on-the-genesis-framework

[mpet29]

Thanks! That's helpful. My only confusion is that according to this: http://my.studiopress.com/snippets/structural-wraps/

the wraps can be applied to these areas:

'header',
'nav',
'subnav',
'site-inner',
'footer-widgets',
'footer'

How would i make it attach only to the featured image and not all of the 'site-inner'?

[Sridhar Katakam]

Assuming that you are talking about the output generated by Genesis Featured Posts widget, see if this helps: http://sridharkatakam.com/customize-output-genesis-featured-posts-widget/

---

Genesis Tutorials | Follow me on Twitter

[mpet29]

Thanks Sridhar, but while that might work on my home page, I am also trying to achieve the same effect on the single post pages, which also have the featured images appearing. I just can't quite figure out how to add a wrapper div that sits right on top of the featured image.

[Sridhar Katakam]

Which child theme are you using?

Can you show us a screenshot of Genesis > Theme Settings > Content Archives?

---

Genesis Tutorials | Follow me on Twitter

[mpet29]

I'm using stock base Genesis. I made a child theme to make sure that my changes would survive updates, but I'm not using any third party theme.

Screenshot of archives: http://imgur.com/RiFeTvZ

link:

http://www.fangraphs.com/techgraphs
password: fangraphs

What I'm attempting to do is put an image overlaid on top of the baseball image that is the featured image of the first post. On the home page, it will be only the first post, but on single pages, they all show their featured image and should have the overlay.

thank you!

[Tony @ AlphaBlossom]

Hi,

I don't mean to confuse things with another option, but if the option by Sridhar doesn't work, you may be able to do this using css :before, added to your theme's style.css file (if I understand what you're trying to do):

article.entry > a.aligncenter:before {
    background: url("http://www.fangraphs.com/techgraphs/wp-content/uploads/2014/07/Dodger-Stadium-Sunset-1-230x155.jpg") repeat scroll 0 0 rgba(0, 0, 0, 1);
    bottom: 0;
    content: " ";
    display: block;
    left: 0;
    opacity: 0.5;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
}

article.entry > a.aligncenter {
    position: relative;
}

That will overlay the "background" image over the baseball image. You can adjust the opacity setting, etc. You'll also have to add a z-index setting for your h4.widgettitle to bring it back to the front.

You might have to tweak the css classes to make sure you target the right images, but this should get you started.

If this solution works for you, don't forget to take a look at browser support to make sure it covers you:

http://css-tricks.com/browser-support-pseudo-elements/

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[mpet29]

tony!

You are a life saver. That worked perfect. Psuedo classes are exactly what I had been trying to go with -- I've used them several times elsewhere -- but the issue I was having was that I had been trying to focus on the picture with img, and you of course can't attach a ::before to image. I hadn't thought of targeting it in this way.

Thanks so much.

[Tony @ AlphaBlossom]

Awesome, glad I could help! I was afraid I might confuse things by jumping in, but glad you got it sorted out!

Have a great night...

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[mpet29]

Actually if you don't mind: do you know how I can make it do that for the featured posts on the single post pages too? Markup seems similar but clearly it's not..

[Sridhar Katakam]

//* Add new image size
// add_image_size( 'single-thumbnail', 680, 200, true );

//* Display featured image above Post title on single Posts
add_action ( 'genesis_entry_header', 'sk_show_featured_image_single', 9 );
function sk_show_featured_image_single() {

	if ( is_singular('post') && has_post_thumbnail() ) {
		echo '<div class="single-thumbnail">';
			// genesis_image( array( 'size' => 'single-thumbnail' ) );
			genesis_image();
		echo '<div class="single-thumbnail-overlay"></div></div>';
	}

}

---

Genesis Tutorials | Follow me on Twitter

[Tony @ AlphaBlossom]

Sure, there's no class on the so you can use this instead:

article.entry > header.entry-header > a:before

and then set

article.entry > header.entry-header > a

to "position: relative;"

You can also add .single before it you want to make sure this only targets single pages

.single article.entry > header.entry-header > a:before

That should do it for you, but if not let me know and I'll take another look.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[mpet29]

thanks so much. It's close, but not quite in the right spot. I outlined it in red here: http://www.fangraphs.com/techgraphs/baseball-post/

[Tony @ AlphaBlossom]

Got it...these changes should take care of it for you:

article.entry > header.entry-header > a {
    display: block;
    overflow: hidden;
    position: relative;
}

Let me know if it's still an issue.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[mpet29]

perfect!

I can't thank you (both!) enough for your help. Really so appreciated.

[Tony @ AlphaBlossom]

Awesome! Glad we could help!

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Author]

Posts