Hompage Grid Post Titles Visibility

  • Unknown's avatar
    kiamariehunt · Member ·

    I’m working on the grid section of the front page of my site here:

    https://aspiretoamble.com/

    When you hover over the blog posts in the grid, the background image gets darker and the titles appear. I added some CSS in the past to have the images darken like that, so the titles showcased better.

    I would like for that hover appearance to be static, showing at all times for all posts (with the darkened image and the text showing), and I need a CSS code for that. I would also like the text itself to further brighten when it’s hovered over, and would like another CSS code for that.

    *If you view my blog on a tablet sized screen or smaller you will see exactly how I would like the grid to look: titles are slightly visible constantly, and brighten/whiten/become more visible when you hover over them. This is what I would like the grid to look like on all screens*

    What CSS do I need to use to make that happen?

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, add the following to your custom CSS and it will mimic the behavior on smaller screens. 

    #front-page-blog .three > div > a {
	opacity: 0.5
}
  • Unknown's avatar
    kiamariehunt · Member ·

    Thank you so much this was simple and works perfectly, just what I was after!

    Just a couple more questions:
    1. is there a way to remove the dates from those titles of the articles on the grid?
    2. is there a way I can have something like this for parent/child grid pages aswell? like this one: https://aspiretoamble.com/art-gallery-2/

    Thanks again

  • Unknown's avatar
    thesacredpath · Member ·

    1. is there a way to remove the dates from those titles of the articles on the grid?

    Hi, the following removed the dates from the posts on your main page. 

    #front-page-blog .entry-meta {
	display: none;
}

    2. is there a way I can have something like this for parent/child grid pages aswell?

    Creative Portfolio has a child page grid template, so yes you can have a similar look for pages as well. If you haven’t seen it, there is a support page for Creative Portfolio that explains about setting it all up. Step 4 on that page talks about the page templates available in the theme and you can click on the Child Page Grid link to find out more on using that. Here is a link to the demo child page. It does not have any featured images on the child pages, but you can see that the layout is virtually identical to your main page.

  • Unknown's avatar
    kiamariehunt · Member ·

    Thanks so much for your answer to my dates query

    With regards to the second part I don’t think I explained myself very well: I already have some parent/child grid pages that look very similar to my homepage layout (for example this one: https://aspiretoamble.com/art-gallery-2/ ) but I would like some code similar to the one you gave me for the homepage, so that on those pages too the titles show up without hovering over them

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, thanks for the clarification and the link. The child page grid uses a different CSS selector, so this would be what you would need. 

    #child-grid .three > div > a {
	opacity: .5
}
  • The topic ‘Hompage Grid Post Titles Visibility’ is closed to new replies.