bootstrap different shaped images

Question

I built this mock-up:

enter image description here

I was wondering if this type of gallery is possible to build with bootstrap, I did not start to code yet because I think that it will not work because of the rows.
I would like some second opinions, from people who have worked with bootstrap for longer than me.

See [this](http://stackoverflow.com/a/26554491/3436942) for an idea as to how to achieve this. — jbutler483, Apr 15 '15 at 16:30
Yep that's is similar to what I what to achieve, just have to try to make it responsive, thank you so much :) — Nuno cruz, Apr 15 '15 at 16:43
@Nunocruz Why, isn't the answer in the linked question responsive? It uses percent units .. and seems pretty much responsive to me .. — Max Payne, Apr 15 '15 at 17:04

score 1 · Accepted Answer · answered May 14 '15 at 23:14

I found something that actualy works!! and it's responsive! :D

enter image description here

.poligono, .poligono div {
    margin: 0 auto;
    transform-origin: 50% 50%;
    overflow: hidden;
    width: 250px;
    height: 250px;
}
.poligono {
    transform: rotate(45deg) translateY(10px);
}
.poligono .los1 {
    width: 355px;
    height: 355px;
    transform: rotate(-45deg) translateY(-74px);
}
.poligono .los1 img {
    width: 100%;
    height: auto;
    -moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
}

.poligono:hover img {
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}



<div id="projects" class="projects">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-9 col-md-3">
                <h2>Projects</h2>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
               <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                        <p class="descricao">Cenas maradas acontecem</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-offset-2 col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
         </div>

         <div class="row">
            <div class="col-md-4">
               <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-offset-2 col-md-4">
                <div class="poligono img-responsive">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono img-responsive">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row margin-bottom">
            <div class="col-md-4">
               <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

score 0 · Answer 2 · answered Apr 15 '15 at 15:45

If you are asking if there is a default bootstrap for this the answer is no. But yes this is possible with your own css.

I don't see why not you could not skew the image with something like the following:

img.tilted{
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg); 
}

If you want this "mask like behaviour" i don't see why you couldn't put all the images on a layer bellow and put a transparent image on the top

Or you can try to css clip it like this http://www.html5rocks.com/en/tutorials/masking/adobe/

bootstrap different shaped images

2 Answers2