CSS Scale property on an element disturbing position of other elements
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
I have an anchor tag, which is in text format initially, but when hovered on, scales up by 1.1x, turns into a button and the color of the text changes. The problem I am facing is that, when I hover over the anchor tag and the size increases, the elements above it change their position too, they align themselves so that they are in the center of the viewport, because I used ‘flex’ property for the section which contains all the elements. How do I stop this?
The anchor tag is in the #hero section. This is my HTML and CSS code:
body {
font-family: ‘Montserrat’, sans-serif;
width: 100%;
margin: 0;
background-color: #121212;
}
font-family: ‘Montserrat’, sans-serif;
width: 100%;
margin: 0;
background-color: #121212;
}
/* Header Section */
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 80px;
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.6629026610644257) 0%, rgba(9,9,121,0) 57%);
}
#navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 1rem;
font-weight: 600;
color: #ffffff;
transition: 200ms ease-in-out;
}
#navbar li a:hover,
#navbar li a.active {
color: #e50914;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: “”;
width: 30%;
height: 3px;
background: #e50914;
position: absolute;
bottom: -6px;
left: 20px;
}
.logo {
width: 10rem;
}
/* Hero Section */
#hero {
color: white;
height: 80vh;
padding: 0 100px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
#hero h1{
margin:0;
font-size: 3.5rem;
font-weight: 900;
padding-bottom:3rem;
width: 40%;
}
#hero p{
margin:0;
font-size: 1.4rem;
font-weight: 400;
padding-bottom: 1.5rem;
width: 30%;
}
#hero a{
text-decoration: none;
color: #ffffff;
font-size: 2rem;
font-weight: 900;
transition: 500ms transform ease-in-out;
position: relative;
}
#hero a::after{
content: “”;
width: 100%;
height: 2px;
background: #e50914;
position: absolute;
bottom: 0px;
left: 0px;
}
#hero a:hover{
color: #121212;
transform: scale(1.1);
-webkit-border-radius: 10;
-moz-border-radius: 10;
border-radius: 10px;
background: #e50914;
padding: 5px 12px 5px 12px;
text-decoration: none;
}
#hero a:hover::after{
visibility: hidden;
}
/* #hero a:hover::after{
content: “”;
width: 100%;
height: 2px;
background: #e50914;
position: absolute;
bottom: 0px;
left: 0px;
} */
.video-gradient{
}
.back-video {
position: absolute;
right: 0;
bottom: 0;
top: 0px;
min-width: 100%;
min-height: 80%;
width: auto;
height: auto;
z-index: -100;
}
<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8″>
<title>Snap Smile</title>
<!– Google Fonts –>
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;900&display=swap” rel=”stylesheet”>
<!– Styles Sheet –>
<link rel=”stylesheet” href=”styles.css”>
<!– Font Awesome –>
<script src=”https://kit.fontawesome.com/6b5d823830.js” crossorigin=”anonymous”></script>
</head>
<body>
<section id=”header”>
<a href=”#”><img src=”images/logo.png” class=”logo”></a>
<div>
<ul id=”navbar”>
<li><a class=”active” href=”why.html”>Why Snap Smile</a></li>
<li><a href=”solutions.html”>Solutions</a></li>
<li><a href=”pricing.html”>Pricing</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”gallery.html”>Gallery</a></li>
<li><a href=””><i class=”fa-solid fa-headset”></i></a></li>
</ul>
</div>
</section>
<section id=”hero”>
<h1>Get Your Hollywood Smile Today</h2>
<p>Show off your million dollar smile with your Snap Smile Veneers</p>
<a href=”#” clas=”button-landing”>BOOK NOW</a>
<!– <video autoplay loop muted plays-inline class=”back-video”>
<source src=”Videos/banner-video.mp4″ type=”video/mp4″>
</video> –>
</section>
</body>
</html>
أضف إجابة