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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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