0

https://codepen.io/Fed72/pen/dyWNePd

при наведении на иконки (twitter,facebook,linkedin),они должны увеличиваться, через :hover. Проблема в том, что при срабатывании :hover сдвигаются соседние элементы. Как решается такая ситуация? заранее спасибо за помощь!

hr {
  background-color: white;
  height: 55px;
  width: 2px;
  border-width: 0;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 2px 0px 16px 2px rgb(169 169 169);
  width: 100%;
  height: 140px;
  background-color: rgb(212 212 212);
}

.label {
  display: flex;
  align-items: center;
}

.label span {
  color: rgb(188 188 188);
  font-size: 100px;
  font-family: 'Monoton', cursive;
}

.nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 10px;
  box-shadow: 6px 6px 9px -2px rgb(152 150 150 / 85%);
  width: 52%;
  height: 80px;
}

.nav div,
.nav div>span {
  display: flex;
  align-items: center;
}

.nav>div>span {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 21px;
  color: white;
  transition: opacity .2s linear;
  cursor: pointer;
}

.nav>div>span:after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 100px;
  background-color: #cef8f8;
  opacity: 0;
  position: absolute;
  top: 106%;
  left: 0;
  z-index: 1;
  transition: opacity .2s linear;
}

.nav>div>span:hover:after {
  opacity: 1;
}

.nav__img img {
  display: flex;
  width: 64px;
  margin-top: 2px;
}

.nav__img img:hover {
  width: 72px;
  transition-timing-function: linear;
  transition-duration: 0.15s;
}
<nav>

  <div class="label">
    <span>D.F.</span>
  </div>

  <div class="nav">
    <div>
      <span>About me</span>
    </div>
    <div>
      <span>Skills</span>
    </div>
    <div>
      <span>Portfolio</span>
    </div>
    <div>
      <span>Blog</span>
    </div>
    <div>
      <span>Contact me</span>
    </div>
    <div id="hr">
      <hr noshade>
    </div>

    <div id="nav__img" class="nav__img">
      <div>
        <a href=""> <img src="https://cdn.icon-icons.com/icons2/1294/PNG/512/2362131-media-social-topic-trend-tweet-twitt_85525.png" alt="twitter_icon"> </a>
      </div>
      <div>
        <a href="https://www.facebook.com/dima.fedechkin.5"> <img src="https://cdn.icon-icons.com/icons2/1294/PNG/512/2362129-facebook-fb-friends-social_85524.png" alt="facebook_icon"> </a>
      </div>
      <div>
        <a href="https://www.linkedin.com/in/fed-dim-b26744213/"> <img src="https://cdn.icon-icons.com/icons2/2201/PNG/512/linkedin_logo_square_icon_134016.png" alt="linkedin_icon"> </a>
      </div>
    </div>
  </div>
</nav>

2
  • 1
    Попробуйте через transform: scale(1.1) увеличивать. 14 июл 2021 в 9:40
  • подходит, спасибо!
    – Fed Dim
    14 июл 2021 в 10:07

1 ответ 1

1

hr {
  background-color: white;
  height: 55px;
  width: 2px;
  border-width: 0;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 2px 0px 16px 2px rgb(169 169 169);
  width: 100%;
  height: 140px;
  background-color: rgb(212 212 212);
}

.label {
  display: flex;
  align-items: center;
}

.label span {
  color: rgb(188 188 188);
  font-size: 100px;
  font-family: 'Monoton', cursive;
}

.nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 10px;
  box-shadow: 6px 6px 9px -2px rgb(152 150 150 / 85%);
  width: 52%;
  height: 80px;
}

.nav div,
.nav div>span {
  display: flex;
  align-items: center;
}

.nav>div>span {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 21px;
  color: white;
  transition: opacity .2s linear;
  cursor: pointer;
}

.nav>div>span:after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 100px;
  background-color: #cef8f8;
  opacity: 0;
  position: absolute;
  top: 106%;
  left: 0;
  z-index: 1;
  transition: opacity .2s linear;
}

.nav>div>span:hover:after {
  opacity: 1;
}

.nav__img img {
  display: flex;
  width: 64px;
  margin-top: 2px;
}

.nav__img img:hover {
  transform: scale(1.15);
  transition-timing-function: linear;
  transition-duration: 0.15s;
}
<nav>

  <div class="label">
    <span>D.F.</span>
  </div>

  <div class="nav">
    <div>
      <span>About me</span>
    </div>
    <div>
      <span>Skills</span>
    </div>
    <div>
      <span>Portfolio</span>
    </div>
    <div>
      <span>Blog</span>
    </div>
    <div>
      <span>Contact me</span>
    </div>
    <div id="hr">
      <hr noshade>
    </div>

    <div id="nav__img" class="nav__img">
      <div>
        <a href=""> <img src="https://cdn.icon-icons.com/icons2/1294/PNG/512/2362131-media-social-topic-trend-tweet-twitt_85525.png" alt="twitter_icon"> </a>
      </div>
      <div>
        <a href="https://www.facebook.com/dima.fedechkin.5"> <img src="https://cdn.icon-icons.com/icons2/1294/PNG/512/2362129-facebook-fb-friends-social_85524.png" alt="facebook_icon"> </a>
      </div>
      <div>
        <a href="https://www.linkedin.com/in/fed-dim-b26744213/"> <img src="https://cdn.icon-icons.com/icons2/2201/PNG/512/linkedin_logo_square_icon_134016.png" alt="linkedin_icon"> </a>
      </div>
    </div>
  </div>
</nav>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.