Keeping the Images in while hovering the Menu Link - html

Question

Helow Guys, I just created a menu links design by following some tutorial in YT, however, I encountered some error, while hovering the links it goes to the logo image space, making the image logo can't see it clearly. What I want is while hovering the links it creates a padding or margin so that the image logo will not disturb and stay the logo where he is. Here's my code
.logo {
height: 65px;
width: 65px;
}
.firstNav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.firstNav > a {
position: relative;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 0 12px;
transition: 0.5s;
color: #000;
}
nav:hover a {
transform: scale(1.5);
opacity: .6;
filter: blur(4px);
}
nav .firstNav a:hover {
transform: scale(2);
opacity: 1;
filter: blur(0);
}
nav .firstNav a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #2575aa;
transition: 0.5s;
transform-origin: right;
transform: scaleX(0);
z-index: -1;
}
nav .firstNav a:hover::before{
transition: 0.5s;
transform-origin: left;
transform: scaleX(1);
}
<nav>
<div class="firstNav">
Home
Blog
Portfolio
<img src="https://i.stack.imgur.com/JWQJm.png" alt="logo" class="logo">
Progress
About
Contact
</div>
</nav>

Answer 1

I think given what you are trying to do it will always invade the space of the logo, so an alternative to Smollet777's answer is that you can adjust its behaviour to push out the items so it wont matter what the width of the text content is.
You can split the nav items in two to keep the logo in a fixed placed and use css transitions to expand the other items like so:
.logo {
height: 65px;
width: 65px;
}
.firstNav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
width: 800px;
}
.blurLink {
position: relative;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 0 12px;
transition: font-size 1s, padding 1s;
color: #000;
}
.blurLink:hover {
font-size: 32px;
padding: 0 20px;
background: #2575aa;
}
.navGroup {
width: 40%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.navGroup2 {
width: 40%;
display: flex;
justify-content: flex-start;
align-items: center;
}
<nav>
<div class="firstNav">
<div class="navGroup">
Home
Blog
Portfolio
</div>
<img src="https://i.stack.imgur.com/JWQJm.png" alt="logo" class="logo">
<div class="navGroup2">
Progress
About
Contact
</div>
</div>
</nav>

Answer 2

You can use element:nth-child(index) to target specific element in CSS.
nav .firstNav a:nth-child(3):hover {
position: relative;
left: -55px;
}
nav .firstNav a:nth-child(5):hover {
position: relative;
right: -55px;
}
.logo {
height: 65px;
width: 65px;
}
.firstNav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.firstNav>a {
position: relative;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 0 12px;
transition: 0.5s;
color: #000;
}
nav:hover a {
transform: scale(1.5);
opacity: .6;
filter: blur(4px);
}
nav .firstNav a:hover {
transform: scale(2);
opacity: 1;
filter: blur(0);
}
nav .firstNav a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #2575aa;
transition: 0.5s;
transform-origin: right;
transform: scaleX(0);
z-index: -1;
}
nav .firstNav a:hover::before {
transition: 0.5s;
transform-origin: left;
transform: scaleX(1);
}
<nav>
<div class="firstNav">
Home
Blog
Portfolio
<img src="https://i.stack.imgur.com/JWQJm.png" alt="logo" class="logo">
Progress
About
Contact
</div>
</nav>

Answer 3

Use this and you'll be ok.
.firstNav>a:nth-of-type(3):hover {
transform: translateX(-55px) scale(2);
}
.firstNav>a:nth-of-type(4):hover {
transform: translateX(55px) scale(2);
}