"mobile card"
Bootstrap 3.3.0 Snippet by evarevirus

<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; }

Related: See More


Questions / Comments: