placing multiple stacked images into a blog

  • Author
  • #714840



    Its cool I might need a better bigger picture for my gravitater. and it does look cool Im almost there thanks to all of you.


    Do you have the Custom Design upgrade?

    On the image example you posted under uncategorized, All I’m seeing right now is the background that happens when you hover over the image. If you want to get rid of that, the following CSS will do it (if you have the custom design upgrade). I don’t know of anyway to get rid of it from within the image HTML coding.

    a:focus img[class*="align"], a:hover img[class*="align"], a:active img[class*="align"], a:focus img[class*="wp-image-"], a:hover img[class*="wp-image-"], a:active img[class*="wp-image-"], #content .gallery .gallery-icon a:focus img, #content .gallery .gallery-icon a:hover img, #content .gallery .gallery-icon a:active img {
    background: none;
    border-color: transparent;


    Hi the sacred path

    Looks like I will have to upgrade to get this to do what I would like with this issue, I will try some things over the next few days and see how it goes.

    Thanks for the help.



    You can put the above code into the CSS edit window at appearance > custom design > CSS tab and use the preview function to take a look at it. You might need to force refresh the preview page as it sometimes takes that to show the actual change.


    I experimented with this a little. Totally fun. :) It won’t tilt the images, but it will make a nice looking stack of images. I’d be interested to see if you decide to try it out!

    First, make a post with a gallery in it and make sure to set columns to “1” when you add the gallery:

    Then add this to the Appearance → Custom Design → CSS page and click Preview:

    #content .gallery .gallery-icon {
        position: relative;
        background: #fff;
        border: 1px solid #fff;
        -moz-box-shadow: 0px 2px 10px #333;
        -webkit-box-shadow: 0px 2px 10px #333;
        box-shadow: 0px 2px 10px #333;
        float: left;
        padding: 5px 5px 10px 5px;
    #content .gallery .gallery-icon img {
        border: none;
        padding: 0px;

    Note: the 2nd rule in this CSS is specific to Twenty Eleven. It removes some extra borders and padding from gallery images.

    If you do a single column stack as suggested above, you’ll probably want to float the stack left too:

    #content .gallery {

    Note: you may need to adjust the width depending on your media size settings.


    But the easy way is the one designsimply originally suggested: you edit the images in Photoshop, rotate them, turn them into one composite image (as you had already done), then simply add a dropshadow effect (Layer > Layer Style).



    Hi All

    I Think I will try through Photoshop. as I already have the basic idea and if needed I will have to upgrade to place it into my page.

    I will definitely be trying it on my next blog Durban – South Africa I have some great images that will work well.

    I want to thank you all for everything you have suggested and will try them all.



    I know you’re after just one thing – vertically stacked images. In the event you get tired of that some day, take a look at that gives you flexibility to create various different kinds of stacked photographs.

    As a professional photographer, I take the less aesthetic approach by keeping focus on the images instead of layout. If you work with a lot more photographs than 4 per blog, say, 20 to 30 … I wrote about the method I use that easily inserts this many photos



    Hi Shimworld

    Thanks for the advise I have a Mac and I am not sure the Windows program will work although the shape collage has some nice looking merits.

    I am not a professional yet even though that is one area I hope to move towards.
    I have a web site and now have been starting my blog. I have not yet sold even one of my images as I have not put myself out there enough.
    Im a bit scared that my images are not good enough.

    I am lucky I do travel a lot working on cruise ships although this makes me hard to contact at times.




    Picasa is better than photoshop in making collages, online(? Not sure!) or offline. I tried for a few minutes and created a collage.



    I’ve used photovisi too. :)

The topic ‘placing multiple stacked images into a blog’ is closed to new replies.