@import url('https://fonts.googleapis.com/css? family=poppins:100,200,300,400,500,600,700,800,900');

#cards
{
  background-clip: border-box;
  /*border: 0px solid black;*/
  border-radius: 0rem;
}

.cards
{
position: relative;
width: 630px;
height: 80px;
background: #38017f;
transition: 0.5s;
}
.cards:hover
{
height: 150px;
}
.cards .liness
{ 
 position: absolute;
 inset: 0;
 background: #570231;
 overflow: hidden;  
}

.cards .liness::before
{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 200px;
    background: linear-gradient(transparent,#f72a01,#f9f100,#f70199,transparent);
    animation: animate 3s linear infinite;
   
}
@keyframes animate
 {
  0%  
{
transform: translate(-50%,-50%) rotate(0deg);
}
 100%
{
    transform: translate(-50%,-50%) rotate(360deg);
    }
}

.cards .liness::after
{
content: '';
position: absolute;
inset: 6px;
background: #ffffff;
}


.cards .imjBxs
{
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    /*background: #000;*/
    transition: 0.5s;
    z-index: 10;
    overflow: hidden;
   
}
.cards:hover .imjBxs
{
    width: 100px;
    height: 100px;
}


.cards .imjBxs::before
{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 150px;
    transform: translate(-50%,-50%);
    background: linear-gradient(transparent,#8a022d,#ff0051,#790228,transparent);
    animation: animate2 2s linear infinite;
}
  @keyframes animate2
  {
    0%
    {
        transform: translate(-50%,-50%) rotate(360deg);
    }
    100%
    {
        transform: translate(-50%,-50%) rotate(0deg);
    }
  }
  .cards .imjBxs::after
  {
    content: '';
position: absolute;
inset: 5px;
background: #ffffff;
  }
  .cards .imjBxs img
  {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    width: calc(100% - 20px);
    height: calc(100% - 20%);
   /*filter: grayscale(1);*/
  }

.cards .contents
{
position: absolute;
width: 664px;
height: 100%;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.cards .contents .details
{
  padding: 0px;
  text-align: center;
  width: 633px;
  transition: 0.5s;
  transform: translateY(100px);
}
.cards:hover .contents .details
{
  
  align-items: center;
  width: 95%;
  height: 330;
  transition: 0.5s;
  transform: translateY(-12px);
}