Is there a way to create a zoom effect for the logo in my navigation bar when hovering over it without using jQuery? I've tried various codes from different sources but none seem to work. The .logo class is assigned to the logo in the nav bar. Any suggestions or help would be greatly appreciated!
body {
margin: 0px;
padding: 0px;
font-family: Arial;
}
.nav {
margin: 0;
opacity: 0.7;
background-color: #FFD700;
color: black;
list-style: none;
font-weight: bold;
text-align: right;
padding: 25px 0 25px 0;
}
.nav>li {
display: inline-block;
padding: 0 25px 0 25px;
}
.nav>li>a {
text-decoration: none;
color: black;
}
.nav>li>a:hover {
color: #D2691E;
}
.logo {
color: black;
float: left;
position: absolute;
top: -65px;
left: -210px;
font-size: 20px;
font-weight: bold;
}
.logo>a {
text-decoration: none;
color: black;
}
.logo>a:hover {}
.banner1 {
width: 100%;
display: block;
}<!DOCTYPE html>
<html>
<head>
<title> Trexon Music </title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<ul class="nav">
<div class="logo">
<a href="default.asp">
<img src="/Users/Mushriff/Desktop/Website/Images/Bannerlogo.psd">
</a>
</div>
<li><a href="default.asp">Home</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About Us</a></li>
<li><a href="music.asp">Music</a></li>
<li><a href="merc.asp">Merchandise</a></li>
</ul>
<div class="banner">
<img class="banner1" src="/Users/Mushriff/Desktop/Website/Images/Cover.psd">
</div>
</body>
</html>