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





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















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!










share|improve this question































    1















    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!










    share|improve this question



























      1












      1








      1


      1






      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!










      share|improve this question
















      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!






      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>





      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>






      html css reactjs






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 3 at 6:34









      JustCase

      446516




      446516










      asked Jan 3 at 3:20









      Manu De QuevedoManu De Quevedo

      156




      156
























          1 Answer
          1






          active

          oldest

          votes


















          2














          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>








          share|improve this answer


























          • Thank you so much, I was able to set the images as in my example image, but I have one more question, if you see, all those images have a white border, how can I make that possible mate?

            – Manu De Quevedo
            Jan 3 at 5:30






          • 1





            Good Morning, do to the same way only that using z-index, you define divs with white border and then it displaces them and uses z-index in the images to overlap the divs with white border.

            – JustCase
            Jan 3 at 12:02











          • I've been trying to replicate exactly the same as for the images with the only difference that I'm not using position: absolute, just setting a border, playing with the z-index and with top, bottom left, right properties as well, but whenever I do that, all images starts getting messy. Here's the code: codepen.io/ManudeQuevedo/pen/bOaJRp

            – Manu De Quevedo
            Jan 5 at 0:57












          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015904%2fhow-to-customise-an-image-with-css-on-a-react-app-application%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          2














          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>








          share|improve this answer


























          • Thank you so much, I was able to set the images as in my example image, but I have one more question, if you see, all those images have a white border, how can I make that possible mate?

            – Manu De Quevedo
            Jan 3 at 5:30






          • 1





            Good Morning, do to the same way only that using z-index, you define divs with white border and then it displaces them and uses z-index in the images to overlap the divs with white border.

            – JustCase
            Jan 3 at 12:02











          • I've been trying to replicate exactly the same as for the images with the only difference that I'm not using position: absolute, just setting a border, playing with the z-index and with top, bottom left, right properties as well, but whenever I do that, all images starts getting messy. Here's the code: codepen.io/ManudeQuevedo/pen/bOaJRp

            – Manu De Quevedo
            Jan 5 at 0:57
















          2














          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>








          share|improve this answer


























          • Thank you so much, I was able to set the images as in my example image, but I have one more question, if you see, all those images have a white border, how can I make that possible mate?

            – Manu De Quevedo
            Jan 3 at 5:30






          • 1





            Good Morning, do to the same way only that using z-index, you define divs with white border and then it displaces them and uses z-index in the images to overlap the divs with white border.

            – JustCase
            Jan 3 at 12:02











          • I've been trying to replicate exactly the same as for the images with the only difference that I'm not using position: absolute, just setting a border, playing with the z-index and with top, bottom left, right properties as well, but whenever I do that, all images starts getting messy. Here's the code: codepen.io/ManudeQuevedo/pen/bOaJRp

            – Manu De Quevedo
            Jan 5 at 0:57














          2












          2








          2







          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>








          share|improve this answer















          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>








          .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>





          .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>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Jan 3 at 4:34

























          answered Jan 3 at 4:12









          JustCaseJustCase

          446516




          446516













          • Thank you so much, I was able to set the images as in my example image, but I have one more question, if you see, all those images have a white border, how can I make that possible mate?

            – Manu De Quevedo
            Jan 3 at 5:30






          • 1





            Good Morning, do to the same way only that using z-index, you define divs with white border and then it displaces them and uses z-index in the images to overlap the divs with white border.

            – JustCase
            Jan 3 at 12:02











          • I've been trying to replicate exactly the same as for the images with the only difference that I'm not using position: absolute, just setting a border, playing with the z-index and with top, bottom left, right properties as well, but whenever I do that, all images starts getting messy. Here's the code: codepen.io/ManudeQuevedo/pen/bOaJRp

            – Manu De Quevedo
            Jan 5 at 0:57



















          • Thank you so much, I was able to set the images as in my example image, but I have one more question, if you see, all those images have a white border, how can I make that possible mate?

            – Manu De Quevedo
            Jan 3 at 5:30






          • 1





            Good Morning, do to the same way only that using z-index, you define divs with white border and then it displaces them and uses z-index in the images to overlap the divs with white border.

            – JustCase
            Jan 3 at 12:02











          • I've been trying to replicate exactly the same as for the images with the only difference that I'm not using position: absolute, just setting a border, playing with the z-index and with top, bottom left, right properties as well, but whenever I do that, all images starts getting messy. Here's the code: codepen.io/ManudeQuevedo/pen/bOaJRp

            – Manu De Quevedo
            Jan 5 at 0:57

















          Thank you so much, I was able to set the images as in my example image, but I have one more question, if you see, all those images have a white border, how can I make that possible mate?

          – Manu De Quevedo
          Jan 3 at 5:30





          Thank you so much, I was able to set the images as in my example image, but I have one more question, if you see, all those images have a white border, how can I make that possible mate?

          – Manu De Quevedo
          Jan 3 at 5:30




          1




          1





          Good Morning, do to the same way only that using z-index, you define divs with white border and then it displaces them and uses z-index in the images to overlap the divs with white border.

          – JustCase
          Jan 3 at 12:02





          Good Morning, do to the same way only that using z-index, you define divs with white border and then it displaces them and uses z-index in the images to overlap the divs with white border.

          – JustCase
          Jan 3 at 12:02













          I've been trying to replicate exactly the same as for the images with the only difference that I'm not using position: absolute, just setting a border, playing with the z-index and with top, bottom left, right properties as well, but whenever I do that, all images starts getting messy. Here's the code: codepen.io/ManudeQuevedo/pen/bOaJRp

          – Manu De Quevedo
          Jan 5 at 0:57





          I've been trying to replicate exactly the same as for the images with the only difference that I'm not using position: absolute, just setting a border, playing with the z-index and with top, bottom left, right properties as well, but whenever I do that, all images starts getting messy. Here's the code: codepen.io/ManudeQuevedo/pen/bOaJRp

          – Manu De Quevedo
          Jan 5 at 0:57




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015904%2fhow-to-customise-an-image-with-css-on-a-react-app-application%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          MongoDB - Not Authorized To Execute Command

          in spring boot 2.1 many test slices are not allowed anymore due to multiple @BootstrapWith

          How to fix TextFormField cause rebuild widget in Flutter