CODEWITHSUNDEEP
htmlcssreactjs
user5978274
user5978274

Reputation:

How to customise an image with css on a react-app application?

I'm currently working on a website for a client, but I'm struggling on making an image grid like this:

example

However, the hardest parts for me to achieve are: Set a grid of 4 images, responsive, where I can move the border below the image.

I've tried to set each of the images inside a div tag which I give it a border. Since I'm pretty much new into coding, I'm not sure what else should I try.

div.composition {
  display: inline-block;
  float: right;
  position: relative;
}

img.composition-photo {
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0 auto;
  object-fit: cover;
  width: 250px;
  height: 250px;
  position: absolute;
}
<div className="composition">
  <div>
    <img src={ModelOne} alt="Modelo 1" className="composition-photo img-fluid" />
  </div>
  <div>
    <img src={ModelTwo} alt="Modelo 2" className="composition-photo img-fluid" />
  </div>
  <div>
    <img src={ModelThree} alt="Modelo 3" className="composition-photo img-fluid" />
  </div>
  <div>
    <img src={ModelFour} alt="Modelo 4" className="composition-photo img-fluid" />
  </div>
</div>

Thanks in advance for your valuable help!

Upvotes: 1

Views: 69

Answers (1)

Chance
Chance

Reputation: 1654

Maybe not the best way, but one of the ways would be this. I hope it helps.

.composition {
    position: relative;
    float: right;  
}

.composition-photo {
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0 auto;
  object-fit: cover;
  width: 250px;
  height: 250px;
}

.composition img:nth-child(1){
    position: absolute;
    top: 10px;
    right: 265px;
}
.composition img:nth-child(2){
    position: absolute;
    top: 0;
    right: 0;
}
.composition img:nth-child(3){
    position: absolute;
    top: 280px;
    right: 280px
}
.composition img:nth-child(4){
    position: absolute;
    top: 260px;
    right: 15px;
}
<div class="composition">
          <img src='https://guianoivaonline.com.br/wp-content/uploads/terno-para-noivo-18-700x467.jpg' alt="Modelo 1" class="composition-photo"/>
          <img src='https://guianoivaonline.com.br/wp-content/uploads/terno-para-noivo-18-700x467.jpg' alt="Modelo 2" class="composition-photo"/>
          <img src='https://guianoivaonline.com.br/wp-content/uploads/terno-para-noivo-18-700x467.jpg' alt="Modelo 3" class="composition-photo"/>
          <img src='https://guianoivaonline.com.br/wp-content/uploads/terno-para-noivo-18-700x467.jpg' alt="Modelo 4" class="composition-photo"/>
    </div>

Upvotes: 1

Related Questions