Adding Post titles as overlay text over featured images (Minimum 2.0)

Community Forums Forums Design Tips and Tricks Adding Post titles as overlay text over featured images (Minimum 2.0)

This topic is: not resolved

Tagged: 

This topic contains 5 replies, has 3 voices, and was last updated by  braddalton 1 year, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #31528

    BengtSather
    Participant
    Post count: 5

    Hi

    First: I know some CSS. But I can not code in PHP – sorry …

    This is what I am trying to achieve: I want to position the post titles over the featured images on my blog page.

    I work on a local installation. Therefore, I have no live site to show you. But here’s an example of what my goal is: http://wplift.com/

    I’ve tried to create my own code based on this guide: How to lay text over an image

    My code ended up looking like this:

    function minimum_featured_image() {

    if ( is_home() ) {
    echo ‘<div id=”featured-image”><img src=”‘. get_stylesheet_directory_uri() . ‘/images/sample.jpg” class=”underlay” />’; // add underlay class
    add_action( ‘genesis_post_title’, ‘minimum_do_post_title’ ‘before’ => ‘<div class=”overlay”>’, ); //replace widget ID if needed
    echo ‘</div></div>’;
    }

    This code did not work, of course (as I said – I can’t code).

    From what I can understand, the snippet should tell Genesis to get the image first and then the title. And if I’m not mistaken I will decide the final positioning of each of the elements in CSS, right?

    Are there existing snippets I can use? Or could someone be so kind and help me in the right direction? (I can take care of the CSS part myself.)

    Thanks in advance :)

    Bengt

    P.S. Please excuse my English – I’m Norwegian…

    #31581

    braddalton
    Participant
    Post count: 10257

    Did you ask Olly at wplift? He’ll probably tell you how he did it.

    Otherwise this forum is excellent for CSS tricks.

    Here’s another solution. http://jsfiddle.net/EgLKV/3/


    #31679

    BengtSather
    Participant
    Post count: 5

    Hi Brad

    Thanks for your helpful reply :).

    Yes, the owner of wplift actually did a post explaining how to create overlay text effects. But it demonstrated how to do it with other themes than Genesis. My problem is that I don’t know how to use actions and functions to connect the dots…

    But I’m on my way, thanks to the resources you mention and by studying the Decor child theme.

    #31686

    braddalton
    Participant
    Post count: 10257

    Just change them to the genesis hooks using the visual hook guide if needed.


    #41572

    Brenners
    Participant
    Post count: 12

    BengtSather,

    Did you ever get this figured out? I am using the Minimum theme and would like to make the post title and post info overlay the featured image as well. Google’s not helping me out much on this one.

     

    #41779

    braddalton
    Participant
    Post count: 10257
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.