CODEWITHSUNDEEP
htmlcssimageresponsive-designcentering
paolo tarsis
paolo tarsis

Reputation: 13

Images overlapping with elements in the body when the user changes the zoom of the website

I'm creating a website of mine and i've been teaching myself HTML for the past week or so but I cant absolutely understand why my code isnt working.

Basically I'm trying to put he figure just under the socials box so that it seems like the figure is keeping the socials on its shoulders. The figure is composed of many images because I also animated its parts so that they appear one at a time but that's another thing.

What im trying to achieve is to have the figure always a couple pixels under the socials and both of the centered in the page, INDEPENDENTLY on how much the users zooms in or out. For now if i zoom in the figure goes under the socials while if i zoom out it disaligns completely.

Beware because there could be many errors everywhere and im sure of it. Thanks in advance

(I might have to say that the socials and the figure are inside a container that uses only 64% of the screen)

<div id='ex'>
                <div class="hiddenBottom">
                    <div class="footer">
                        <div class="socials">
                            <a href="https://reddit.com"><i class="fa-brands fa-reddit fa-2x"></i></a>
                            <a href="https://github.com/"><i class="fa-brands fa-github fa-2x"></i></a>
                            <a href="https://www.instagram.com/"><i class="fa-brands fa-instagram fa-2x"></i></a>
                            <a href="https://www.linkedin.com/"><i class="fa-brands fa-linkedin fa-2x"></i></a>
                        </div>
                    </div>
                </div>

                <figure id='magicbox'>
                    <img id='image6' class='magic' src="magiccircle/image61.png" alt="6">
                    <img id='image5' class='magic' src="magiccircle/image51.png" alt="5">
                    <img id='image4' class='magic' src="magiccircle/image41.png" alt="4">
                    <img id='image3' class='magic' src="magiccircle/image31.png" alt="3">
                    <img id='image2' class='magic' src="magiccircle/image21.png" alt="2">
                    <img id='image1' class='magic' src="magiccircle/image11.png" alt="1">
                    <img id='image0' class='magic' src="magiccircle/image001.png" alt="0">
                </figure>
            </div>

This was my HTML (part of it of course as i have many more of it. Lets hope the problem is not somewhere else) This is my CSS for those elements.

.footer {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  bottom:-45px;
  /* margin-top: 287px; */
}

/*the social box*/
.socials a{
  text-decoration: none;
}

.socials {
  background-color: white;
  display: flex;
  margin: 10px;
  border-radius: 10px;
  border: 3px solid #edab20;
  box-shadow: 2px 2px 25px rgba(0, 0, 0, 1);
  transition: all 0.5s ease-in;
  z-index:1;
}

.socials:hover {
  box-shadow: 2px 2px 25px rgba(255, 255, 255, 1);
}

/*the social buttons*/
.fa-brands {
  background-color: white;
  color: #edab20;
  width: 55px;
  height: 55px;
  line-height: 50px;
  margin: 10px 10px 5px;
  border-radius: 75px;
  border: 2px solid #edab20;
  text-align: center;
  overflow: hidden;
  line-height:55px;
  align-content: center;
}

.socials a .fa-brands:hover {
  transform:scale(1.3);
  background-color: #edab20;
  color: white;
  border: 2px solid white;
}

@media (max-width: 500px) {
  .socials {
      flex-direction: column;
  }
}

@media screen and (max-width: 1000px) {
  #magicbox{bottom:50px;}
}

/*Images box in the footer*/
#magicbox {
  position: relative;
  overflow: visible;
  width: 100%;
  /*Optionally, set a min-height so the container is large enough */
  min-height: 275px;
  left:35%;
}
.magic{
  position: absolute;
  bottom:0;
  opacity: 0;
  width:30%;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

#image0.magic {
  opacity: 1 !important;
  transform: none !important;
}
/* When the appear class is added, fade in and slide to position */
.magic.appear {
  opacity: 1;
  transform: translateY(0);
}
#image1,#image2,#image3,#image4,#image5,#image6{
  transform: rotate(1deg);
}

I already tried lots of things like left:50% and translateY:-50% and it doesnt work a all.

This is what happens:

how it is zoomed in

And this i what im trying to achieve:

how it should always be (now it works only at zoom 100%)

Upvotes: 1

Views: 46

Answers (1)

Anurag
Anurag

Reputation: 83

You're on the right track! The issue likely comes from a mix of positioning methods and percentages that don’t scale well together. Here are a few key fixes:

1. Fixing Center Alignment Use display: flex and justify-content: center on the container that holds both .socials and #magicbox. 2. Keeping the Figure Under the Socials Instead of using bottom: -45px;
on .footer,
try adding margin-top to #magicbox. Use position: absolute only if necessary;

otherwise,
flexbox or grid will be more predictable. 3. Making It Responsive Instead of left: 35% in #magicbox,
use margin: auto and text-align: center to keep it in place. 
or add this css
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      min-height: 100vh;
      background-color: #f4f4f4;
    }
    
    .hiddenBottom {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .socials {
      position: relative;
      z-index: 1;
    }
    
    #magicbox {
      position: relative;
      width: auto;
      min-height: 275px;
      margin-top: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .magic {
      position: absolute;
      bottom: 0;
      width: 30%;
    }

Upvotes: 0

Related Questions