Featured Posts CSS Customization

• 

  vlogazul · Member · Jan 14, 2016 at 8:32 am

  • Copy link
  • Add topic to favorites

  I am using the Mixfolio theme and I would like to know if there’s a snippet for the following.

  On the main page you will see the featured post article images, if you try to click on any of those images the title of that post is going to appear as you click. Is there a snippet to make that post link text be below the image so that it can be visible? Thanks

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

• 

  ogurel · Member · Jan 14, 2016 at 7:29 pm

  • Copy link

  Hi,

  We can use custom CSS in order to move the text below the image for both desktop and mobile versions with the following code:

  @media screen and (min-width:768px)
  {
      .hide
      {
          top: 92%;
      }
  }
  .hide
  {
      display: block;
      opacity: 1 !important;
      background: rgba(200,200,200, 0.0) !important;
      top: 97%;
  }
  .hide .entry-title
  {
      border-bottom: none;
      color: #000;
  }
  
  .grid .wrap
  {
      margin-bottom: 60px;
  }

  You can lower the margin-bottom to 40px if your text is not very long.

  I hope this is the modification you needed and please note that this can be further improved if you need anything else.

  Take care,

  Onur

• 

  vlogazul · Member · Jan 17, 2016 at 9:20 am

  • Copy link

  It works perfectly, thank you very much. If I need a change I will let you know, thanks once again Onur.

• 

  ogurel · Member · Jan 17, 2016 at 2:43 pm

  • Copy link

  It’s my pleasure, enjoy!

• 

  vlogazul · Member · Jan 18, 2016 at 2:59 am

  • Copy link

  One quick request. Prior to adding the snippet you gave me, when clicking or pointing on the image there was a hovering thing that appeared, with the change it doesn’t no more. Is there a snippet to get that hovering feature back on the image but everything else to stay the same? Thanks

• 

  ogurel · Member · Jan 23, 2016 at 10:40 am

  • Copy link

  Hi,

  The easiest way to add a hovering overlay would be with this code:

  .entry-link a:hover
  {
      background-color: rgba(0, 0, 0, 0.2); /* 0,0,0 are the red green and blue values, the last value is the opacity you'd like to give */
      text-decoration: none;
  }

  Please feel free to reply if you need anything else.