Why is my image becoming smaller when I move it using "top:" in CSS?-CodePudding

I'm trying to create an image slider for a web-page and I've got it functional but I'd like to move it down to the centre of the page.

Initially I attempted to do this using top: 50%; on .image-container { however I found that this decreased the image size (see pictures for before and after):

Before implementing top: 50%;: https://cdn.discordapp.com/attachments/629793987498082326/989474251104997386/unknown.png

After implementing top: 50%;: https://cdn.discordapp.com/attachments/629793987498082326/989474543724822559/unknown.png

.The-Area {
    min-height: 972px;
    width: 100%;
    background-image: linear-gradient(rgba(6,4,11,0.4),rgba(6,4,1,0.3)),url(images/thumbnail_IMG_3625.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}
.The-Area-Page-Head {
    text-align: center;
    background: #000000;
    color: #fff;
    font-size: 40px;
}
.minor-header-spacer .rectangle{
    height: 20px;
    width: 100%;
    background-color: #000000;
}
.slide-container {
    width: 800px;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-align: center;
}
.image-container {
    top: 20%;
    width: 2400px;
    height: 600px;
    position: relative;
    transition: left 2s;
    -webkit-transition: left 2s;
    -moz-transition: left 2s;
    -o-transition: left 2s;
}
.slider-image {
    float: left;
    margin: 0px;
    padding: 0px;
}
.button-container {
    top: -20px;
    position: relative;
}
.slider-button {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background-color: white;
}
#slider-image-1:target ~ .image-container{
    left: 0px;
}
#slider-image-2:target ~ .image-container {
    left: -800px;
}
#slider-image-3:target ~ .image-container {
    left: -1600px;
}

I then thought that this perhaps had something to do with the overflow value of the .slide-container { so I had a play around with overflow-y: and overflow-x:

Since for the slider to work, the images that slide into view are hidden via the overflow, I was hoping to make overflow-y: visible; and overflow-x: hidden; to allow the y-axis overflow to be visible but it only added a scroller to the image: https://cdn.discordapp.com/attachments/629793987498082326/989477233208983622/unknown.png

I then removed the height value within .slide-container { as I read that this was causing an issue with moving images after a page has been resized but this of course just bounced the whole slider up to the top.

At this point, I'm not sure what else to try and any assistance would be appreciated.

Here is the HTML incase the solution actually lies there or if it gives a greater insight into the issue at hand:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="with=device-width, intial-scale=1.0">
    <title>Estepona</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@300;700&display=swap" rel="stylesheet">
</head>

<body>

<section >

    <!-- Head -->

    <div ></div>

    <div >
        <div ></div>
    </div>

    <div >
        <h1>The Area</h1>
    </div>

    <div >
        <div ></div>
    </div>

    <div ></div>

    <!-- Body -->

    <div >

        <span id="slider-image-1"></span>
        <span id="slider-image-2"></span>
        <span id="slider-image-3"></span>

        <div >
            <img src="images/the_area/800x600_Wallpaper_Blue_Sky.png" >
            <img src="images/the_area/fdr5Z7.jpg" >
            <img src="images/the_area/wallpapersden.com_landscape-pixel-art_800x600.jpg" >
        </div>

        <div >
            <a href="#slider-image-1" ></a>
            <a href="#slider-image-2" ></a>
            <a href="#slider-image-3" ></a>
        </div>

    </div>


</section>

</body>

</html>

CodePudding user response：

Am not sure exactly what it is you want to achieve, but the explanation for the outcome is that:

Your "slide-container" has a fixed height of 600px with overflow hidden.
Your "image-container" is inside the "slide-container" and also has a fixed height of 600px;

Therefore, if you set top to 50%, the top will now be 300px below the top of the "slide-container". Then the top 300px of your "image-container" are shown from there with the bottom 300px being 'hidden' by virtue of using overflow hidden on the "slide-container".

If you've not already used it, try using jsfiddle.net to create a minimal version of your challenge where you can then play with it. You can also post links to that jsfiddle.net 'project' on this site so that user's can see exactly what your problem is, and potentially fix it and post a link back to the fix on jsfiddle.net in their answer.