Changing hover style on featured images

  • Author
    Posts
  • #141435

    I really like the Lens theme and I’m using it on my website to showcase my artworks. I’ve been tinkering with CSS (premium plan) to adjust things here and there.

    A question – is it possible to make the hover style (when I mouse over the featured image squares) for Phone/mobile to be the same for Desktop and Tablet?
    The hover style for Phone/mobile has the titles move up slightly with a gradient black overlay behind. I’d like to replicate this style on both the desktop and tablet mode as well.

    Appreciate your help, thanks!

    The blog I need help with is riclimstudio.com.

    #141528

    binarymoon
    Theme Author

    Hi Ric – thanks for the message. I love your artwork! Once upon a time (twenty years ago when I was a student) I had dreams of working at ILM. I was obsessed with Star Wars (and still am to a lesser degree)

    Anyway to answer your question – it looks like you’ve got most of the way there. The only bit missing is the gradient which you can add with:

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.65) 100%);

    added to article.post-archive section.meta

    Does that do everything you want?

    #141572

    Hi, thanks for liking my work- I’ll post more and newer ones when I can :)

    The code you gave kind of works, but the gradient only happens behind the titles, and not the whole bottom part of the featured image squares. Is it possible to replicate exactly the style that appears when in Phone/mobile mode?

    I really love that look – as in the titles align closely to the bottom (few pixels away), animates up slightly when mouse hovers, and the words have a nice soft gradient that stretches to the bottom of each square.

    Thanks!

    #141619

    Hi,

    I think I’ve managed to trick out the hover style, by adding this CSS:
    section.meta {
    padding: 5px 0 15px 20px !important;
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.65) 100%);
    }

    Tinkering with CSS is so cool.

    #141648

    binarymoon
    Theme Author

    Looks like you got it almost the same.

    And agreed – CSS is fun too! :)

    #141707

    Hi,

    I’ve have two additional questions:

    1) I’ve noticed that when I go into my pages, the featured images for the post at the bottom of page seems limited to eight featured images from my post. How can I increase that? (On the homepage, it shows all my post).

    2) For the navigation menu, a thin colored bar appears under the selected page, which looks cool to show which page is currently selected. However, can I tweak the color or the opacity of that colored bar?

    Thanks again!

    #141729

    binarymoon
    Theme Author

    For question 1) – there’s no way to change the number of posts, unless you can upload plugins. Which means a business account would be needed.

    2) Yes – the colour can be edited with css:

    .masthead .menu li.current-menu-item a {
    border-bottom-color: rgba(0, 255, 0, 0.5);
    }
    #141748

    Nice, the CSS for tweaking the colors worked!

    But it seems funny that I could display all featured images (from post) in my Homepage, but not on my pages.

    Anyway, thanks again!

    #141836

    binarymoon
    Theme Author

    Glad that worked! :)

    The 8 posts at the bottom of the page is a design decision I made when designing the theme. The posts are meant to be a next step for users so that they can look at something else after reading your content.

    I hadn’t considered that anyone would want to display lots of posts.

    I’ll definitely keep it in mind for a change for a future theme update.

    Thanks – Ben

The topic ‘Changing hover style on featured images’ is closed to new replies.