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;
}
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!
html css reactjs
add a comment |
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!
html css reactjs
add a comment |
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!
html css reactjs
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
html css reactjs
edited Jan 3 at 6:34


JustCase
446516
446516
asked Jan 3 at 3:20
Manu De QuevedoManu De Quevedo
156
156
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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>
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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>
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
add a comment |
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>
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
add a comment |
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>
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>
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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