Skip to main content

Forums

This topic contains 1 reply, has 2 voices, and was last updated by  uxfed 1 week, 5 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #294250

    djr413
    Participant

    Hi,
    I am new to this so hoping someone can provide guidance. I have some CSS tiles which I use as links. When I load my page, there is an issue where all of the tiles are not displayed properly and the transition covers the entire height (all of the tiles, as opposed to just the tile I hover over)

    When I refresh the page, the issue seems to correct itself. I think the issue could be related to other existing CSS which is on the page and it’s causing some conflict when the page is first loaded. I do not have this issue with the same code on a different site which has no other CSS>

    I have the CSS below

    .PAITApp-Tile{
    background-color:#FFFFFF;
    padding: 0;
    margin-bottom: 20px;
    cursor:pointer;
    width: 150px;
    display: block;
    height: 15vh;
    }
    
    .PAITApp-Tile:hover .PAITApp-TileTitle{
        background-color:#FFFFFF;
        cursor:pointer;
        padding: 0px;
        height: 100%;
        text-align:center;
        line-height: 150px;
        border-top: 3px solid #00477B;
        transition: height .2s;
    }   
    
    .PAITApp-TileTitle{
        text-align:center;
        position: absolute;
        overflow: hidden;
        word-wrap: break-word;
        bottom: 0;
        left: 0;
        top: 2;
        right: 0;
        background-color:#FFFFFF;
        opacity: 0.9;
        width: 150px;
        height: 25%;
        padding: 0;
        font-size:14px;
        font-family:Open Sans;
    }
    
    .PAITApp-Tile img{
        width: 150px;
        height: auto;
    }
    
    #294253

    uxfed
    Participant

    A codepen would help so we can see the issue.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star