Попытка сделать логотип / изображение больше при наведении на него курсора - PullRequest
Новая
       0

Попытка сделать логотип / изображение больше при наведении на него курсора

1 голос
/ 15 апреля 2020

Попытка увеличить размер логотипа / изображения при наведении на него курсора - однако он увеличивается, когда вы находитесь на участках, где изображения даже нет - https://gyazo.com/a505f013f6f18a16c13514458cf95f12 Я смотрел учебник YouTube по увеличению - Я не уверен, что это изображение, которое по какой-то причине слишком широко, но я указал ширину? Размеры логотипа / изображения согласно файлу составляют 1024x1024 HTML: 

<html>
<head>
  <title>  Moral & Ethical Issues Concerning the use of Computer Technology </title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
  <body>
    <div class="main">
      <nav>
            <div class="logo">
              <img src="logo.png">
            </div>
            <div class="navigation-links">
              <ul>
                <li><a href="#">general</a></li>
                <li><a href="#">pages</a></li>
                <li><a href="#">contact</a></li>
              </ul>
            </div>
      </nav>
      <div class="gift">
        <img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
      </div>
    </div>

  </body>
</html>

CSS: 

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat Alternates', sans-serif;
}
.logo {
  flex-basis: 15%;
   margin: 0;
}
.logo img{
  padding: 35px;
  width: 250px;
  height: 250px;
  transition: transform .9s ease;
  overflow: hidden;
}
.logo:hover img{
  transform: scale(1.35)
}
.navigation-links{
  flex: 1;
  text-align: right;
  margin-top: -205px;
  margin-right: 96px;
}
.navigation-links ul li {
  list-style: none;
  display: inline-block;
  margin: 15;
  font: Montserrat;
  font-weight: 700;

}
.navigation-links ul li a{
  color: #fff;
  text-decoration:none;
}
.gift img{
  height: 60px;
  float: right;
  margin-top: -61px;
  padding-right: 20px;
}




.main{
  width: 100%;
  height: 100vh;
  color: fff;
  background: linear-gradient(-60deg, #FFC300, #FF8166, #0087FF, #F44FFF);
  background-size: 400% 400%;
  position: relative;
  overflow: hidden;
  animation: changebackground 35s ease-in-out infinite;
}

@keyframes changebackground {
    0%{
        background-position: 0 50%;
    }
    50%{
      background-position: 100% 50%;
    }
    100%{
        background-position: 0 50%;
    }
}

Ответы [ 2 ]

1 голос
/ 15 апреля 2020 
This is because you didn't give your Image hover, but the Parent div. 
you need to change it like this:


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat Alternates', sans-serif;
}
.logo {
  flex-basis: 15%;
   margin: 0;
}
.logo img{
  padding: 35px;
  width: 250px;
  height: 250px;
  transition: transform .9s ease;
  overflow: hidden;
}
.logo img:hover{ /* <<<<---  You need to change here */
  transform: scale(1.35)
}
.navigation-links{
  flex: 1;
  text-align: right;
  margin-top: -205px;
  margin-right: 96px;
}
.navigation-links ul li {
  list-style: none;
  display: inline-block;
  margin: 15;
  font: Montserrat;
  font-weight: 700;

}
.navigation-links ul li a{
  color: #fff;
  text-decoration:none;
}
.gift img{
  height: 60px;
  float: right;
  margin-top: -61px;
  padding-right: 20px;
}




.main{
  width: 100%;
  height: 100vh;
  color: fff;
  background: linear-gradient(-60deg, #FFC300, #FF8166, #0087FF, #F44FFF);
  background-size: 400% 400%;
  position: relative;
  overflow: hidden;
  animation: changebackground 35s ease-in-out infinite;
}

@keyframes changebackground {
    0%{
        background-position: 0 50%;
    }
    50%{
      background-position: 100% 50%;
    }
    100%{
        background-position: 0 50%;
    }
}
<html>
<head>
  <title>  Moral & Ethical Issues Concerning the use of Computer Technology </title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
  <body>
    <div class="main">
      <nav>
            <div class="logo">
              <img src="logo.png">
            </div>
            <div class="navigation-links">
              <ul>
                <li><a href="#">general</a></li>
                <li><a href="#">pages</a></li>
                <li><a href="#">contact</a></li>
              </ul>
            </div>
      </nav>
      <div class="gift">
        <img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
      </div>
    </div>

  </body>
</html>
1 голос
/ 15 апреля 2020

Это происходит потому, что ваш .logo div занимает ширину в этом месте экрана. Вы можете прочитать о Как сделать div не больше его содержимого .

Я использовал решение определить max-width для logo div и все. 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat Alternates', sans-serif;
}

.logo {
  flex-basis: 15%;
  margin: 0;
  max-width: 300px;
}

.logo img {
  padding: 35px;
  width: 250px;
  height: 250px;
  transition: transform .9s ease;
  overflow: hidden;
}

.logo:hover img {
  transform: scale(1.35)
}

.navigation-links {
  flex: 1;
  text-align: right;
  margin-top: -205px;
  margin-right: 96px;
}

.navigation-links ul li {
  list-style: none;
  display: inline-block;
  margin: 15;
  font: Montserrat;
  font-weight: 700;
}

.navigation-links ul li a {
  color: #fff;
  text-decoration: none;
}

.gift img {
  height: 60px;
  float: right;
  margin-top: -61px;
  padding-right: 20px;
}

.main {
  width: 100%;
  height: 100vh;
  color: fff;
  background: linear-gradient(-60deg, #FFC300, #FF8166, #0087FF, #F44FFF);
  background-size: 400% 400%;
  position: relative;
  overflow: hidden;
  animation: changebackground 35s ease-in-out infinite;
}

@keyframes changebackground {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
<html>

<head>
  <title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">

  <body>
    <div class="main">
      <nav>
        <div class="logo">
          <img src="logo.png">
        </div>
        <div class="navigation-links">
          <ul>
            <li><a href="#">general</a></li>
            <li><a href="#">pages</a></li>
            <li><a href="#">contact</a></li>
          </ul>
        </div>
      </nav>
      <div class="gift">
        <img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
      </div>
    </div>

  </body>

</html>

Примечание: Чтобы обнаружить подобные проблемы, просто просмотрите элементы страницы и проверьте их размеры на экране. Удачи!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...