Text Overlay On Images In Widget Area

[Porter]

I've defined various widgetized areas on my home page, and am currently using a text widget to display 5 images (one 2/3rds, four 1/3rd). As I said, each of these areas is it's own widget area in my dashboard, currently just using a text widget. I would like to give each of those images a slightly transparent black bar across the bottom, and display some text that is hoverable (changes color on hover), and have the entire image / text link to the related material of my choice (custom url).

I have the widgetized areas set up, but beyond that, I'm pretty stuck on how to go about the text overlays / hover / linking. I feel like the cleanest approach would be to use a shortcode where I supply the text as a parameter, but I really don't know. Keep in mind that whatever I do, I need to be able to do it uniquely for each image, in each widget area. I'd also prefer not to use a plugin for this. My current backup plan is to just just pre-bake the featured images with the text overlay, and have a hover effect / link on the entire image, but I'd prefer the actual text have a hover effect, and to not have to use an image editor for each one of these image's text (they'll change weekly / monthly). Any suggestions on how to accomplish this?

Page - anightinburlington.com

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Porter]

bump();

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[DTHkelly]

Some reference:
http://www.carriedils.com/text-overlay-image/

Add Text & Button Over Full Width Image

Overlaying text on background image in Minimum Pro using Genesis Extender

How to show Featured images captions on hover in Minimum Pro’s Portfolio page

[Porter]

Thanks for those resources, I ended up using some of what I read there, with another source, and got the desired effect! I've got one last piece to finalize, but I think I should be able to nail it - love how it looks thus far though 🙂

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Porter]

So I've finalized my design, and I'm quite delighted with what I came up with. It looks great on desktop, and seems to work on mobile (aside from me needing to adjust the font sizes). Here's the code I used:

front-page-widget h2 {
	background-color: rgba(0,0,0,0.8);
	width: 100%;
	height: 28%;
	position: absolute;
	top: 73%;
	padding: 1% 2%;
	font-size: 34px;
	color: #ffe1b7;
	text-transform: uppercase;
	text-align: left;
}

.front-page-widget h3 {
	background-color: rgba(0,0,0,0.8);
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translate(-0%, -50%);
	font-size: 28px;
	color: #ffe1b7;
	text-transform: uppercase;
	text-align: center;
}

I simply manually add the text wtihin the "text" widget, wrapped in an h2 or h3 (depending on the widget position), and the transparent background is added to the text, which is on top of the image. The only issue I have, is that the math doesn't align perfectly with getting the h2 area to be at the bottom. If I do "top: 80%", it seems to be at 79%, tested on multiple devices. I upped the "top" 1%, and this seems to fix it, though I really wish I knew why. Any idea on why that math doesn't add up perfectly, and does anyone see any reasons why my solution will cause issues?

anightinburlington.com

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Author]

Posts