Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- CSS
- body, html {
- height: 100%;
- margin: 0;
- font-size: 16px;
- font-family: "Lato", sans-serif;
- font-weight: 400;
- line-height: 1.8em;
- }
- .overlay {
- background-color: #000;
- opacity: 0.5;
- position: absolute;
- background-position: 50% 50%;
- background-size: cover;
- background-attachment: fixed;
- background-repeat: no-repeat;
- width: 100%;
- min-height: 100%;
- z-index: 1;
- }
- .linkdark {
- display: inline-block;
- padding: 0.8em 0.3em;
- color: #fa9646;border: 1px solid #000;
- color: #000;
- text-transform: uppercase;
- font-size: 14px;
- width: 200px;
- text-align: center;
- transition: 0.5s;
- }
- .linkdark:hover {
- background: #000;
- color: #fff; }
- .ptextdark p
- { letter-spacing: 0px; color: #000; }
- .ptextdark {
- position: absolute;
- top: 30%;
- width: 100%;
- text-align: center;
- color: #000;
- font-size: 50px;
- letter-spacing: 5px;
- text-transform: uppercase;
- }
- .biggerbannertextdark{
- font-size: 55px;
- margin-bottom: 1em;
- font-weight: 100;
- line-height: 1.1;
- }
- .ptextdark .border {
- background-color: #fff;
- color: #000;
- padding: 20px;
- }
- a { text-decoration: none; }
- .link {
- display: inline-block;
- padding: 0.8em 0.3em;
- color: #fa9646;border: 1px solid #fff;
- color: #fff;
- text-transform: uppercase;
- font-size: 14px;
- width: 200px;
- text-align: center;
- transition: 0.5s;
- }
- a:hover { transition: 0.5s; }
- .link:hover {
- background: #fff;
- color: #000; }
- .cover-image, .cover-image2, .cover-image3, .cover-image4, .cover-image5{
- position:relative;
- background-position: center;
- background-size: cover;
- background-repeat: no-repeat;
- background-attachment: fixed;
- top: 0px;
- }
- .ptext {
- position: absolute;
- top: 35%;
- width: 100%;
- text-align: center;
- color: #fff;
- font-size: 50px;
- letter-spacing: 5px;
- text-transform: uppercase;
- }
- .ptextdark a {
- letter-spacing: 0px;
- }
- .ptext a {
- letter-spacing: 0px;
- }
- .biggerbannertext{
- font-size: 55px;
- margin-bottom: 1em;
- font-weight: 100;
- line-height: 1.1;
- }
- .ptext .border {
- background-color: #111;
- color: #fff;
- padding: 20px;
- }
- .cover-image {
- width: 100%;
- height: 100%;
- position: relative;
- background:url(http://ilovedturkeytwizzlers.uk/images/slideshow/homepage/world_map.jpg) fixed 50%/cover; }
- .cover-image5 {
- width: 100%;
- height: 200vh; /* gives the effect a bit of room to breathe */
- position: relative;
- background: url(https://i.imgur.com/vftXqz7.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
- }
- .cover-image2 {
- width: 100%;
- min-height: 100%; /* gives the effect a bit of room to breathe */
- position: relative;
- background: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led2.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
- }
- .cover-image3 {
- width: 100%;
- min-height: 100%; /* gives the effect a bit of room to breathe */
- position: relative;
- background: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led5.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
- }
- .cover-image4 {
- width: 100%;
- min-height: 100%; /* gives the effect a bit of room to breathe */
- position: relative;
- background: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led1.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
- }
- .cover-image5:after {
- content: '';
- position: absolute;
- width: inherit;
- height: inherit;
- background: inherit;
- background-image: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led6.jpg);
- mask: linear-gradient(to bottom, white 30%, transparent); /* Top image is masked with a gradient */
- }
- .cover-image6 {
- width: 100%;
- min-height: 100%; /* gives the effect a bit of room to breathe */
- position: relative;
- background: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led3.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
- }
- HTML
- <!DOCTYPE html>
- <html lang="">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="">
- <meta name="author" content="">
- <title>CSS + Image Blur</title>
- <link rel="shortcut icon" href="">
- <link rel="stylesheet" href="styleboii.css">
- </head>
- <body>
- <div class="cover-image"><div class="ptextdark">
- <p>PREMIUM LIGHTING</p>
- <div class="bannertextdark">
- DELIVERED GLOBALLY
- </div>
- <a class="linkorange" href="http://www.led-flex.co.uk/profile.html"> DISTRIBUTORS</a>
- </div></div>
- <div class="cover-image2"><div class="overlay"></div></div>
- <div class="cover-image3"></div>
- <div class="cover-image4"><div class="overlay"></div></div>
- <div class="cover-image5"></div>
- <div class="cover-image6"><div class="overlay"></div></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement