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
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.
Here you can check I have written a new code for you
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.