How to create expanding line animation from this base?-CodePudding

So I want to create this animation where basically this happens: When you hover on an icon, it gets bigger, increases in opacity, and some text appears. In addition to this, 2 lines of color extend in width from the center out to the sides, then they increase in height. The bottom color should expand downwards, while the top color should expand upwards. I created this test-base and was wondering how I would go about making this from here. I tried tweaking the height, width, and opacity but those also edit the icon, so I'm wondering if I'm taking the wrong approach or just doing it wrong. Any help and/or pointers are appreciated.

Current code:

* {
  margin: 0;
  padding: 0;
  font-family: "Consolas";
}

body {
  background: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.hoverCard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320px;
  height: 480px;
  border-radius: 30px;
  background: #191919;
  overflow: hidden;
}

.hoverCard::before {
  background: blue;
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  transition: 0.5s;
}

.hoverCard .mainImg {
  opacity: 0.25;
  height: 160px;
  width: 160px;
  transition: 0.5s;
  margin: 10;
  margin-top: 50%;
}

.hoverCard .mainText {
  opacity: 0;
  color: blue;
  margin-top: 0%;
  transition: 0.5s;
}

.hoverCard .subText {
  opacity: 0;
  color: blue;
  margin-top: 0%;
  transition: 0.5s;
}

.mainImg:hover {
  transform: scale(1.5);
  opacity: 1;
  margin-top: 30%;
}

.mainImg:hover~.mainText {
  margin-top: 20%;
  opacity: 1;
}

.mainImg:hover~.subText {
  margin-top: 25%;
  opacity: 1;
}

<html>

<head>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div >
    <img  src="../Media/Link-Logos/Discord.png">
    <p >Discord</p>
    <p >Ex0tic_Python#7571</p>
  </div>
</body>

</html>

CodePudding user response：

As the requirement is to have lines drawn and expanding when the image is hovered, and the image itself cannot have pseudo elements, this snippet adds a further element after the img, .lines.

This is positioned absolutely and sized relative to the overall card (parent) element.

It has before and after pseudo elements which draw lines and then expand vertically using a CSS animation.

As I was unclear what you wanted to happen about the line going downwards (if it keeps the same background color as the card then of course it can't be seen) so this snippet makes it pink.

Of course you will want to alter timings and perhaps dimensions to suit your specific requirements, this is just a simple example to demonstrate one possibility.

<html>

<head>
  <link rel="stylesheet" href="main.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: "Consolas";
    }
    
    body {
      background: #212121;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    
    .hoverCard {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 320px;
      height: 480px;
      border-radius: 30px;
      overflow: hidden;
    }
    
    .hoverCard .mainImg {
      opacity: 0.25;
      height: 160px;
      width: 160px;
      transition: 0.5s;
      margin: 10;
      margin-top: 50%;
    }
    
    .hoverCard .mainText {
      opacity: 0;
      color: blue;
      margin-top: 0%;
      transition: 0.5s;
    }
    
    .hoverCard .subText {
      opacity: 0;
      color: blue;
      margin-top: 0%;
      transition: 0.5s;
    }
    
    .mainImg:hover {
      transform: scale(1.5);
      opacity: 1;
      margin-top: 30%;
    }
    
    .mainImg:hover~.mainText {
      margin-top: 20%;
      opacity: 1;
    }
    
    .mainImg:hover~.subText {
      margin-top: 25%;
      opacity: 1;
    }
    
    .lines {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
      display: flex;
      justify-content: center;
      background-color: #191919;
    }
    
    .lines::before,
    .lines::after {
      content: '';
      margin: 0 auto;
      position: absolute;
      width: 160px;
      height: 10px;
      opacity: 0;
    }
    
    .lines::before {
      background-color: blue;
      bottom: 50%;
    }
    
    .lines::after {
      background-color: pink;
      top: 50%;
    }
    
    @keyframes expand {
      0% {
        opacity: 0;
        width: 160px;
        height: 10px;
      }
      9.99% {
        opacity: 0;
      }
      10% {
        width: 240px;
        opacity: 1;
      }
      50% {
        width: 100%;
        height: 10px;
      }
      100% {
        opacity: 1;
        width: 100%;
        height: 100%;
      }
    }
    
    .mainImg:hover~.lines::before,
    .mainImg:hover~.lines::after {
      display: block;
      animation: expand 3s linear forwards 0.3s;
    }
  </style>
</head>

<body>
  <div >
    <img  src="https://picsum.photos/id/1015/200/200">
    <div ></div>
    <p >Discord</p>
    <p >Ex0tic_Python#7571</p>
  </div>
</body>

</html>