CODEWITHSUNDEEP
htmlcss
Lucas Thaynan
Lucas Thaynan

Reputation: 73

How to override elements with css

I'm trying to CSS put a yellow square below an image, as shown in the picture below, but I can't. Does anyone have any suggestions on how I can make this effect?

enter image description here

HTML:

<div class="photo-container">
     <picture class="photo-perfil">
           <img src="assets/photo-perfil.jpg" alt="photo">
     </picture>
</div>

CSS:

.photo-perfil {
    display: block;
    margin: 30px;
    border: 2px solid yellow;   
}

Upvotes: 0

Views: 86

Answers (2)

Terry
Terry

Reputation: 66228

You can use a pseudo-element to produce that additional visual decoration, with several tricks:

  • Use width: min-content on the parent to shrink-wrap it
  • Relatively position the <img> element so it will stack above the absolutely positioned pseudo-element

See proof-of-concept below:

.photo-perfil img {
  position: relative;
  display: block;
}

.photo-container {
  position: relative;
  width: min-content;
}

.photo-container::before {
  position: absolute;
  content: '';
  display: block;
  border: 2px solid yellow;
  width: 100%;
  height: 100%;
  transform: translate(16px, 16px);
  box-sizing: border-box;
}

body {
  background-color: #000;
}
<div class="photo-container">
  <picture class="photo-perfil">
    <img src="https://via.placeholder.com/150x150" alt="photo">
  </picture>
</div>

Upvotes: 2

dokgu
dokgu

Reputation: 6060

You could try doing:

.photo-perfil {
  display: inline-block;
  margin: 30px;
  border: 2px solid yellow;
}

img {
  margin-top: -20px;
  margin-left: -20px;
  padding-right: 20px;
  padding-bottom: 20px;
}

May not be the best solution but it does the job.

Upvotes: 1

Related Questions