<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="content">
<div id="title">
<h1>
2016 em Retrospectiva
</h1>
</div>
<div id="bestOf">
<h2>
Acontecimentos
</h2>
<div class="card" id="rubi">
<div class="img"></div>
<h3>
Rubi
</h3>
<h4>
#rubi .img {
background-image: url('https://scontent.fopo1-1.fna.fbcdn.net/v/t1.0-9/15037233_1243504275672905_7937640778594574067_n.jpg?oh=1a72472f6110c83b4f238e72fc5787ea&oe=58D8CD41');
}
#rubi.card:hover .img{
background-image: url('https://scontent.fopo1-1.fna.fbcdn.net/v/t1.0-9/13102693_1093113147378686_1844561900700545093_n.jpg?oh=5ba721e8339cff7dc8c415a57a66f46a&oe=591E801A')
}
#job .img {
background-image: url('https://lh3.ggpht.com/-qcZWhDSeJO8/V7ykWl_NuWI/AAAAAAAAIrE/URz3nwQwd28T5e2ViDZd2RBnbQq2-6yIACJkC/s512/photo');
}
#job.card:hover .img{
background-image: url('https://lh3.googleusercontent.com/TRtQhT_ejaW89nEV2BHrYu03DzUo6Zm_ycAz5sQRgjH2-SSylzbx_rRJAWemwgmvYe5kGse8bkNryTmL22cpzGNcfzPZkFWVVWtomaWsbDnm8SDnJ4xAcgHSKDDVkFAOdJeFFkrvR7cVyJwO-1lzZTZCfU1aKHery2hRra09t_X1r3qy9DSacX8uzQ3nJ_2yPaNsG1mgNQDqQkn91KAaDVt-Z4WYdvAY9wrfu4RcfhiGEJGrAuw9z8dTk81Z4vonpZNHduIj45-BwI7CXj5vAv-51cKyLW6CbTWfRJpeVM9JcFJ1zCYIkso2bs1GJ6bCNKvehehZhrqHfDouSZbk_GK8s2bYJHRLrEeJxwmKlWkIlmvOiYtnMISXkDe3shgeJONnSe853lyYqNldSWZqncgoYfjVzs69rc6E7BKyIUz2QqjMGwhuaTy9Iz3FIAM7p51GZc9YzJYJ4dvb7YkKIT-dfbw_Ymg9iUq-H1qXNZQKQlazq3fIVbqmpNZNm_eseotYpb9OcEi_baQEWfIcbzmgB2lwvNjGlYExwYNCmSrtgL6tzhZ1CReuA1gQQLvdr8Fy2KSA=w1366-h662')
}
#euro .img {
background-image: url('https://scontent.fopo1-1.fna.fbcdn.net/v/t1.0-9/13631380_1138582632831737_1633754758096865078_n.jpg?oh=f49cc3376d33d0ba50f6c266bda439fe&oe=58EF9C2D')
}
#euro.card:hover .img{
background-image: url('https://media.giphy.com/media/3o6Zt709aIBCEMQGVG/giphy.gif')
}
#aquashow .img {
background-image: url('https://scontent.fopo1-1.fna.fbcdn.net/v/t1.0-0/s526x296/13895578_1151075034915830_5828150169864172472_n.jpg?oh=c3272ae2cab05c83ffaa51a788016973&oe=58EE427C')
}
#aquashow.card:hover .img{
background-image: url('https://media.giphy.com/media/wxhOYMIJTm73a/giphy.gif')
}
#pena .img {
background-image: url('https://scontent.fopo1-1.fna.fbcdn.net/v/t1.0-9/13432302_1122561917767142_8437884315982301919_n.jpg?oh=3c3b03d6aa5ebc395709cea3f8a077aa&oe=591D2F6A')
}
#pena.card:hover .img{
background-image: url('https://media.giphy.com/media/24Abz5KVlRhtK/giphy.gif')
}
#praia .img{
background-image: url('https://scontent.fopo1-1.fna.fbcdn.net/v/t1.0-9/14102556_1168449609845039_4361841268740896546_n.jpg?oh=1d380eeedd35e844c266792175e2c439&oe=58D8407E')
}
#praia.card:hover .img{
background-image: url('https://media.giphy.com/media/mwla9OqumU06I/giphy.gif')
}
#gq .img {
background-image: url('http://gqportugal.pt/wp-content/uploads/GQMOTY2016-078.jpg');
}
#gq.card:hover .img{
background-image: url('https://media.giphy.com/media/WGTrwqBs6tr5C/giphy.gif')
}
#somnii .img {
background-image: url('https://2.bp.blogspot.com/-4R_BveTYB9o/VsoexUr-7bI/AAAAAAAASYQ/7cKBday2o1U/s1600/RFM%2BSomnii%2B6.jpg');
}
#somnii.card:hover .img{
background-image: url('https://media.giphy.com/media/zlk7T0g7huABW/giphy.gif')
}
#paintball .img {
background-image: url('https://scontent.fopo1-1.fna.fbcdn.net/v/t1.0-9/14572924_1175767589128114_4050747601370897796_n.jpg?oh=3578125d0b248b82d90832c24ddbdbf8&oe=58E996BA');
}
#paintball.card:hover .img{
background-image: url('https://media.giphy.com/media/4IdujEpUBWQH6/giphy.gif')
}
#player .img {
background-image: url('http://cdn.collider.com/wp-content/uploads/ready-player-one-book-cover.jpg');
}
#player.card:hover .img{
background-image: url('https://4.bp.blogspot.com/-4VhlXF7umAg/U-LEdM4nY-I/AAAAAAAAA8I/Fg5zu5S1J6M/s1600/tumblr_mj9c8sqPMR1rvoawjo1_400.gif')
}
#esquadrao .img {
background-image: url('https://diariodigital.sapo.pt/images_content/2015/esqua.jpg');
}
#esquadrao.card:hover .img{
background-image: url('https://mail.google.com/mail/u/0?ui=2&ik=4fdbfe6307&attid=0.4&th=159553328071a449&view=fimg&rm=159553328071a449&sz=w1600-h1000&attbid=ANGjdJ_6pWmkkTFlI12VqB-68_h2vEWVOIcKW4ZwfCESob1je6Kb_2XtVFWYOm0cJNUM5VlVdjtRcSh4P6ZC7myVmb_Ds8YsaCOEnVw0a1PTJiW-GTY0hxa1hKhieDc&disp=emb&realattid=159553327342f34b271&zw')
}
#astronauta .img {
background-image: url('http://astronomia.blog.br/wp-content/uploads/2014/07/chris-hadfield-livro.jpg');
}
#astronauta.card:hover .img{
background-image: url('https://media.giphy.com/media/LIcErE2uGhAaI/giphy.gif')
}
#deadpool .img {
background-image: url('https://images-na.ssl-images-amazon.com/images/M/MV5BMjQyODg5Njc4N15BMl5BanBnXkFtZTgwMzExMjE3NzE@._V1_UY268_CR1,0,182,268_AL_.jpg');
}
#deadpool.card:hover .img{
background-image: url('http://www.range365.com/sites/range365.com/files/wffzhby.gif')
}
#suicidesquad .img {
background-image: url('http://static.rogerebert.com/uploads/movie/movie_poster/suicide-squad-2016/large_e1mjopzAS2KNsvpbpahQ1a6SkSn.jpg');
}
#suicidesquad.card:hover .img{
background-image: url('https://media.giphy.com/media/q7KBb6texI7YI/giphy.gif')
}
#kubo .img {
background-image: url('https://upload.wikimedia.org/wikipedia/en/c/c4/Kubo_and_the_Two_Strings_poster.png');
}
#kubo.card:hover .img{
background-image: url('https://media.giphy.com/media/PWQ8ixLCT4DYc/giphy.gif')
}
#sucker .img {
background-image: url('http://runthetrap.com/wp-content/uploads/2016/06/lil-wayne-imagine-dragons-wiz-khalifa-sucker-for-pain-ty-dolla-ign-logic-x-ambassadors.jpg');
}
#sucker.card:hover .img{
background-image: url('https://media.giphy.com/media/cKitmuocdGlnq/giphy.gif')
}
#heathens .img {
background-image: url('https://upload.wikimedia.org/wikipedia/en/thumb/b/b3/Twenty_One_Pilots_-_Heathens.png/220px-Twenty_One_Pilots_-_Heathens.png');
}
#heathens.card:hover .img{
background-image: url('https://media.giphy.com/media/pSsbatDj4Xr9u/giphy.gif')
}
#house .img {
background-image: url('http://www.directlyrics.com/img/upload/0f8202c5.jpg');
}
#house.card:hover .img{
background-image: url('https://media.giphy.com/media/AoZcNujKPPogE/200.gif')
}
#torchlight .img {
background-image: url('https://images-2.gog.com/2b0e03ffd750eda573b9ea0b1d24e71e993423f5913619f323393de4df81608e.jpg');
}
#torchlight.card:hover .img{
background-image: url('https://media.giphy.com/media/KT84t91wHdAmk/giphy.gif')
}
#rocketleague .img {
background-image: url('https://672061c0b827554def11-ea8c7607510173b2cbad15f9892e8687.ssl.cf2.rackcdn.com/boxart_comp1.f1cb27a519bdb5b6ed34049a5b86e317.jpg');
}
#rocketleague.card:hover .img{
background-image: url('http://funnypictures1.fjcdn.com/funny_gifs/How_25d69a_6109130.gif')
}
#minecraft .img {
background-image: url('http://minecraftboss.com/wp-content/uploads/2016/08/Minecraft-Free-Download-PC-Mac.jpg');
}
#minecraft.card:hover .img{
background-image: url('https://www.nyfa.edu/student-resources/wp-content/uploads/2014/09/5IuguRP.gif')
}
#billions .img {
background-image: url('https://upload.wikimedia.org/wikipedia/en/5/5c/Billions-KeyArt.jpg');
}
#billions.card:hover .img{
background-image: url('https://media.giphy.com/media/l2QZVh7JyuKFEOIkE/200.gif')
}
#preacher .img {
background-image: url('http://images.amcnetworks.com/amctv.pt/wp-content/uploads/2016/10/preacher-keyart-836px.jpg');
}
#preacher.card:hover .img{
background-image: url('https://66.media.tumblr.com/381048cf9b47ec8d229839e702f038f0/tumblr_o8bzyzw75F1s19ebpo4_500.gif')
}
#hunter .img {
background-image: url('https://i.ytimg.com/vi/LRG-vwW9oPo/maxresdefault.jpg');
}
#hunter.card:hover .img{
background-image: url('https://media.giphy.com/media/924Ok3KswV9tu/giphy.gif')
}
body{
font-family: sans-serif;
background-color: #eee;
}
.content{
width: 486px;
margin: auto;
position: relative;
}
.card{
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
background-color: #fff;
display: inline-block;
margin: 0px;
width: 154px;
height: 232px;
overflow:hidden;
position: relative;
border: 1px solid #eec;
border-radius: 5px;
}
.card:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.card .img{
width:154px;
height:184px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
transition: background-image 1s ease-in-out;
}
h3,h4{ margin: 4px; }
h2{
color: #888;
font-family: arial, sans-serif;
font-size: 18px;
font-weight: normal;
}
h4{
font-size: 12px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.card:hover h4{
opacity: 0.75;
}
