hover on featured slider of sight theme

  • Author
    Posts
  • #2855391

    usinarevista
    Member

    Hi everyone. I’ve changed the featured slider image setting so it looks full width, with no text, with the following code:

    .featured-thumbnail {
    	max-width: 100%;
    	width: 100%;
    }

    But is it possible to make only the title appear on hover?

    I’ve tried this code:

    .featured-thumbnail:hover {
     width:70%;
    	max-width:70%;
    }

    But then when I mouse over the whole block appears as the image shrinks (entry.title + .entry-excerpt + .entry-categories)…

    Instead, I’d like to make it look as it shows on some mobile devices, only the title on a box with some transparency…

    If there’s no way to make the hover effect looks right on the featured slider, is it possible to improve the mouse-cursor “permanent link” to something nicer? Right now it’s just a small text that says “ligação permanente … title of the post”

    Thanks y’all for any help

    The blog I need help with is revistausina.com.

    #2855558

    chad1008
    Staff

    Hi there!

    The challenge with that approach is that it relies on the mouse being on the image for the content to appear. I’d recommend using the .featured-post element as your hover point, since it’s the container for everything that you’re trying to manipulate. Like this:

    .featured-post:hover .featured-thumbnail {
    	width: 70%;
    }

    Then, you can hide the other elements like this:

    /* Hide post content*/
    .featured-post-content .entry-categories,
    .featured-post-content .entry-meta,
    .featured-post-content .entry-summary {
    	visibility: hidden;
    }

    Give that a go and let me know how it looks! :)

    #2855559

    usinarevista
    Member

    Thanks a lot chad! That’s a good solution.

    I was wondering if there’s a way to make the title appear without reducing the picture/showing the text content area. The reason why I ask is because I’d love to post some photographies that don’t have any excerpt (or title). In this case it’d make more sense to keep full width.

    But I guess there’s no way to define individually the code for each post that appear on CSS, so ideally a solution would be to appear the title on hover when there’s one, and nothing when there’s none

    I really appreciate the help. If there’s no way around, I’ll stick to your first advice

    Thanks

    #2855560

    usinarevista
    Member

    Sorry, for “on CSS” I meant the slider

    #2855564

    usinarevista
    Member

    If you have access to the mobile CSS, it looks this way, but automatically, with no hover. The title appear on a boxshadow over the image

    #2855567

    chad1008
    Staff

    I actually had some CSS earlier that overlaid just the title, but you sounded like you wanted that slide in effect specifically, so I stuck with that.

    Give this a try – it should do what you’ve described:

    /* Hide post content*/
    .featured-post-content .entry-categories,
    .featured-post-content .entry-meta,
    .featured-post-content .entry-summary,
    .featured-post-content .entry-title {
    	visibility: hidden;
    }
    
    /*set full width*/
    .featured-thumbnail img {
    	width: 100%;
    }
    
    .featured-thumbnail {
    	max-width: 100%;
    	width: 100%;
    }
    
    /* position post content*/
    .featured-post-content {
        position: absolute;
        width: 30%;
        top: 0;
        right: 0;
    }
    
    /*make title visible on hover*/
    #featured-content .featured-post:hover .featured-post-content .entry-title {
        visibility: visible;
        background: rgba(0,0,0,.5);
        padding: .6em;
    }
    
    /*style the title for better readability*/
    .featured-post-content a,
    .featured-post-content a:hover {
    	color: #fff;
        text-shadow: 1px 1px 1px #333;
    }
    #2855568

    usinarevista
    Member

    Thanks a lot again. Now it’s perfect!

    Should I define a media screen size or it doesn’t matter?

    You’re awesome chad!

    #2855570

    usinarevista
    Member

    One last thing:

    When I hover over the thumbnails on my home page the pointer changes to a small hand followed by “ligação permanente” (permanent link) + title.

    Is it possible to remove the “ligação permanente + title” feature and keep only the changing hand?

    Thanks! :)

    #2855578

    chad1008
    Staff

    You’re welcome!

    You shouldn’t need a media query, no :)

    Is it possible to remove the “ligação permanente + title” feature and keep only the changing hand?

    That, unfortunately, is a little beyond what CSS can do (I did some googling to make sure, with no luck!)

The topic ‘hover on featured slider of sight theme’ is closed to new replies.