What is the best way to develop an expanding line animation from this starting point?

I have a vision for an animation where, upon hovering over an icon, it enlarges, increases in opacity, and reveals some accompanying text. The visual effect I am aiming for involves two lines of color expanding horizontally from the center outwards before increasing in height. The lower line should expand downwards while the upper line expands upwards. My initial attempt at creating this animation involved tweaking the height, width, and opacity properties, but I encountered issues with editing the icon itself. I am seeking guidance on the proper approach to achieve this effect. Any assistance or suggestions would be greatly 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 class="hoverCard">
    <img class="mainImg" src="../Media/Link-Logos/Discord.png">
    <p class="mainText">Discord</p>
    <p class="subText">Ex0tic_Python#7571</p>
  </div>
</body>

</html>

htmlcssanimationcss-animations

Answer №1

When the image is hovered over, the requirement is for lines to be drawn and expand. Since pseudo elements cannot be used on the image itself, this code snippet introduces a new element after the img called .lines.

The .lines element is positioned absolutely and sized relative to the parent card element, creating a visually appealing effect.

This element utilizes before and after pseudo elements to draw lines that expand vertically through the use of CSS animations.

To address concerns about visibility when the line goes downwards, the snippet sets the line color to pink for better contrast against the card's background color.

You may need to adjust timings and dimensions to fit your specific requirements. This example serves to illustrate one possible approach.

<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 class="hoverCard">
    <img class="mainImg" src="https://picsum.photos/id/1015/200/200">
    <div class="lines"></div>
    <p class="mainText">Discord</p>
    <p class="subText">Ex0tic_Python#7571</p>
  </div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

css: positioning images with overlap in a responsive layout

Two divs have been created with background images, both displaying the same image but in different colors - one grey and the other green. These images are waveforms. Initially, only the grey image (div1) is visible while the green image (div2) remains hid ...

javascripthtmlcss

Does Div have the capability for text-shadow?

Is there a way to create a shadow effect for DIVs similar to the text-shadow property? While text-shadow is great for adding shadows to individual pieces of text, I'm interested in applying a shadow effect to an entire DIV element. Does anyone have a ...

css

Managing ajax requests for lazy loading while scrolling through the middle of the window can be a challenging task. Here are some tips on

I have implemented Lazy loading in my Project. I found a reference at which explains how to make an ajax call after scrolling and image upload with slow mode without allowing scrolling until the loader is shown. The code snippet I am using is as follows: ...

javascriptjqueryhtmlajaxasp.net-mvc

Issue with Chrome when using angled CSS gradient backgrounds

I'm encountering a problem with a CSS gradient background on a div that is set to 100% width and height. This issue only seems to be happening in Chrome. I have some content placed over the div, and when I hover over links within that div, the gradien ...

google-chromecss

Issue with Slick Slider when expanding collapsible section in Bootstrap 4

Whenever I expand a bootstrap collapse that contains a carousel, only one carousel item appears instead of all. Is this a bug in Bootstrap or Slick Slider? https://i.sstatic.net/T7Orm.jpg Slider $('.remember__carousel').slick({ slidesToShow: ...

csstwitter-bootstrapslick.js

Track user sessions and transfer username to final page

Is there a way to showcase the chosen username from a dropdown menu on the initial page and then also display it on the last page without having to pass variables between pages? Additionally, if I wish to incorporate a timer on a middle page, how can I sto ...

phphtml

Sliding an image from the left side to the right, and then repeating the movement from left to right

I am currently working on a CSS effect for some images. My goal is to have an image appear from the left side, move towards the right side, then reappear from the left and repeat this cycle. I managed to achieve this using the code below: @keyframes sli ...

javascripthtmlcsscss-animations

Conceal the rating of WordPress products when they have no ratings

I am looking to remove the star ratings under the title for products with empty reviews. I specifically want to hide the stars without allowing users to leave a new review. I found a similar solution for hiding a different element and attempted to customiz ...

javascriptphpcsswordpress

Arrange the given data either by ID or Name and present it

Here is the code snippet I am working with: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .content{ border: 1px solid gray; width: 250px; ...

javascriptjqueryhtml

NavigateToTop/BackToTheBeginning

I'm facing a challenge with a page layout that involves two vertical div's - one for the menu on the left and another for loading content on the right. My goal is to utilize the .scrollintoview() function on the menu div so that when a link is cl ...

javascriptjqueryhtmlcssjs-scrollintoview

Show JSON information from a jQuery post request

Greetings, I am currently working on implementing a login script using Ajax. My objective is to retrieve and display data such as email and username, and then store it in local storage. Although I can successfully obtain the data in JSON format, I want to ...

javascriptphpajaxjsonhtml

The printed PDF of a webpage does not display HTML table background colors in Chrome or Firefox

Is there a way to change the colors of table cells in an HTML table when exporting to PDF? I'm creating content dynamically that includes background-color: #ffffff (or red) and showing it on a webpage, but the cell backgrounds appear as white in the P ...

htmlcsspdfpdf-generationbackground-color

What is the best way to display my menu bar when the icon is hovered over?

I want to create a menu bar similar to the one found on . I am unsure of how they achieved this effect, but it seems to involve a scroll-over action. However, when I attempt to replicate it, the words still appear even when the menu bar is collapsed. < ...

htmlcssmenubar

The JavaScript function is not functioning properly, whereas another function is working as intended

I have created a HTML form with 2 buttons and a table. Each row in the table consists of a checkbox and 2 text fields. The buttons allow users to add and remove rows from the table. The remove button only applies to rows where their checkbox is checked. T ...

javascripthtmlformshtml-tablerows

Tips for updating WordPress without changes appearing live right away

I want to quickly and easily make CSS changes to a WordPress website without doing it live. Is there a way to make these changes locally and then upload them? What is your recommendation? Some people have mentioned that making changes locally can be diffi ...

phpcsswordpress

How come an image with position:absolute doesn't have a height? Even though I can clearly see its height in the browser

I'm perplexed as to why a div with display:block won't position itself below another div with the same style. Here's my code: .container{ display: block; position: relative; } .container img{ width: 100%; position: absolute; t ...

htmlcssposition

augmentable form that can be expanded flexibly

Perhaps I'm missing something really simple here, but I just can't seem to figure this out. I'm attempting to create a form that can dynamically extend. The issue I'm facing is that I can't get this particular code to function: & ...

javascriptphphtml

Make sure that the HTML5 application is fixed inlandscape mode

I'm in the process of developing a basic HTML5/CSS3/Javascript application that needs to be compatible with all major mobile platforms - android, ios, and windows-phone. My goal is to have the app only function in landscape mode, even if the user hold ...

androidioshtmlwindows-phone-8

Having trouble setting the backgroundImage in React?

Hi there! I'm in the process of crafting my portfolio website. My goal is to have a captivating background image on the main page, and once users navigate to other sections of the portfolio, I'd like the background to switch to a solid color. Alt ...

javascriptcssreactjscreate-react-app

Alert: Converting an array to a string may result in unexpected behavior

I am currently working on implementing pagination and encountered an error. This is my first time working with this, so any help would be greatly appreciated. Thank you! try { // Determine the total number of items in the table $total = $con -> ...

phphtml