-1

Here's the codepen if it's easier. I'm also a beginner, just a heads up.

http://codepen.io/anon/pen/yaRpPL

My problem is that every time I hover over this circle, it extends the page size large enough that a scroll bar comes up when the circle reaches max size. I don't know how to explain, I just don't want that to happen...

Also, I can't get the text in the center of that circle to appear directly in the center. I feel like I've tried every CSS property I could think of.

Lastly, any tips on getting that circle to stay in the center for most common screen resolutions would be greatly appreciated. I have the margins set to percentages and it seems to be okay.

HTML:

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Echoes from Firelink</title>
        <link href="homepage.css" type="text/css" rel="stylesheet">
        <link rel="shortcut icon" href="coiledsword.ico">
    </head>

    <header>
                <a href="homepage.htm" style="color:black">home | </a>
                <a href="homepage_easy.htm" style="color:black">lite version</a>
            </header><!--End header-->
    <body>
        <div id="background_container">
            <div id="content_container">
            <p>From Software homepage</p>
            </div>
        </div>
    </body>
</html>

CSS:

/* CSS page for the homepage. */

header {
    text-align: center;
    font-size: 10px;
}
#content_container {
    background-color: black;
    text-align:center;
    color: white;
    height: 200px;
    width: 200px;
    margin: 20% 45% 20% 45%;
    border-radius: 50%;
    transition: 2s;
}

#content_container:hover {
    transform: scale(1.4);
}
Colton Horvath
  • 25
  • 5
  • Transforms don't affect sizes of elements at all. It's an entirely **visual** effect. – Paulie_D Oct 18 '16 at 15:48
  • 1
    http://codepen.io/Paulie-D/pen/PGyQov – Paulie_D Oct 18 '16 at 15:49
  • Thanks! Do you have any tips on getting the circle to stay in the dead center of the screen? The x value is perfect but looking to get the y value the same. I was told that percentages wouldn't be the best idea... @Paulie_D – Colton Horvath Oct 18 '16 at 16:12
  • http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers – Paulie_D Oct 18 '16 at 16:16

1 Answers1

1

You need to change your margin, Do not use percentage values.

If you need to center your text just the code below to the parent element. 

display:flex;
justify-content:center;
align-items:center;

The css code: 

header {

    text-align: center;
    font-size: 10px;
}
#content_container {
   display:flex;
   justify-content:center;
   align-items:center;
    background-color: black;
    text-align:center;
    color: white;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    transition: 2s;
}

#content_container:hover {
    transform: scale(1.4);
}
MMJ
  • 279
  • 7
  • 23
  • Do you have any idea on why the page would extend during the transform? – Colton Horvath Oct 18 '16 at 16:04
  • Read this about [Centering](https://css-tricks.com/centering-css-complete-guide/). It is not actually extend, Just like what @Paulie_D said. – MMJ Oct 18 '16 at 16:14