CODEWITHSUNDEEP
javascripthtmljquerycsssass
CodeUser2300
CodeUser2300

Reputation: 53

HTML/CSS: Image Border

I have the following code:

@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
  max-width: 460px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.square:hover {
  -webkit-transform: translate(20px, -10px);
  -ms-transform: translate(10px, -10px);
  transform: translate(10px, -10px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.square .square-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 5px solid #555;
}

.square .square-details {
  padding: 20px 30px 30px;
}

.h11 {
  margin: auto;
  text-align: left;
  font-family: 'Merriweather', serif;
  font-size: 24px;
}

p0 {
  text-align: justify;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #C8C8C8;
  line-height: 18px;
  margin-top: 10px;
  display: block;
}

.button56 {
  background-color: #0563bb;
  color: white;
  width: 100px;
  padding: 10px 18px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 12px;
  margin-top: 18px;
  margin-bottom: 0;
  cursor: pointer;
  font-family: 'merriweather';
}

.button56:hover {
  opacity: 0.9;
  color: white;
}

.square1:hover {
  -webkit-transform: translate(20px, -10px);
  -ms-transform: translate(10px, -10px);
  transform: translate(10px, -10px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.square1 .square-image1 img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 5px solid #555;
}

.square1 .square-details1 {
  padding: 20px 30px 30px;
}

.square1 {
  max-width: 460px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media screen and (max-width: 480px) {
  .square1 {
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    margin-top: 54px;
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 480px) {
  .square1 .square-image1 img {
    height: 230px !important;
    border: 5px solid #555;
    padding-left: 0;
    padding-right: 0;
  }
  .square .square-image img {
    height: 230px !important;
    border: 5px solid #555;
    padding-left: 0;
    padding-right: 0;
  }
  .square,
  .square1 {
    max-width: 460px;
    width: 100%;
  }
  .h11 {
    width: 100% !important;
  }
}

.containerE {
  --bs-gutter-x: 1.5rem;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 480px) {
  .containerE {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: center;
    overflow: hidden;
  }
}
<section>
  <div class="section-title">
    <h2>Featured Blogs Of The Day</h2>
  </div>
  <div class="container" style="display: flex; justify-content: space-between;">
    <div class="containerE" style="display: flex; justify-content: space-between;">
      <div class="square">
        <div class="square-image">
          <img src="https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
        </div>

        <div class="square-details">
          <h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
          <p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
          <div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div>
        </div>

      </div>
      <div class="square1">
        <div class="square-image1">
          <img src="https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
        </div>

        <div class="square-details1">
          <h3 class="h11">My Career Advice To You: Take These Steps...</h3>
          <p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
          <div><a href="https://m-hussainomer03.medium.com/my-career-advice-to-you-take-these-steps-to-ultimate-prosperity-6c0687ce9c9f" target="_" class="button56">Read More</a></div>
        </div>

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

When you run the above code, open it on a new page, and then zoom out to 75%, you can start to see white lines show up around the border of the image. I would like to remove that. How would I do that?

If you are still unsure of what white lines I am talking about, then refer to the following image:

enter image description here

The white lines are around the border of the image. How would I remove them? The white line also might be the space between the image and the border, but is there any way to remove it?

Any suggestions?

Upvotes: 1

Views: 63

Answers (1)

Spectric
Spectric

Reputation: 32002

This is caused by some strange border rendering by the browser.

To solve this, you can apply an inset box shadow such that it isn't noticeable yet it masks the spacing when zooming out:

@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
  max-width: 460px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.square:hover {
  -webkit-transform: translate(20px, -10px);
  -ms-transform: translate(10px, -10px);
  transform: translate(10px, -10px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.square .square-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 5px solid #555;
}

.square .square-details {
  padding: 20px 30px 30px;
}

.h11 {
  margin: auto;
  text-align: left;
  font-family: 'Merriweather', serif;
  font-size: 24px;
}

p0 {
  text-align: justify;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #C8C8C8;
  line-height: 18px;
  margin-top: 10px;
  display: block;
}

.button56 {
  background-color: #0563bb;
  color: white;
  width: 100px;
  padding: 10px 18px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 12px;
  margin-top: 18px;
  margin-bottom: 0;
  cursor: pointer;
  font-family: 'merriweather';
}

.button56:hover {
  opacity: 0.9;
  color: white;
}

.square1:hover {
  -webkit-transform: translate(20px, -10px);
  -ms-transform: translate(10px, -10px);
  transform: translate(10px, -10px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.square1 .square-image1 img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 5px solid #555;
}

.square1 .square-details1 {
  padding: 20px 30px 30px;
}

.square1 {
  max-width: 460px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media screen and (max-width: 480px) {
  .square1 {
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    margin-top: 54px;
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 480px) {
  .square1 .square-image1 img {
    height: 230px !important;
    border: 5px solid #555;
    padding-left: 0;
    padding-right: 0;
  }
  .square .square-image img {
    height: 230px !important;
    border: 5px solid #555;
    padding-left: 0;
    padding-right: 0;
  }
  .square,
  .square1 {
    max-width: 460px;
    width: 100%;
  }
  .h11 {
    width: 100% !important;
  }
}

.containerE {
  --bs-gutter-x: 1.5rem;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 480px) {
  .containerE {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: center;
    overflow: hidden;
  }
}

img{
    box-shadow: inset 0 0 10px black;
}
<section>
  <div class="section-title">
    <h2>Featured Blogs Of The Day</h2>
  </div>
  <div class="container" style="display: flex; justify-content: space-between;">
    <div class="containerE" style="display: flex; justify-content: space-between;">
      <div class="square">
        <div class="square-image">
          <img src="https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
        </div>

        <div class="square-details">
          <h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
          <p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
          <div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div>
        </div>

      </div>
      <div class="square1">
        <div class="square-image1">
          <img src="https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
        </div>

        <div class="square-details1">
          <h3 class="h11">My Career Advice To You: Take These Steps...</h3>
          <p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
          <div><a href="https://m-hussainomer03.medium.com/my-career-advice-to-you-take-these-steps-to-ultimate-prosperity-6c0687ce9c9f" target="_" class="button56">Read More</a></div>
        </div>

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

Comparison

With inset box-shadow Without inset box-shadow
enter image description here enter image description here

(click to enlarge)

Upvotes: 1

Related Questions