• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Photo Collage in Bootstrap...possible?

Community Beginner ,
May 29, 2019 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

Views

1.3K

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
community guidelines

correct answers 1 Correct answer

LEGEND , May 29, 2019 May 29, 2019

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 rot

...

Votes

Translate

Translate
LEGEND ,
May 29, 2019 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.

Votes

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
community guidelines
Community Beginner ,
May 29, 2019 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

Votes

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
community guidelines
LEGEND ,
May 29, 2019 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.

Votes

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
community guidelines
Community Expert ,
May 29, 2019 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Adobe Employee ,
May 29, 2019 May 29, 2019

Copy link to clipboard

Copied

LATEST

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

Votes

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
community guidelines