Support » Theme: GeneratePress » Transition Effect on hover

Viewing 9 replies - 1 through 9 (of 9 total)
  • Hi there,

    try this CSS:

    .blog .inside-article {
        box-shadow: 0px 7px 15px -5px rgba(100,100,100,0);
        transition: all 0.3s ease-in;
    }
    .blog .inside-article:hover {
        box-shadow: 0px 7px 15px -5px rgba(100,100,100,0.75);
    }

    I have added above code under Appearance – Customize – Additional CSS

    No change.

    I can see the hover effect when i view your site – you may need to clear your browser cache to see the effect.

    Sir

    It’s working actually, but this effect is not even noticeable

    I want to move the post box a little upside on hover and back to the initial position off hover.

    Try this to add movement:

    .blog .inside-article {
        box-shadow: 0px 5px 5px -2px rgba(0,0,0,0);
        transition: all 0.2s ease-in;
    }
    .blog .inside-article:hover {
        box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.75);
        transform: translateY(-7px);
    }

    Thank you so much, David sir
    Really appreciate that

    May I know your Twitter handle?

    If you want the code to work in other places, like categories, try this instead

    body:not(.single-post):not(.page) .inside-article{box-shadow:0 5px 5px -2px rgba(0,0,0,0);transition:all .2s ease-in}
    body:not(.single-post):not(.page) .inside-article:hover{box-shadow:0 5px 5px -2px rgba(0,0,0,0.75);transform:translateY(-7px)}

    Hey

    Your services are like Icing on the Cake

    Thank you so much.

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.