Gallery

by cintia_rodrigues

HTML

<div class="ctn"></div>


Colocar isto no html
*/<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700' rel='stylesheet' type='text/css'>*/

CSS

*{
margin:0;
padding:0;
}
.ctn {
    background-color:yellow;
	font-size:0;
}
a.box {
    width:20%;
    height:250px;
    background-color:red;
    display:inline-block;
    text-decoration:none;
    color:#fff;
    position:relative;
    overflow:hidden;
    font-size:0;
}
a.box span{
    display:block;
    width:100%;
    text-align:center;
    background:rgba(0,0,0,0.5);
    position:absolute;
    bottom:-125px;
    height:125px;
    line-height:125px;
    transition:all 200ms linear;
    font-size:25px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:700;
	text-transform:uppercase;
}
a.box:hover{
	-webkit-filter: grayscale(0.5);
 }
a.box:hover span{
    bottom:0;
}
@media all and (max-width:1000px){
    a.box{
        width:50%;
		display:inline-block;
    }
}
@media all and (max-width:500px){
    a.box{
        width:100%;
		display:block;
    }
}

JavaScript

$(document).ready(function () {

    var imagens = [{
        url: "http://static.pexels.com/wp-content/uploads/2015/02/arm-wrestling-bar-bet-44171-525x350.jpg",
        imagemSrc: "http://static.pexels.com/wp-content/uploads/2015/02/arm-wrestling-bar-bet-44171-525x350.jpg",
        label: "Luta de braços"
    },{
        url: "http://static.pexels.com/wp-content/uploads/2015/02/arm-wrestling-bar-bet-44171-525x350.jpg",
        imagemSrc: "http://static.pexels.com/wp-content/uploads/2015/02/arm-wrestling-bar-bet-44171-525x350.jpg",
        label: "Luta de braços"
    },  {
        url: "http://static.pexels.com/wp-content/uploads/2015/02/high-rise-holiday-hotel-4422-622x350.jpeg",
        imagemSrc: "http://static.pexels.com/wp-content/uploads/2015/02/high-rise-holiday-hotel-4422-622x350.jpeg",
        label: "Prédios"
    }, {
        url: "http://static.pexels.com/wp-content/uploads/2015/02/high-rise-holiday-hotel-4422-622x350.jpeg",
        imagemSrc: "http://static.pexels.com/wp-content/uploads/2015/02/high-rise-holiday-hotel-4422-622x350.jpeg",
        label: "Prédios"
    }, {
        url: "http://static.pexels.com/wp-content/uploads/2015/02/high-rise-holiday-hotel-4422-622x350.jpeg",
        imagemSrc: "http://static.pexels.com/wp-content/uploads/2015/02/high-rise-holiday-hotel-4422-622x350.jpeg",
        label: "Prédios"
    }];

    $(imagens).each(function (key, value) {
        $(".ctn").append("<a href='" + value.url + "' class='box' style='background:url(" + value.imagemSrc + ");'><span>" + value.label + "</span></a>");
    });
});