Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <head>
- <meta charset="UTF-8">
- <title>TITLE HERE</title>
- <link rel="shortcut icon" href="">
- <meta name="credit" content="coding from shinya1992@codepen">
- <style>
- *
- { box-sizing: border-box;}
- a {
- text-decoration: none;
- }
- body {
- /* background: #cc6633; */
- font: 12px 'Montserrat', 'Helvetica', sans-serif;
- }
- .title {
- color: #7d3917;
- font-size: 46px;
- margin: 10px 0 30px 0;
- text-align: center;
- }
- .grid {
- margin: 0 auto;
- width: 90%;
- }
- .grid:after {
- content: '';
- display: block;
- clear: both;
- }
- .grid-sizer,
- .grid-item {
- width: 24%;
- }
- .gutter-sizer {
- width: 1.3333%;
- }
- .grid-item {
- float: left;
- margin-bottom: 1.3333%;
- position: relative;
- }
- .grid-item img {
- display: block;
- width: 100%;
- }
- .itm-from {
- background: #cc6633;
- background: rgba(204, 102, 51, 0.7);
- color: #fdfdfd;
- display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- font-size: 14px;
- height: 100%;
- opacity: 0;
- position: absolute;
- top: 0;
- left: 0;
- -moz-transition: 0.2s opacity ease-in-out;
- -o-transition: 0.2s opacity ease-in-out;
- -webkit-transition: 0.2s opacity ease-in-out;
- transition: 0.2s opacity ease-in-out;
- width: 100%;
- }
- .grid-item:hover .itm-from {
- opacity: 1;
- }
- .itm-from a {
- color: #7d3917;
- display: block;
- }
- @media all and (max-width: 900px) {
- .grid-sizer,
- .grid-item {
- width: 32%;
- }
- .gutter-sizer {
- width: 2%;
- }
- .grid-item {
- margin-bottom: 2%;
- }
- #pdesc { line-height: 1.5; }
- }
- @media all and ( max-width: 700px) {
- .grid-sizer,
- .grid-item {
- width: 48%;
- }
- .gutter-sizer {
- width: 4%;
- }
- .grid-item {
- margin-bottom: 4%;
- }
- }
- @media all and ( max-width: 400px ) {
- .grid-sizer,
- .grid-item {
- width: calc(100%);
- }
- }</style></head><body>
- <div class='title'>Moodboard with hover text</div>
- <div class='grid'>
- <div class='grid-sizer'></div>
- <div class='gutter-sizer'></div>
- <!-- C+P BELOW FOR NEW ADDITIONS
- <div class='grid-item'>
- <img src='imgurl'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- ---------------------------------->
- <div class='grid-item'>
- <img src='https://farm1.staticflickr.com/149/428144742_f509cd9927.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm1.staticflickr.com/204/489660321_a6833ba9cf.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm1.staticflickr.com/244/459042039_98a488bf79.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm1.staticflickr.com/27/92937010_2d03825900.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm1.staticflickr.com/637/31711772564_f0a9627692.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm1.staticflickr.com/73/154716528_717697a157.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm1.staticflickr.com/77/199628917_e19e3ff68d.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm2.staticflickr.com/1029/1144531870_5b1119763b_z.jpg?zz&'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm2.staticflickr.com/1087/1135062324_66250cbb80.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm2.staticflickr.com/1158/530614675_e99bc6452f.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm2.staticflickr.com/1204/542810889_29c26fff84.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm3.staticflickr.com/2144/2485664017_6e8ca455b7.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm3.staticflickr.com/2453/3615610199_9f1e192fbe.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm3.staticflickr.com/2582/4105054854_2927d15bc6.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm3.staticflickr.com/2893/9651122124_99ae69d474.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm3.staticflickr.com/2897/14819442903_a8874ddf17.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm4.staticflickr.com/3007/2801969142_a96e4cfc44.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm4.staticflickr.com/3007/5839421567_c436038175.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm4.staticflickr.com/3406/3629566360_399ac727f5_z.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm4.staticflickr.com/3433/3230723523_539d4ebe9a.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm5.staticflickr.com/4040/4627650021_4aaba9d7ff.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm5.staticflickr.com/4040/4443573010_2b98ec4ec3.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm6.staticflickr.com/5264/5689807223_357b0d678e.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm7.staticflickr.com/6200/6132913670_b472fe40b0.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7323/10360311174_00a5fc5c63.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7405/12510424374_9d5ec0845c.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm9.staticflickr.com/8467/8125237368_00a048edaf.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm9.staticflickr.com/8522/8666794897_987b81a204.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm9.staticflickr.com/8053/8135290077_b421c98618_z.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm9.staticflickr.com/8085/8469166771_64954bbec7.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm9.staticflickr.com/8239/8549394222_15c08813f1.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm9.staticflickr.com/8449/7987864644_3056ba5b4e.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm9.staticflickr.com/8592/15807333937_6d7ab9c6a7.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm9.staticflickr.com/8672/16477918946_19e0a790a7.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm9.staticflickr.com/8683/16126200902_eaa850590a.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm9.staticflickr.com/8846/18608230666_917c831445.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm9.staticflickr.com/8874/17681818243_0ea8f59b9e.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7060/6945565473_5551b57970.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7209/6818239416_8fca8185df_z.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7220/7270199682_f81ba8e414.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7307/9205972143_75261288d1.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7323/10360311174_00a5fc5c63.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7338/15750236803_043f7d83c5.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7357/9265943163_67a5977357.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7405/12510424374_9d5ec0845c.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7408/27286281900_69a51f1ab8.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7443/12464271733_bf867821fb.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7483/16252476845_6ded6889b4.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7485/16133394909_6424797a9f.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7486/15194165793_619455e948.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7699/17113423899_1a179611e5.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7762/17980651078_5cabb9ec0c.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- <div class='grid-item'>
- <img src='https://farm8.staticflickr.com/7793/17781724598_7289ed38eb.jpg'>
- <div class='itm-from'>
- from <a href='#'>blahblah</a>
- </div>
- </div>
- </div>
- <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src='https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.0/imagesloaded.pkgd.min.js'></script>
- <script >var $grid = $('.grid').imagesLoaded().progress( function() {
- $grid.masonry({
- itemSelector: '.grid-item',
- percentPosition: true,
- columnWidth: '.grid-sizer',
- gutter: '.gutter-sizer'
- });
- });
- // $grid.imagesLoaded().progress( function() {
- //# sourceURL=pen.js
- </script>
- </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement