CODEWITHSUNDEEP
htmlcss
paugito
paugito

Reputation: 9

Anchor tag is messing with img position

I am trying to link my image to another webpage but it seems the anchor tag is positioning the image out of its original center position. The div class with the problem is the first one named "beef". I tried declaring text decoration as none for the anchor tag and it wouldn't seem to work.

My HTML code is as follows

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>homepage</title>
<link href="homepage.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="maincontainer">
    <div class="square1 boxfunc beef">
        <a href="mainRecipePage.html"> <img src="cow.png" alt="" class="imghome" /> </a>
    </div>
    <div class="square2 boxfunc chicken">
        <img src="chicken.png" alt="" class="imghome">  
    </div>
    <div class="square3 boxfunc pork">  
    <img src="pig.png"  alt="" class="imghome"/>    
    </div>
    <div class="square4 boxfunc seafood">       
    <img src="tuna.png"  alt="" class="imghome"/>       
    </div>  
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.js"></script>
   <script src="homepage.js"></script>
</body>
</html>

@charset "UTF-8";

/* CSS Document */

body{
  background-color: #fdf5e8;
 }
.maincontainer{
  background-color:#fdf5e8;
  display:grid;
  grid-template-rows:repeat(2, minmax(49vh, 1fr));
  grid-row: auto auto;
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  grid-template-columns:repeat(2, minmax(49vw, 1fr)); 
}
.boxfunc{
  background-color:#333;
  padding:20px;
  border-radius:10px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
  font-family:sans-serif;
  opacity:0;  
  }
.beef{
  background-color: #e4303d;
}
.chicken{
background-color: #fdba21;
}
.pork{
background-color: #f5dfda;
}
.seafood{
background-color: #bce3f2;
}
.imghome {
width:50%;
height:auto;
}
.imghome:hover{
transition: 0.4s;
transform: scale(1.4);
}
.boxfuncmain{
padding:20px;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:40px;
font-family:sans-serif;
width:100%;
}

See the cow logo

Upvotes: 0

Views: 1205

Answers (1)

Dan Knights
Dan Knights

Reputation: 8368

It's because the width of the image is no longer 50% of the parent container it's now 50% of the link. If you change the imghome class to be on the anchor link then it should balance out.

Upvotes: 1

Related Questions