[Support request] How to get The shadow effect and rounded corners with this site?

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support How to get The shadow effect and rounded corners with this site?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #34247
    Cristiano
    Participant

    Hi,

    I’m trying to get The shadow effect and rounded corners with this site below:

    I sent inspiration site in the sensitive area, of this topic (https://generatepress.com/forums/topic/how-to-get-the-shadow-effect-and-rounded-corners-with-this-site/)

    To try to get to the current post layout, I’m using, the “Base” from the Cards style dropdown.

    I was able to format the cards (meta category position and style) using this information from this topic, Through your support

    https://wpshowposts.com/support/topic/formatting-of-cards/

    I’m using:

    Latest version of the theme: 3.0.4
    The Premium GP Plugin • Version: 2.0.3
    The WP Show Posts Pro – Developer – 1.2.0

    I sent inspiration site in the sensitive area, for you to review

    thank you very much for your attention

    #34253
    elvin
    Moderator

    Hi there,

    Try adding this CSS:

    .wp-show-posts-single:hover {
        -webkit-transform: translate(3px,-3px);
        transform: translate(3px,-3px);
    }
    .wp-show-posts-single {
        position: relative;
        overflow: hidden;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        overflow: visible;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s,-webkit-transform .3s;
        min-height: 0;
        z-index: 0;
        border-radius: 0;
    }
    
    .wp-show-posts-single:hover:after {
        -webkit-transform: translate(-10px,10px);
        transform: translate(-10px,10px);
    }
    .wp-show-posts-single:after {
        background-size: 6px 6px;
        background-position-y: bottom;
        background-image: -webkit-linear-gradient(
    315deg,rgba(13,13,13,.5) 15.11%,rgba(255,255,255,0) 15.11%,rgba(255,255,255,0) 50%,rgba(13,13,13,.5) 50%,rgba(13,13,13,.5) 64.11%,rgba(255,255,255,0) 64.11%,rgba(255,255,255,0) 100%);
        background-image: linear-gradient(
    135deg,rgba(13,13,13,.5) 15.11%,rgba(255,255,255,0) 15.11%,rgba(255,255,255,0) 50%,rgba(13,13,13,.5) 50%,rgba(13,13,13,.5) 64.11%,rgba(255,255,255,0) 64.11%,rgba(255,255,255,0) 100%);
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s,-webkit-transform .3s;
        content: '';
        position: absolute;
        width: calc(100% - 2em);
        height: 100%;
        z-index: -2;
        top: 0;
        right: 0;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.