Search code examples
htmlcssimagedisplayoverlap

Button is not inline with the image

I am adding a button that overlaps an image and for some reason, the button is displaying a bit below my image. I want it to perfectly fit on top of the image. I've tried playing with the margins but can't find what the issue might be. Any suggestions? I have added pictures below and a link to my code on fiddle http://jsfiddle.net/0jftos7z/12/

picture of the button going past the image

/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Lemon&family=Open+Sans:wght@400;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: #38afff;
  --first-color-alt: hsl(204, 94%, 52%);
  --title-color: hsl(233, 32%, 15%);
  --text-color: hsl(233, 4%, 35%);
  --body-color: #daeef6;

  --first-hue: 250;
  --sat: 66%;
  --lig: 75%;
  --second-hue: 219;

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Open Sans', sans-serif;
  --second-font: 'Lemon', cursive;
  --biggest-font-size: 2.25rem;
  --normal-font-size: .938rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

  
img {
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none

}

/* Responsive typography */
@media screen and (min-width: 1224px) {
  :root {
    --biggest-font-size: 3.5rem;
    --normal-font-size: 1rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: var(--body-color);
  color: var(--text-color);
  overflow-x: hidden;
  position: relative;
}



img {
  max-width: 100%;
  height: auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1024px;
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}

.main {
  overflow: hidden; /* For the animations */
}

.section__blog {
  padding: 4.5rem 0 2rem;
}

.container__blog {
  max-width: 1024px;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.grid__blog {
  display: grid;
  gap: 1.5rem;
}



/*=============== BLOG ===============*/
.blog__container {
  padding-bottom: 2rem;
}

.blog__content {
  row-gap: 3rem;
}

.blog__image {
  position: relative;
  margin-bottom: 1.5rem;
}

.blog__img {
  border-radius: .5rem;
  box-shadow: 0 4px 16px hsl(355deg 25% 15% / 10%);
}

.blog__button {
  display: inline-flex;
  background-color: #fff;
  padding: 1.15rem;
  border-radius: .5rem 0 .5rem 0;
  font-size: 2rem;
  color: var(--title-color);
  position: absolute;
  right: 0;
  bottom: 0;
  
}

.blog__button i {
  transform: rotate(-30deg);
  transition: .4s;
}

.blog__button:hover i {
  transform: rotate(-30deg) translateX(.25rem);
}

.blog__title {
  font-size: var(--h2-font-size);
  margin-bottom: .75rem;
}

.blog__description {
  margin-bottom: 1.5rem;
}

.blog__footer, 
.blog__reaction {
  display: flex;
  align-items: center;
}

.blog__footer {
  column-gap: 1.5rem;
}

.blog__reaction {
  column-gap: .25rem;
}

.blog__reaction i {
  font-size: 1.25rem;
}

.blog__reaction span {
  font-size: var(--small-font-size);
}








/* For small devices */
@media screen and (max-width: 375px) {
 

  .container__blog {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  
  .container {
    margin-left: 1rem;
    margin-right: 1rem;
  }

}



@media screen and (max-width: 445px) {
  .container {
    margin-left: 1rem;
    margin-right: 1rem;
  }
 
  
}


@media screen and (min-width: 576px) {

  .blog__content {
    grid-template-columns: 450px;
    justify-content: center;
  }

}










@media screen and (min-width: 1048px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }
  .container__blog {
    margin-left: auto;
    margin-right: auto;
  }
  

  .blog__container {
    padding-bottom: 5rem;
  }
  .blog__content {
    grid-template-columns: repeat(2, 450px);
    column-gap: 5rem;
    padding-top: 2rem;
  }

}
<section class="blog section__blog" id="blog">
    <div class="blog__container container__blog">
        <h2 class="section__title">
            Important Articles and Statistics
        </h2>

        <div class="blog__content grid__blog">
            <article class="blog__card">
                <div class="blog__image">
                    <img src="https://st.depositphotos.com/1003098/2216/i/450/depositphotos_22166395-stock-photo-colleague-comforting-upset-doctor.jpg" alt="image of sad women" class="blog__img">
                    <a href="https://www.cdc.gov/std/statistics/2021/default.htm" class="blog__button">
                        <i class='bx bx-right-arrow-alt'></i>
                    </a>
                </div>

                <div class="blog__data">
                    <h2 class="blog__title">
                        STD Surveillance Data
                    </h2>
                    <p class="blog__description">
                        Preliminary data showing increase of STD spread from 2017 to 2021.
                    </p>

                    <div class="blog__footer">
                        <div class="blog__reaction">
                            <i class='bx bx-share'></i>
                            <span>Share</span>
                        </div>
                        <div class="blog__reaction">
                            <i class='bx bx-repost' ></i>
                            <span>Repost</span>
                        </div>
                    </div>
                </div>
            </article>

            <article class="blog__card">
                <div class="blog__image">
                    <img src="https://st.depositphotos.com/1003098/2216/i/450/depositphotos_22166395-stock-photo-colleague-comforting-upset-doctor.jpg" alt="photo of doctor telling patient bad news " class="blog__img">
                    <a href="https://www.cdc.gov/media/releases/2021/p0125-sexualy-transmitted-infection.html#:~:text=CDC%20Newsroom%20Releases-,CDC%20estimates%201%20in%205%20people%20in,have%20a%20sexually%20transmitted%20infection&text=New%20data%20published%20by%20the,sexually%20transmitted%20infection%20(STI)." class="blog__button">
                        <i class='bx bx-right-arrow-alt'></i>
                    </a>
                </div>

                <div class="blog__data">
                    <h2 class="blog__title">
                        CDC study showing prevalence for STD's
                    </h2>
                    <p class="blog__description">
                        The CDC estimates that 1 in 5 people in the U.S. have a sexually transmitted infection. New data provides the clearest picture to date of how costly and common STIs are in the U.S.
                    </p>

                    <div class="blog__footer">
                        <div class="blog__reaction">
                            <i class='bx bx-share'></i>
                            <span>Share</span>
                        </div>
                        <div class="blog__reaction">
                            <i class='bx bx-repost' ></i>
                            <span>Repost</span>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </div>
</section>

Solution

  • You are seeing the white-space under the image, because it is rendered like an inline element (just like a letter).

    To fix this simply change the image to an block element like shown below:

    img {
  display: block;
}