hover on featured slider of sight theme

  • Unknown's avatar
    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: (visible only to logged in users)

  • staff-loquaciousloon · 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! :)

  • Unknown's avatar
    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

  • Unknown's avatar
    usinarevista · Member ·

    Sorry, for “on CSS” I meant the slider

  • Unknown's avatar
    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

  • staff-loquaciousloon · 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;
}
  • Unknown's avatar
    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!

  • Unknown's avatar
    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! :)

  • staff-loquaciousloon · 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.