CODEWITHSUNDEEP
htmlcss
BeerusDev
BeerusDev

Reputation: 1509

No Horizontal Space between Divs

I have these two images that I am using as buttons to redirect users. I had to change my HTML code so I can have the proper transitions/animations over my images. Now that I have altered it, I cannot get my images to properly space eachother out in the row they are currently in, they are hugging the left. Whenever I add any CSS to adjust, it may partially adjust it, but then the overlay expands over more than just the image.

.landinghead{
  text-align: center;
  font-size: 30px;
}

.projectInfo{
  text-align: center;
  font-size: 15px;
  margin-top: -20px;
}

.container {
    display: flex;
    position: relative;
}

.image{
  position: relative;
  width: 400px;
  display: flex;
  justify-content: center;
  
}

.image__img{
  display: block;
  width: 100%;
  height: 100%;
}

.image__overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-family: 'Quicksand', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}

.image__overlay > * {
  transform: translateY(20px);
  transition: transform 0.25s;
}

.image__overlay:hover{
  opacity: 1;
}

.image__overlay:hover > *{
  transform: translateY(0);
}

.image__title{
  font-size: 2em;
  font-weight: bold;
}

.image__description{
  font-size: 1.25em;
  margin-top: 0.25em;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
    <h3 class="landinghead">Projects Landing Page</h3>
    <p class ="projectInfo">Here you will find a collection of Active/Ongoing Projects</p>
<div class="center container">
        <div class="image">
        <a href="www.google.com">
            <img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" alt="Army"/>
            <div class="image__overlay">
                <div class="image__title">Army</div>
                <p class="image__description">
                Click here to be redirected to the Army site.
                </p>
            </div>
            </a>
        </div>
        <div class="image">
          <a href="www.google.com">
            <img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/20/153dc153/max1200.jpg" alt="Army"/>
            <div class="image__overlay">
                <div class="image__title">USMC</div>
                <p class="image__description">
                Click here to be redirected to the USMC site.
                </p>
            </div>
            </a>
        </div>
    </div>
</body>

Upvotes: 0

Views: 49

Answers (1)

Tanner Dolby
Tanner Dolby

Reputation: 4421

Since you already have a Flexbox container, you can just add justify-content: space-evenly to .container and allow the flex items to be "spaced evenly" in the row. If you wanted them to be centered in the row, use justify-content: center.

.landinghead{
  text-align: center;
  font-size: 30px;
}

.projectInfo{
  text-align: center;
  font-size: 15px;
  margin-top: -20px;
}

.container {
    display: flex;
    justify-content: space-evenly;
    position: relative;
}

.image{
  position: relative;
  width: 400px;
  display: flex;
  justify-content: center;
  
}

.image__img{
  display: block;
  width: 100%;
  height: 100%;
}

.image__overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-family: 'Quicksand', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}

.image__overlay > * {
  transform: translateY(20px);
  transition: transform 0.25s;
}

.image__overlay:hover{
  opacity: 1;
}

.image__overlay:hover > *{
  transform: translateY(0);
}

.image__title{
  font-size: 2em;
  font-weight: bold;
}

.image__description{
  font-size: 1.25em;
  margin-top: 0.25em;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
    <h3 class="landinghead">Projects Landing Page</h3>
    <p class ="projectInfo">Here you will find a collection of Active/Ongoing Projects</p>
<div class="center container">
        <div class="image">
        <a href="www.google.com">
            <img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" alt="Army"/>
            <div class="image__overlay">
                <div class="image__title">Army</div>
                <p class="image__description">
                Click here to be redirected to the Army site.
                </p>
            </div>
            </a>
        </div>
        <div class="image">
          <a href="www.google.com">
            <img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/20/153dc153/max1200.jpg" alt="Army"/>
            <div class="image__overlay">
                <div class="image__title">USMC</div>
                <p class="image__description">
                Click here to be redirected to the USMC site.
                </p>
            </div>
            </a>
        </div>
    </div>
</body>

If the space between each image in the row with justify-content: space-evenly is too much, then just use justify-content: center and add some left/right margin to the .image containers.

.landinghead{
  text-align: center;
  font-size: 30px;
}

.projectInfo{
  text-align: center;
  font-size: 15px;
  margin-top: -20px;
}

.container {
    display: flex;
    justify-content: center;
    position: relative;
}

.image{
  position: relative;
  width: 400px;
  display: flex;
  justify-content: center;
  margin: 0 .5rem;
  
}

.image__img{
  display: block;
  width: 100%;
  height: 100%;
}

.image__overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-family: 'Quicksand', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}

.image__overlay > * {
  transform: translateY(20px);
  transition: transform 0.25s;
}

.image__overlay:hover{
  opacity: 1;
}

.image__overlay:hover > *{
  transform: translateY(0);
}

.image__title{
  font-size: 2em;
  font-weight: bold;
}

.image__description{
  font-size: 1.25em;
  margin-top: 0.25em;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
    <h3 class="landinghead">Projects Landing Page</h3>
    <p class ="projectInfo">Here you will find a collection of Active/Ongoing Projects</p>
<div class="center container">
        <div class="image">
        <a href="www.google.com">
            <img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" alt="Army"/>
            <div class="image__overlay">
                <div class="image__title">Army</div>
                <p class="image__description">
                Click here to be redirected to the Army site.
                </p>
            </div>
            </a>
        </div>
        <div class="image">
          <a href="www.google.com">
            <img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/20/153dc153/max1200.jpg" alt="Army"/>
            <div class="image__overlay">
                <div class="image__title">USMC</div>
                <p class="image__description">
                Click here to be redirected to the USMC site.
                </p>
            </div>
            </a>
        </div>
    </div>
</body>

Upvotes: 1

Related Questions