Tagged: , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 28, 2015 at 10:34 am #435895
    Apollo87

    Hey guys,

    The more I use Enfold, the more I realize how powerful and flexible it is. Even a beginner like me can produce a really nice looking and personalized site with just custom CSS.

    There is one new problem I have that I would really appreciate some help with.

    With the post slider element and blog elements, the title, metadata and excerpt only show underneath the image. I want to have this information displayed INSIDE the image, just like the masonry blog element.

    I recognize this might be beyond the scope of the support team, but maybe you guys could help me out as much as you can and point me in the right direction.

    Looking forward to your help. Thank you!

    • This topic was modified 9 years, 7 months ago by Apollo87.
    April 29, 2015 at 4:50 am #436468
    Rikard

    Hi Apollo87!

    Could you please provide us with a link to the site? There might be an easy way to do that with some custom CSS.

    Regards,
    Rikard

    April 30, 2015 at 3:30 am #437168
    Apollo87

    Hey Rikard, goodmorning from Japan!

    Here’s the page in question; its a mock re-design of my front page:

    http://www.thejetcoaster.com/home_mockup_B

    As you can see in the first “Featured Content” section if you scroll past the splash art, I’ve got a Masonry blog element displaying a single post. The effect I’m trying to achieve is just like this site: http://www.tofugu.com/ with their “Latest Article” section. The “latest article” image box is short and wide, crops the image top and bottom and displays the title (and tag) in big bold letters across the image.

    I was trying to do this with the Masonry element, but because I’m currently using it on my blog side bar at http://www.thejetcoaster.com/blog/ to display featured post types, I thought I should try to use a different element/shortcode. I THINK I can maybe target JUST that one masonry blog element on the home page, but I’m not sure how. That’s why I’m trying to use the post slider element.

    If you scroll down a little further, you can see I’m using post slider elements for the other content sections like “podcast”, “latest posts” and “from the community”. I really want to be able to use the post slider element for these sections, but to have the titles, metadata and excerpt (or at LEAST the title) displayed INSIDE the image box, just like in the masonry blog element.

    Thank you so very much for your wonderful assistance, Rikard. I’m really hopeful that you can show me how to do it with some css magic.

    May 1, 2015 at 11:48 am #437971
    Ismael

    Hey!

    Try this in the Quick CSS field to move the slider content in front of the image:

    .slide-entry .slide-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3D(-50%, -50%, 0);
  background: rgba(0,0,0,.5);
  padding: 20px;
}

    Cheers!
    Ismael

    May 2, 2015 at 6:06 am #438335
    Apollo87

    Thank you so much!!! It works!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Post Title and Excerpt Inside Blog Element (like Masonry)’ is closed to new replies.