Seeking to enhance logo/image size when cursor hovers over it, but facing an issue where it enlarges even on areas outside of the image itself - View Example. I followed a tutorial to achieve this effect, and specified the width as 1024x1024 for the logo/image in question. However, there seems to be a problem with the sizing.
<html>
<head>
<title>Moral & Ethical Issues Concerning the Use of Computer Technology</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<body>
<div class="main">
<nav>
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<ul>
<li><a href="#">general</a></li>
<li><a href="#">pages</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</nav>
<div class="gift">
<img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
</div>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
}
.logo {
flex-basis: 15%;
margin: 0;
}
.logo img{
padding: 35px;
width: 250px;
height: 250px;
transition: transform .9s ease;
overflow: hidden;
}
.logo:hover img{
transform: scale(1.35)
}
.navigation-links{
flex: 1;
text-align: right;
margin-top: -205px;
margin-right: 96px;
}
.navigation-links ul li {
list-style: none;
display: inline-block;
margin: 15;
font: Montserrat;
font-weight: 700;
}
.navigation-links ul li a{
color: #fff;
text-decoration:none;
}
.gift img{
height: 60px;
float: right;
margin-top: -61px;
padding-right: 20px;
}
.main{
width: 100%;
height: 100vh;
color: fff;
background: linear-gradient(-60deg, #FFC300, #FF8166, #0087FF, #F44FFF);
background-size: 400% 400%;
position: relative;
overflow: hidden;
animation: changebackground 35s ease-in-out infinite;
}
@keyframes changebackground {
0%{
background-position: 0 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0 50%;
}
}