skip to Main Content

So I’m trying to make this website and use it as my portfolio, since I’m starting to get a job.

I’m having some issues with creating the website, more so with the animation that I want to create.

Pretty much what I want to do is this animation on this website: https://www.milli.agency

What I want are buttons that are not symmetrical and when I hover my mouse over them, they get bigger and push the other buttons to the side, without them overlapping with themselves

I got kinda far, but now I having some issues in mimicking this affect.

Here’s the code I got so far:

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Portifólio João Pedro</title>
        
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="button">
              <button>Botão 1</button>
            </div>
            <div class="button">
              <button>Botão 2</button>
            </div>
            <div class="button">
              <button>Botão 3</button>
            </div>
            <div class="button">
              <button>Botão 4</button>
            </div>
          </div>
    </body>
</html>

CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
  
.container {
    display: grid;
    height: 100%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 20px;
}
  
.button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    transition: transform 0.3s ease-in-out, z-index 0.3s;
}
  
.button button {
    width: 100%;
    height: 100%;
}
  
.container:hover .button:not(:hover) {
    transition-delay: 0s !important;
    transform: translateX(0);
    z-index: 0;
}
  
.container:hover .button:hover {
    transform: scale(1.1);
    z-index: 1;
}
  
.container:hover .button:hover ~ .button {
    transition-delay: 0.1s;
    transform: translateX(15%);
}

What an I missing, I just starting it out, but tried to look at youtube, websites but haven’t found much on the subject.

How can I make this same effect, is it better with JavaScript, continue with CSS, I at a loss right now, can you guys help me?

I tried looking at articles online, youtube, but that’s about it.

What I’m looking for is an effect similar to the one I gave an exemple of: https://www.milli.agency

2

