Search code examples
imagecsstwitter-bootstrapimage-gallerycss-shapes

bootstrap different shaped images

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.

Solution

  • 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>