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