Answers


  1. Everything is fine but you are assuming that this page is only built with HTML & CSS but you can see that they are using two J-query libraries to build this structure. Here is one simple example structure I wrote for you.

    <!DOCTYPE html>
    <html data-wf-page="60ee32414a2efc10344a2943"><head>
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Portifólio João Pedro</title>
    <!--Must Use this Jquery file in <head> Tag-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <style>
    * {
      box-sizing: border-box;
    }
    
    .home_topleft {
      z-index: 1;
      width: 60%;
      height: 40%;
      background-color: #fff;
      border: 2px solid #000;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      display: flex;
      position: absolute;
      top: 0;
      bottom: auto;
      left: 0;
      right: auto;
    }
    
    .home_topright {
      z-index: 1;
      width: 40%;
      height: 60%;
      background-color: #fff;
      border: 2px solid #000;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      display: flex;
      position: absolute;
      top: 0;
      bottom: auto;
      left: auto;
      right: 0;
    }
    
    .home_bottomleft {
      z-index: 1;
      width: 40%;
      height: 60%;
      background-color: #fff;
      border: 2px solid #000;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      display: flex;
      position: absolute;
      top: auto;
      bottom: 0;
      left: 0;
      right: auto;
    }
    
    .home_bottomright {
      z-index: 1;
      width: 60%;
      height: 40%;
      background-color: #fff;
      border: 2px solid #000;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      display: flex;
      position: absolute;
      top: auto;
      bottom: 0;
      left: auto;
      right: 0;
    }
    
    .button {
      color: #141414;
      text-transform: uppercase;
      font-family: forma-djr-micro, sans-serif;
      font-size: 50px;
      font-weight: 400;
      text-decoration: none;
    }
    </style>
    
    </head>
    <body>
    <div class="container">
    
    <div data-w-id="9f559ef3-4e19-84e1-5e56-79b9baf05265" class="home_topleft">
    <button class="button">Botão 1</button>
    </div><div data-w-id="880c7618-5f6d-2872-3471-33319b77ef48" class="home_bottomleft">
    <button class="button">Botão 2</button>
      </div><div data-w-id="7facf194-1e43-1b25-657e-fe8951eda355" class="home_bottomright">
    <button class="button">Botão 3</button>
      </div><div data-w-id="715b8783-f7e3-4501-693f-23e82a031fdf" class="home_topright">
    <button class="button">Botão 4</button></div>
    </div>
    
    <!-- Use this Jquery file just before close the </body> tag-->
    <script src="https://assets.website-files.com/60ee32414a2efcb87f4a2940/js/millinextgen.4ad3efe9f.js" type="text/javascript"></script>
    </body></html>
    
    Login or Signup to reply.
  2. Here you can check I have written a new code for you

    <!DOCTYPE html>
    <html data-wf-page="60ee32414a2efc10344a2943"><head>
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Portifólio João Pedro</title>
    <!--Must Use this Jquery file in <head> Tag-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <style>
        * {
      box-sizing: border-box;
    }
    
    
    .home_topleft {
      z-index: 1;
      width: 60%;
      height: 40%;
      background-color: #fff;
      border: 2px solid #000;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      display: flex;
      position: absolute;
      top: 0;
      bottom: auto;
      left: 0;
      right: auto;
    }
    
    .home_topright {
      z-index: 1;
      width: 40%;
      height: 60%;
      background-color: #fff;
      border: 2px solid #000;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      display: flex;
      position: absolute;
      top: 0;
      bottom: auto;
      left: auto;
      right: 0;
    }
    
    .home_bottomleft {
      z-index: 1;
      width: 40%;
      height: 60%;
      background-color: #fff;
      border: 2px solid #000;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      display: flex;
      position: absolute;
      top: auto;
      bottom: 0;
      left: 0;
      right: auto;
    }
    
    .home_bottomright {
      z-index: 1;
      width: 60%;
      height: 40%;
      background-color: #fff;
      border: 2px solid #000;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      display: flex;
      position: absolute;
      top: auto;
      bottom: 0;
      left: auto;
      right: 0;
    }
    
    .logo {
      z-index: 10;
      width: 20%;
      height: 20%;
      background-color: #6200ff;
      border: 1px #000;
      justify-content: center;
      align-items: center;
      padding-bottom: 9px;
      display: flex;
      position: absolute;
      top: 40%;
      left: 40%;
    }
    
    .button {
      color: #141414;
      text-transform: uppercase;
      font-family: forma-djr-micro, sans-serif;
      font-size: 50px;
      font-weight: 400;
      text-decoration: none;
    }
    .container {
      margin: 48px;
      position: absolute;
      top: 0%;
      bottom: 0%;
      left: 0%;
      right: 0%;
    }
    
    
    @media screen and (max-width: 991px) {
      .home_topleft, .home_topright, .home_bottomleft, .home_bottomright {
        width: 100%;
        height: 18%;
        border-width: 1px;
        position: static;
      }
    
      .logo {
        width: 100%;
        height: 28%;
        border-width: 1px;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        position: static;
      } }
    </style>
    
    
    </head>
    <body>
    <div class="container">
    
    <div data-w-id="d2f42698-9a2a-e9a1-ebc5-04b930731124" class="logo" style="width: 20%; height: 20%; transform: translate3d(-80%, 60%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">
    <button class="button">Botão 5</button>
    </div>
    
    <div data-w-id="9f559ef3-4e19-84e1-5e56-79b9baf05265" class="home_topleft">
        <button class="button">Botão 1</button>
        </div><div data-w-id="880c7618-5f6d-2872-3471-33319b77ef48" class="home_bottomleft">
        <button class="button">Botão 2</button>
          </div><div data-w-id="7facf194-1e43-1b25-657e-fe8951eda355" class="home_bottomright">
        <button class="button">Botão 3</button>
          </div><div data-w-id="715b8783-f7e3-4501-693f-23e82a031fdf" class="home_topright">
        <button class="button">Botão 4</button></div>
    </div>
    
    <!-- Use this Jquery file just before close the "body" tag-->
    <script src="https://assets.website-files.com/60ee32414a2efcb87f4a2940/js/millinextgen.4ad3efe9f.js" type="text/javascript"></script>
    
    </body>
    </html>
    

    If you are looking to run this offline or wanna host yourself save the java-script file in your device or hosting (open html page in browser -> rigth-click-> view-page source -> right click on the javascript file -> save link as) and replace the path to point.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search