I started developing a portfolio website only to have the CSS transition slow me down because it is not responding to my hover function, when I hover my mouse over Facebook, GitHub, Twitter, mail and phone link its doesn't transition. This is my source code what can I do to fix it.
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">
<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=Poppins:wght@100&family=Roboto:ital@1&family=Tangerine:wght@700&display=swap" rel="stylesheet">
<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=Poppins:wght@100;600&family=Raleway:wght@600&family=Roboto:ital@1&family=Tangerine:wght@700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/22c578ae8f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles.css">
<title>Personal Portfolio</title>
</head>
<body>
<section id="welcome-section">
<nav id="navbar">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1>Hey I am Oni Oluwatobiloba</h1>
<p>a web developer</p>
</section>
<section id="projects">
<h2>These are some of my projects</h2>
<div >
<div >
<a href="../Projects/Login/Login.html">
<img src="./images/Login page.png" alt="Login page"><p>Login page</p></a>
</div>
<div >
<a href="../Projects/Tribute Page/index.html"><img src="./images/Tribute.png" alt="Tribute">
<p>Tribute Page</p></a>
</div>
<div >
<a href="../Projects/Survey Form/index.html"><img src="./images/Survey.png" alt="Survey"><p>Survey Form</p></a>
</div>
<div >
<a href="../Projects/Product Landing Page/index.html">
<img src="./images/Product Landing Page.png" alt="Product Landing Page"><p>Product Landing Page</p></a>
</div>
<div >
<a href="../Projects/Technical Documentation/index.html">
<img src="./images/Technical Documentation.png" alt="Technical Documentation"><p>Technical Documentation</p></a>
</div>
</div>
</section>
<section >
<div>
<h1><b>Let's work together...</b></h1>
<p><i> How do you take your tea?</i></p>
</div>
<div>
<a href=""><i ></i>Facebook</a>
<a href=""><i ></i>GitHub</a>
<a href=""><i ></i>Twitter</a>
<a href=""><i ></i>Send a mail</a>
<a href=""><i ></i>Call me</a>
</div>
</section>
<section >
<p>**This is my first personal portfolio, No contact details was used.</p>
<p><span>©</span>Created by Oni Oluwatobiloba</p>
</section>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&family=Roboto:ital@1&family=Tangerine:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;600&family=Raleway:wght@600&family=Roboto:ital@1&family=Tangerine:wght@700&display=swap');
body{
margin: 0px !important;
}
#navbar{
text-align: right;
background-color: rgb(82, 85, 100);
width: 100%;
height: 66px;
position: fixed;
top: 0;
left: 0;
}
#navbar>ul>li>a:hover{
background-color: lightslategray;
}
ul{
position: relative;
bottom: 63px;
display: inline;
}
ul>li{
position: relative;
top: 60px;
display: inline;
list-style-type: none;
}
ul>li>a{
margin: -5px;
padding: 20px;
text-align: right;
text-decoration: none;
font-family: sans-serif;
font-size: 22px;
color: white;
box-sizing: border-box;
}
#welcome-section{
display: flex;
width: 100%;
height: 100vh;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: black;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 40px;
background-image: linear-gradient(180deg, rgb(55, 68, 79), rgb(90, 115, 123));
}
h1,p{
margin: 0px;
}
#projects{
display: flex;
width: 100%;
height: 140vh;
flex-direction: column;
align-items: center;
color: white;
font-family: 'Poppins', sans-serif;
background-color: rgb(157, 70, 66);
}
section[id="projects"]>h2{
display: inline-block;
font-family: sans-serif;
font-weight: 300;
font-size: 40px;
border-bottom: 3px solid black;
}
.grid-container{
display: grid;
grid-template-columns: 460px 460px 460px;
grid-template-rows: 400px 390px;
gap: 20px;
row-gap: 90px;
}
img{
width: 400px;
height: 390px;
margin: 10px;
}
.grid-item>a{
text-decoration: none;
}
.grid-item>a>p{
width: 400px;
background-color: rgb(50, 52, 64);
box-shadow: 3px black;
padding: 20px 5px;
color: white;
text-decoration: none;
font-size: 24px;
text-align: center;
margin-top: -15px;
margin-left: 10px;
box-sizing: border-box;
box-shadow: 1px 0px 2px black;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
img{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 1px 0px 3px black;
}
.contact{
display: flex;
width: 100%;
height: 80vh;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-family: 'Poppins', sans-serif;
background-image: linear-gradient(180deg, rgb(55, 68, 79), rgb(90, 115, 123));
}
.contact h1{
font-family: 'Raleway', sans-serif;
font-size: 60px;
font-weight: 600;
}
.contact a{
display: inline;
text-decoration: none;
color: white;
font-size: 32px;
font-weight: bold;
text-shadow: 1px 1px 5px black;
justify-content: space-between;
padding: 10px 20px;
transition-duration: 5s;
}
.contact a:hover{
transform: translateY(20px);
}
.contact p{
font-size: 20px;
font-weight: 300;
text-align: center;
}
.footer{
display: flex;
width: 100%;
height: 20vh;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: bolder;
background-image: linear-gradient(360deg, rgb(55, 68, 79), rgb(90, 115, 123));
border-top: 7px solid rgb(157, 70, 66);
}
.fa-brands,.fa-solid{
margin: 5px;
text-shadow: 1px 1px 5px black;
}
Any help on fixing this is very appreciated.......................................................
CodePudding user response：
The problem is with your Display property, "inline" doesn't work with transform property, so you need to change it to "inline-block" and it should work.
.contant a{
display:inline-block;
}
CodePudding user response：
Try putting the transition property in the hover spot exp:
.contact a:hover{
transform: translateY(20px);
transition: 2s;
}