Highlighted

Photo Collage in Bootstrap...possible?

New Here ,
May 29, 2019

Copy link to clipboard

Copied

hello again...

not talking about a responsive grid here, where images are fully separated from each other & fixed in their own block...but rather a typical photo collage, similar to magazine page design, where images *overlap* each other.  Is this possible, in bootstrap (or any other form that can be incorporated into a bootstrap site)...???

thanx,

mf

To target a specific image using css requires an attribute selector, e.g. -

img[src="file_path_to_image"]

{

css goes here

}

This is probably the easiest method of targeting the css to a specific image. Replace the file_path_to_image with the exact same file path as used in your html code, complete with file extension, (jpg, png, etc).

The specific css would be a positive or negative value for the margin-top, margin-right, margin-bottom, margin-left. To move the image in a specific direction.

As for rotating the image, (you can also scew, or animate using css) use css transform, see -

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Remember though, that if you change an image, you must also change the file path in the css if necessary.

Views

519

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Photo Collage in Bootstrap...possible?

New Here ,
May 29, 2019

Copy link to clipboard

Copied

hello again...

not talking about a responsive grid here, where images are fully separated from each other & fixed in their own block...but rather a typical photo collage, similar to magazine page design, where images *overlap* each other.  Is this possible, in bootstrap (or any other form that can be incorporated into a bootstrap site)...???

thanx,

mf

To target a specific image using css requires an attribute selector, e.g. -

img[src="file_path_to_image"]

{

css goes here

}

This is probably the easiest method of targeting the css to a specific image. Replace the file_path_to_image with the exact same file path as used in your html code, complete with file extension, (jpg, png, etc).

The specific css would be a positive or negative value for the margin-top, margin-right, margin-bottom, margin-left. To move the image in a specific direction.

As for rotating the image, (you can also scew, or animate using css) use css transform, see -

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Remember though, that if you change an image, you must also change the file path in the css if necessary.

Views

520

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 29, 2019 0
LEGEND ,
May 29, 2019

Copy link to clipboard

Copied

Bootstrap is nothing but html/css/js, so writting your own css rules to do this is possible.

All it requires is the use of negative margins, and css transforms applied to the appropriate images. The problems arise with writting the css for each layout, as you would have to set the css back to the defaults then write the css for each device.

I'm not cetain how such a layout would look on a smartphone, but my instincts say it would look terrible.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2019 0
New Here ,
May 29, 2019

Copy link to clipboard

Copied

thanx...

can you give me an example of such a code (or point me in the direction of how I might get started)?

thanx again,

mf

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2019 0
LEGEND ,
May 29, 2019

Copy link to clipboard

Copied

To target a specific image using css requires an attribute selector, e.g. -

img[src="file_path_to_image"]

{

css goes here

}

This is probably the easiest method of targeting the css to a specific image. Replace the file_path_to_image with the exact same file path as used in your html code, complete with file extension, (jpg, png, etc).

The specific css would be a positive or negative value for the margin-top, margin-right, margin-bottom, margin-left. To move the image in a specific direction.

As for rotating the image, (you can also scew, or animate using css) use css transform, see -

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Remember though, that if you change an image, you must also change the file path in the css if necessary.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2019 0
Adobe Community Professional ,
May 29, 2019

Copy link to clipboard

Copied

OPTION 1: Create a collage in Photoshop and export as a large JPG.   To take it one step further, use the JPG as a backdrop for an SVG image map with hotspots that link out to individual slides in a Fancybox viewer. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2019 1
Adobe Employee ,
May 29, 2019

Copy link to clipboard

Copied

Hi Mark,

Thank you for reaching out. As you mentioned that you want to create a photo collage, I would suggest checking this article How To Create a Responsive Image Grid and see if that helps.

Additionally, as Nancy has suggested, there are different other Adobe application that you can use like Adobe Photoshop to create a photo collage of your choice.

Would you mind checking the links for how to create a Photo collage in Adobe Photoshop?

Please let me know if you need more info. I am happy to help.

Thanks,

Harshika

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2019 0