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;
}
/* 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" ></a>
<div>
<ul id="navbar">
<li><a 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 ></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 >
<source src="Videos/banner-video.mp4" type="video/mp4">
</video> -->
</section>
</body>
</html>CodePudding user response：
It's not the scale, it's the added padding on hover. You can counteract it with similar negative margin. So this
padding: 5px 12px 5px 12px;
Counteracted with:
margin: -5px -12px;
body {
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;
margin: -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" ></a>
<div>
<ul id="navbar">
<li><a 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 ></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 >
<source src="Videos/banner-video.mp4" type="video/mp4">
</video> -->
</section>
</body>
</html>CodePudding user response：
The issue is to do with your button padding. The positioning is determined by the aggregated heights of all elements and spacing, but when you introduce padding in your hover state, things have to be adjusted, hence the repositioning.
The solution is to add the padding on your anchor tag first and make adjustments from there.
Hope this code helps!
#hero a{
text-decoration: none;
color: #ffffff;
font-size: 2rem;
font-weight: 900;
transition: 500ms transform ease-in-out;
position: relative;
padding: 5px 12px 5px 12px; /* Put padding on anchor first */
margin: -5px -12px; /* Offset the padding so that the text lines up */
}
#hero a:hover{
color: #121212;
transform: scale(1.1);
-webkit-border-radius: 10;
-moz-border-radius: 10;
border-radius: 10px;
background: #e50914;
/* Removed padding */
text-decoration: none;
}