1

Trying to make logo/image become larger when cursor on it - however it enlarges when your are on areas where the image is not even there - https://gyazo.com/a505f013f6f18a16c13514458cf95f12 I watched a youtube tutorial to do the enlarging - im not sure if it is the image that for some reason is too wide but i have specified the width? The dimensions of the logo/image as per the file is 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%;
    }
}
P Bh
  • 11
  • 3
  • .logo class goes all the way the screen width. give the logo img a specific class then write the hover effect on that specific class. – Evik Ghazarian Apr 15 '20 at 18:12

2 Answers2

1

It happen because your .logo div is taking a width at that place of the screen. You can read about How to make a div not larger than its contents.

The solution I used was to define max-width to the logo div and that's it.

* {
  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>

Note: in order to spot problems like this, just inspect the page's elements and check their sizes on the screen. Good Luck!

Omri Attiya
  • 3,917
  • 3
  • 19
  • 35
1
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>
HamiD
  • 1,075
  • 1
  • 6
  • 22