Lighten Hover Background and Scroll Text Up to Bottom Only

  • Hey there, we are wanting to do 2 things on hover. Can you please advise?

    When hovering we wanted:

    1. Have the text/title scroll up to just the bottom 1/4 of the window. Maybe even smaller than that. The point is for the text to be at the bottom of the picture and NOT the center.
    2. Also how can we adjust the hover background to not be so dark of an overlay over the picture?

    Thanks so much!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author PWR Plugins

    (@rexdot)

    Hi there, sorry for the delay.

    This will require some CSS customization. The following CSS will fix these issues for you. 

    .page-id-334 .elpt-portfolio-content .portfolio-item-infos {
    bottom: 20px !important;
    top: auto !important;
}

.page-id-334 .elpt-portfolio-content .portfolio-item-infos-wrapper {
	background: rgba(0, 0, 0, 0.5) !important;
}

    You can add it to Appearance > Customize > Additional CSS.

    PS: It will overwrite the settings from the plugin and it will work only in this specific page.

    Thread Starter MikeMobley2002

    (@mikemobley2002)

    Ok great almost there. That moved the text down but as you can see on the page, the background that hovers up behind the text is still taking half of the picture. How can we make it where the background hover effect only stays behind the text near the bottom of the pictures?

    Thread Starter MikeMobley2002

    (@mikemobley2002)

    Just pinging you @rexdot

    Thread Starter MikeMobley2002

    (@mikemobley2002)

    Hello wanted to followup please .Thank you.

    Plugin Author PWR Plugins

    (@rexdot)

    Hello @mikemobley2002 , sorry for the delay.

    Instead of working on a custom CSS snippet, we released a new version today (2.3.4) where we added a 2 new hover styles today (Content Visible 1 and 2). They are available in the Widget options > Hover Setings > Hover Style and we added it based on your suggestion.

    Could you pelase test and check if it works for you?

    PS: Please remove the previous CSS snippet.

    Thread Starter MikeMobley2002

    (@mikemobley2002)

    Hey guys got it fixed thank you. So using content visible 1. Is there a way to center the text vertically or lower the hover background even more to make the text appear more centered? You can go to https://flagscaping.com/projects/ to see what I mean.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Lighten Hover Background and Scroll Text Up to Bottom Only’ is closed to new replies.