"TEST: Famous Portfolio - Winter Wonderland"
Bootstrap 3.3.0 Snippet by brookearl

<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 ----------> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Cover Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="http://getbootstrap.com/examples/cover/cover.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="../../assets/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="site-wrapper"> <div class = "frost"> </div> <div class="site-wrapper-inner"> <div class="cover-container"> <div class="image-background"> <div class="masthead clearfix"> <div class="inner"> <h3 class="masthead-brand">Franklin Charmichael</h3> <nav> <ul class="nav masthead-nav"> <!-- <li class="active"><a href="#">Home</a></li> <li><a href="#">Features</a></li> <li><a href="#">Contact</a></li>--> </ul> </nav> </div> </div> <div class="inner cover"> <h1 class="cover-heading">Mirror Lake</h1> <p class="lead">Franklin Charmichael was the youngest member of the Group of Seven when they formed in 1920. This painting is one of his watercolours which was his main medium of choice. He spent a lot of travel time with the group going to remote locations in Northern Ontario, and bought a cottage in the La Cloche mountains, where he did a lot of his paintings. This painting is a beautiful array of soft blues and purples in the reflections on the water.</p> <p class="lead"> <!-- <a href="#" class="btn btn-lg btn-default">Learn more</a> --> </p> </div> </div> <div class="mastfoot"> <a href="http://bootsnipp.com/iframe/XMgjr" target="_blank">Best viewed full screen</a><br> <div class="inner"> <p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> </div> </div> </div> <div class="container"> <!-- Projects Row --> <div class="row"> <div class="col-md-4 portfolio-item"> <a href="#"> <img class="img-responsive" src="https://artblart.files.wordpress.com/2011/12/jehm-autumn-leaves-batchewana-wood-algoma-ago-3042-web.jpg?w=655&h=535" alt=""> </a> <h3> <a href="#">Autumn Hillside</a> </h3> <p></p> </div> <div class="col-md-4 portfolio-item"> <a href="#"> <img class="img-responsive" src="https://artone.scdn4.secure.raxcdn.com/mfacon/1131750342_summer_cottage.jpg" alt=""> </a> <h3> <a href="#">Summer Cottage</a> </h3> <p></p> </div> <div class="col-md-4 portfolio-item"> <div></div> <a href="#"> <img class="img-responsive" src="http://www.arthistoryarchive.com/arthistory/canadian/images/JEH-MacDonald-Autumn-Algoma-1918.jpg" alt="" border="5"> </a> <h3> <a href="#">Autumn Algoma</a> </h3> <p></p> </div> </div> <p class="lead">While working with the men who were to form The Group of Seven, Carmichael was included on weekend sketch trips and showed great progress. However, with his marriage in 1915, responsibilities to family and work prevented Carmichael from joining in the sketching trips to Algonquin Park and Algoma undertaken by the others in the later years of the decade. It was not until the major excursions of 1923-24 that Carmichael once again travelled north. </p> </div> <!-- /.row --> </div> </div> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../dist/js/bootstrap.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> </body>
.frost{ background: rgba(245, 245, 245, 0.9); height: 88px; position: fixed; width: 100%; top: 0; z-index: 1000; -webkit-filter:blur(10px); filter: url(#blur-effect-1); } .masthead { z-index:1100; } body { background: url(http://nebula.wsimg.com/53957ca28f2f3e6567d20647db21abd7?AccessKeyId=57022C337249FFDC4A2F&disposition=0&alloworigin=1) no-repeat center center fixed; } .image-background{ /* background: url(http://nebula.wsimg.com/53957ca28f2f3e6567d20647db21abd7?AccessKeyId=57022C337249FFDC4A2F&disposition=0&alloworigin=1) no-repeat center center fixed; /*height:800px;*/ } /* Team Members */ .team-members { width: 100%; cursor: pointer; overflow: hidden; position: relative; margin-bottom: 35px; } .team-members .team-avatar { position: relative; } .team-members .team-avatar:after { top: 0; left: 0; width: 100%; height: 100%; content: " "; position: absolute; background: rgba(129, 129, 129, 0.1); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .team-members .team-avatar img { display: block; margin: 0 auto; text-align: center; } .col-md-4 portfolio-item{ background: white; } .team-members .team-desc { left: auto; bottom: 0; width: 100%; padding: 0 20px; position: absolute; opacity: 0; color: #fff; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .team-members .team-desc h4 { font-size: 22px; font-weight: 600; margin: 0 0 10px; color: #fff; } .team-members .team-desc span { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; color: #fff; } .team-members:hover .team-avatar:after { background: rgba(47, 60, 72, 0.5); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .team-members:hover .team-desc { -webkit-transform: translate3d(0, -5%, 0); transform: translate3d(0, -5%, 0); -webkit-transform: translate3d(0, -10%, 0); transform: translate3d(0, -10%, 0); } .team-members:hover .team-desc { opacity: 1; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .lead{ /*background-color: #d1d1e0;*/ opacity:0.9; }

Related: See More


Questions / Comments: