Oxford Theme: move featured post excerpt to hover over featured image.

• 

  thecaliforniacrow · Member · Apr 22, 2015 at 5:30 am

  • Copy link
  • Add topic to favorites

  I am running the Oxford theme. I would like the excerpt text for the featured post on the homepage to lay over the featured image. Right now, the excerpt shows up below the featured image. Thank you!

  The blog I need help with is: (visible only to logged in users)

• 

  staff-jeanpierreac · Staff · Apr 22, 2015 at 7:45 am

  • Copy link

  Hi
  I see… In this case this is not an easy question. As the picture is in one area (.homepage-featured .source-recent_post) and the text in another area (main id=#main) mixed up with the other posts, I do not like to much a solution with a combination of position:relative and position:absolute in divs.

  My option. Not a top class hack, but easy and clear. I would suggest you to push #main upwards by adding a negative margin. The problem with that is that you can exactly set how much to push #main to get what you want in this case, but you could have problems in the future depending on the length of the excerpt. I mean, a -200px margin it perfect for a two lines excerpt, not so bad for a one line excerpt, but not so cute for a three lines’. In any case, you would find a similar issue with the “position:absolute” solution.

  #main {margin-top:-200px}

  If you do that, you should need to change letters color to white (Otherwise you will read nothing with dark pictures)… But what if you have a light picture? To solve that I would put a background with a medium opacity (you can test several values):

  .homepage-featured .has-selected-image {background-color:white; opacity:0.5;}

  I hope this helps you. Make me know in other case… And don’t stop enjoy blogging!

• 

  nizamilputra · Member · Apr 22, 2015 at 7:49 am

  • Copy link

  Hi there,

  Please try to add this css;

  .homepage-featured{
    margin-top: -225px;
  }
  .homepage-featured .post{
    background: rgba(255, 255, 255, 0.75);
    padding: 10px;
    box-sizing: border-box;
  }
  #main .homepage-featured article.post time{
    background: none;
  }

  This is the preview https://cloudup.com/cS6H_Uwoxrv
  Let me know if you another helps.

• 

  thecaliforniacrow · Member · Apr 22, 2015 at 2:24 pm

  • Copy link

  Nizamilputra–that worked great! Thank you! Is there a way to make the text white or a different color?

• 

  thecaliforniacrow · Member · Apr 22, 2015 at 2:28 pm

  • Copy link

  Also, I just noticed that my tagline is not showing anymore.

• 

  nizamilputra · Member · Apr 23, 2015 at 12:50 am

  • Copy link

  Ah, sorry about that. Let’s add this css;

  .site-description{
    margin-bottom: 180px;
  }