• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Text Overlay On Images In Widget Area

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Text Overlay On Images In Widget Area

This topic is: not resolved

Tagged: hover, image, overlay, text

  • This topic has 4 replies, 2 voices, and was last updated 8 years, 10 months ago by Porter.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 25, 2015 at 12:53 am #138569
    Porter
    Participant

    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

    January 25, 2015 at 2:18 pm #138604
    Porter
    Participant

    bump();


    Buy me a beer? | Try DigitalOcean VPS Hosting

    January 25, 2015 at 2:46 pm #138607
    DTHkelly
    Member

    Some reference:
    http://www.carriedils.com/text-overlay-image/
    http://wpsites.net/web-design/add-text-button-over-full-width-image/
    http://sridharkatakam.com/overlaying-text-background-image-minimum-pro-using-genesis-extender/
    http://sridharkatakam.com/how-to-show-featured-images-captions-on-hover-in-minimum-pros-portfolio-page/

    January 26, 2015 at 8:58 pm #138724
    Porter
    Participant

    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

    January 27, 2015 at 4:49 pm #138800
    Porter
    Participant

    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
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble