Okay
  Public Ticket #2974948
Name Show on landing
Closed

Comments

  • Gina started the conversation
    February 6, 2022 at 10:40pm

    Hi,


    How can I have the name show upon landing, then have the arrow show up on hover?

    Thanks!

    Gina

  • Gina replied
    February 6, 2022 at 10:40pm

    PS. I don't need the dark overlay on the landing page. I will add a gradient to the photo

  • Gina replied
    February 6, 2022 at 10:45pm

    PSS. I just realized I had it set to BIO Modal(which pops open an interim page) I want the image square with NO dark overlay. I set it to ALT for now.

  •  8,839
    Tahir replied
    February 7, 2022 at 7:19am

    Hey Again,

    Please setup a test page and let us know what CSS changes you need in it. 

    Thanks 

    ThemeNectar Support Team 

  • Gina replied
    February 11, 2022 at 1:26am

    go ahead and use the following as a test page

    https://7zh.aea.myftpupload.com/our-team/

  • Gina replied
    February 11, 2022 at 1:30am

    Sorry I forgot to include what I wanted changed.

    Square photo instead 

    upon landing show name and title

    upon hover, show arrow and gradient change and name and title

  •  8,839
    Tahir replied
    February 11, 2022 at 7:02am

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    /*  make image square  */
.team-member-image {
    padding-top: 100% !important;
}
.team-member[data-style=meta_overlaid_alt] .team-meta {
    opacity: 1 !important;
    transform: translateY(0px) !important;
    -webkit-transform: translateY(0px) !important;
}

    Thanks

    ThemeNectar Support Team 

  • Gina replied
    February 11, 2022 at 9:55pm

    Looks like it is working but it zoomed in too much. Can you adjust that?

    Thanks!

    Gina

  •  8,839
    Tahir replied
    February 12, 2022 at 7:18am

    Hey Again,

    You will have to crop the image to a square to make it zoom less or reduce the 100% padding in the CSS. 

    Thanks 

    ThemeNectar Support Team 

  • Gina replied
    February 12, 2022 at 11:49pm

    It is already cropped to a square.

  • Gina replied
    February 12, 2022 at 11:54pm

    PS. I tried to adjust the padding but it didn't do anything either. 

    .team-member-image {    padding-top: 80% !important;
}


  •  1,877
    Judith replied
    February 14, 2022 at 7:51am

    Hi Gina,

    Your page seems to be on maintenance, please allow us to access.

    Thanks.

  •   Gina replied privately
  •   Gina replied privately
  •  1,877
    Judith replied
    February 18, 2022 at 7:39am

    Hi Gina,

    Please try this css:

    .team-member[data-style=meta_overlaid] .team-member-image, .team-member[data-style=meta_overlaid_alt] .team-member-image {
        background-position: center top;
    }

    Thanks.

  • Gina replied
    February 18, 2022 at 10:32pm

    It is better but still not square. The heads aren't cropped so I will show this to them.

  •  1,877
    Judith replied
    February 19, 2022 at 8:33am

    Hi Gina,

    Please check it out now.

    Thanks.

  • Gina replied
    February 22, 2022 at 12:20am

    I don't see any change, sorry

  •  1,877
    Judith replied
    February 22, 2022 at 7:37am

    Hi Gina,

    Please try this css:

    .team-member[data-style=meta_overlaid] .team-member-image, .team-member[data-style=meta_overlaid_alt] .team-member-image {
        width: 316px;
        -webkit-background-size: contain;
        background-repeat: no-repeat !important;
    }

    Thanks.

  • Gina replied
    February 24, 2022 at 12:01am

    That creates a black border of 16 pixels on the edges and the hover state is too big. I didn't leave it on as it looked terrible.

  •  1,877
    Judith replied
    February 24, 2022 at 10:40am

    Hi Gina,

    Please check it out.

    Thanks.