CSS transition/height issue with first page load but fixes itsefl after refresh

[djr413]

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;
}

[uxfed]

A codepen would help so we can see the issue.

[Author]

Posts