CODEWITHSUNDEEP
htmlcss
Jury
Jury

Reputation: 181

Keeping the Images in while hovering the Menu Link

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">
                <a href="#" class="blurLink">Home</a>
                <a href="#" class="blurLink">Blog</a>
                <a href="#" class="blurLink">Portfolio</a>
                <img src="https://i.sstatic.net/JWQJm.png" alt="logo" class="logo">
                <a href="#" class="blurLink">Progress</a>
                <a href="#" class="blurLink">About</a>
                <a href="#" class="blurLink">Contact</a>
                </div>
          </nav>

Upvotes: 0

Views: 51

Answers (3)

user18984
user18984

Reputation: 57

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);
}

Upvotes: 0

ypoulakas
ypoulakas

Reputation: 421

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">
      <a href="#" class="blurLink">Home</a>
      <a href="#" class="blurLink">Blog</a>
      <a href="#" class="blurLink">Portfolio</a>
    </div>
    <img src="https://i.sstatic.net/JWQJm.png" alt="logo" class="logo">
    <div class="navGroup2">
      <a href="#" class="blurLink">Progress</a>
      <a href="#" class="blurLink">About</a>
      <a href="#" class="blurLink">Contact</a>
    </div>
  </div>
</nav>

Upvotes: 1

Smollet777
Smollet777

Reputation: 1646

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">
    <a href="#" class="blurLink">Home</a>
    <a href="#" class="blurLink">Blog</a>
    <a href="#" class="blurLink">Portfolio</a>
    <img src="https://i.sstatic.net/JWQJm.png" alt="logo" class="logo">
    <a href="#" class="blurLink">Progress</a>
    <a href="#" class="blurLink">About</a>
    <a href="#" class="blurLink">Contact</a>
  </div>
</nav>

Upvotes: 0

Related Questions