How to blur a banner photo in CSS Style?
Tags: html,css,html5,image,css3
Problem :
So my banner is in a .wrapper.style1 and I've used a webkit-filter to blur the photo but everything gets blurred the Nav Bar and the information inside the Banner. How could I fix this so only the image is being blurred?
Here is the section of my CSS:
.wrapper {
padding: 6em 0em 4em 0em;
}
.wrapper.style1 {
padding: 0em;
background: url(../images/mlg.jpg); #222222 no-repeat;
-webkit-filter: blur(10px);
background-size: cover;
}
.wrapper.style2 {
background: #f2f2f2;
}
.wrapper.style2 .major {
text-align: left !important;
}
.wrapper.style2 .major h2 {
display: block;
margin-bottom: 0.70em;
letter-spacing: 1px;
line-height: 1.4em;
text-transform: uppercase;
font-size: 1.8em;
font-weight: 400;
}
.wrapper.style2 .major .byline {
letter-spacing: normal;
line-height: 1.6em;
text-transform: capitalize;
font-size: 1.4em;
}
.wrapper.style2 h3 {
display: block;
margin-bottom: 1em;
letter-spacing: 1px;
line-height: 1.4em;
text-transform: uppercase;
font-size: 1.6em;
font-weight: 400;
}
.wrapper.style3 {
padding-bottom: 6em;
background: #82b440;
text-align: center;
color: white;
}
.wrapper.style3 .container {
padding-left: 6em;
padding-right: 6em;
}
.wrapper.style3 p {
font-size: 1.6em;
}
.wrapper.style4 {
background: white;
}
.wrapper.style5 {
background: #82b440;
text-align: center;
color: white;
}
.wrapper.style5 .image {
display: block;
width: 60%;
margin: 0em auto 2em auto;
}
.wrapper.style5 .image img {
border-radius: 50%;
border: 10px solid;
border-color: white;
}
Here is a copy of some of the HTML:
<html>
<head>
<title>NueroEdge | Powered By Anazro</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<script src="js/footage.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header Wrapper -->
<div class="wrapper style1">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<h1><a href="index.html" img src="images/NueroEdgeText.png" alt="NueroEdge" style="width:105px;height:55px">
<!-- Nav -->
<nav id="nav">
<ul>
<img src="images/NueroEdgeText.png" alt="NueroEdge" style="width:105px;height:55px">
<li class="active">
<a href="index.html">Home</a>
<ul>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</li>
</ul>
<li><a href="https://www.anazro.com/">Anazro Store</a></li>
<li><a href="left-sidebar.html">Application</a></li>
<li>
<a href="">Roster</a>
<ul>
<li><a href="#">Call Of Duty</a></li>
<li><a href="#">Streaming</a></li>
<li><a href="#">Staff</a></li>
</ul>
</li>
<li>
<a href="">More...</a>
<ul>
<!--<li><a href="#">Lorem ipsum dolor</a></li>-->
<li>
<a href="">LeaderBoard</a>
<ul>
<li>
<a href="">Ryan Tarson</a>
<ul>
<li><a href="#"><img src="images/ryantarson.png" alt="TECGaming" style="width:50px;height:50px">Ryan Tarson AKA: TECGaming</a></li>
<li><Strong>Age:</Strong> 17</li>
<li><Strong>Current Favourite Game:</Strong> Grand Theft Auto V PC</li>
<li>I am Ryan Loves video games, computers and coding specifically Java, He plays really all types of</li>
<li>games from a wide range and is willing to play any games from any genre to. He has a great and</li>
<li>fun personality which would keep you hooked on his stream like it was a drug. Ryan is the type</li>
<li>of streamer that is willing to do anything to keep his fans entertained. He has streamed before </li>
<li>but never streamed seriously but planning to do so. I am the website Programmer as well!</li>
<li>Click the links below and become apart of my life!</li>
<div class="row double">
<li><a href="https://twitter.com/TECGaming360" class="button">Twitter</a></li>
<li><a href="https://www.youtube.com/user/TECGaming360" class="button">YouTube</a></li>
</div>
</ul>
</li>
<br>
<li>
<a href="">Kavin I.</a>
<ul>
<li><a href="#"><img src="images/profile.jpeg" alt="NueroEdge" style="width:50px;height:50px">Kavin I. AKA: KaVn Ne</a></li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> Advanced Warefare</li>
<li>Kavin I. AKA KaVn Ne is Co-Founder along Side Ryan Tarson, Kavin loves video games</li>
<li>mostly Call of Duty because that’s all he ever plays. He mostly plays all he</li>
<li>ever plays. He mostly plays competitively and will stream singles matches or just</li>
<li>random hangouts with fans but he would play other games if Call of Duty is down</li>
<li> or someone requests something different. Kavin loves computers and any type of</li>
<li>electronics for some odd reason. Kavin has a unique personality and which could</li>
<li>make you become addicted to watching him play video games BEWARE!</li>
<div class="row double">
<li><a href="https://twitter.com/KaVn_Ne" class="button">Twitter</a></li>
<li><a href="https://www.youtube.com/channel/UC6RGgeacGovnYZko5ZFAZjg" class="button">YouTube</a></li>
</div>
</ul>
</li>
<br>
<li>
<a href="">Nick Marchitelli</a>
<ul>
<li><a href="#"><img src="images/Praise.jpg" alt="Praise" style="width:50px;height:50px">Nick Marchitelli AKA: Praise</a></li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player and Captain for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the supportive role on the team and also calls most of the shots and plays since he</li>
<li>is captain but everyone has their time to shine if no plays aren’t working.</li>
<li>Hybrid player AR and SMG role.</li>
<li>Currently in 16th place In North America for win on GameBattles</li>
<li>Been Playing Competitive Since COD Ghost</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li><a href="https://twitter.com/Praise_Ne" class="button">Twitter</a></li>
<li><a href="umggaming.com/livid-praise " class="button">UMG Gaming</a></li>
</div>
</ul>
</li>
<br>
<li>
<a href="">Luke Pondillo</a>
<ul>
<li><a href="#"><img src="images/profile.jpeg" alt="nueroedge" style="width:50px;height:50px">Luke Pondillo AKA: Flusso</a></li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the Objective role on the team he nice on the sticks with his spot on AR skills but</li>
<li>also can use a SMG, which makes him a hybrid player. The kind of player who can step up when </li>
<li>the team needs it.</li>
<li>Been Playing Competitive Since COD Ghost.</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li><a href="https://twitter.com/FlussoNe" class="button">Twitter</a></li>
<li><a href="#" class="button">YouTube</a></li>
</div>
</ul>
</li>
<br>
<li>
<a href="">Joseph Balasico</a>
<ul>
<li><a href="#"><img src="images/palm.jpeg" alt="palm" style="width:50px;height:50px">Joseph Balasico AKA: Palm</a></li>
<li><Strong>Age:</Strong> 15</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the Slayer role on the team he is known to be getting 30+ kills in every respawn</li>
<li>and He is a hybrid player where he can use an AR and a SMG. His slaying skill itself helps guide </li>
<li>his team to victory.</li>
<li>Like to use an AR and SMG which makes him a Hybrid Player</li>
<li>Been Playing Competitive COD since COD Ghost.</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li><a href="https://twitter.com/LiviD_Palm" class="button">Twitter</a></li>
<li><a href="#" class="button">YouTube</a></li>
</div>
</li>
</ul>
</li>
</ul>
<!--<li><a href="#">Veroeros feugiat</a></li>-->
</ul>
</li>
</nav>
</div>
</div>
<!-- Banner -->
<<div id="banner">
<section class="container">
<h2>NueroEdge</h2>
<span>NueroEdge Outstanding performance at MLG Event</span>
<p>Looking for more fantastic players for our team!</P>
<a href="application.html" class="button alt">Sign Up</a>
</section>
</div>
</div>
Solution :
I've done this a few times before with several different solutions. What I found the most useful is using the ::before selector. You inherit every background-property you specified and apply the filter.
.wrapper.style1 {
padding: 0em;
background: url(../images/mlg.jpg); #222222 no-repeat;
background-size: cover;
}
.wrapper.style1::before {
content = "";
background: inherit;
background-size: inherit;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-filter: blur(10px);
}
Sadly, blur doesn't leave sharp edges, so you probably have to zoom in a bit to cover that up.
CSS Howto..
Changing the wrapper to a flexbox solves the problem: .wrapper { display: flex; } Updated Fiddle...
If you want panel 2 to be on top of panel 3 then you will need to apply something like z-index:-1;. I have modified your fiddle to show this working....
First any css color code needs to have # followed by a 6 digit value(or 3 if they are repeating i.e #FF33FF as #F3F) and to solve your second part...
Items are added to the array but not in the same form of your initial one. So change the creation of the array: $scope.items = [{direction:""}]; Also, because of the...
While the answer you just accepted works, I'd recommend against using CSS selectors like that. Not only do they slow down the page load when you begin to scale your...
You need to assign display: block; property to the wrapping anchor. Otherwise it won't wrap correctly. <a style="display:block" href="http://justinbieber.com"> <div class="xyz">My div contents</div> </a> ...
If you are writing the page in PHP on the backend, use this code to get a post. If you are using the page editor, there's a way to enable...
To overlap an element on top of a child element, using css only, you can use the pseudo-elements :before or :after http://jsfiddle.net/LpkwH/2/ .image-link { position:relative; display:inline-block; padding:0; margin:10px; } .contain-video:after{...
You can't do this, if you want you can use jQuery Chosen or similar http://harvesthq.github.io/chosen/ It generates HTML lists easy to style....
Try do it this way: img.tt-logo { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.5s ease; } img.tt-logo:hover { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); filter: grayscale(0%); } and every image...
For mobile testing, here are some resources might help. Personally I prefer the Samsung emulator and Adobe Edge Inspect(will charge). Adobe Edge Inspect Samsung Emulators Chrome - Device Mode &...
I think you may want to look to flexbox for this, coupled with an inline-block fallback (display: flex, display: inline-block). Note that layouts may vary for browsers which do not...
The problem is that the content overflows out of the container and that content is hidden. An easy way to fix this is with: .alertify-logs > div { overflow: visible;...
Make a table by using: display: table and table-layout: fixed display: table-cell and display: table-row Use ex as the unit measurement in this case since you have a concern about...
No, the border is a property of the child element, and thus can only be specified on them. You can use a single rule for this, but it requires advanced...
Here is a fiddle: http://jsfiddle.net/Bc4NP/ You need to add position:relative to your main div: <div style="text-align:center; position:relative"> <div id="playIcon"><img src="play.png" /></div> <video id="video"> <source src="/video.mp4" type="video/mp4"> </video> </div>...
I haven't been able to find any workaround to get CSS selectors working in the search bar again. Rejoice, for they have returned! In any case, you can still use...
If you want to edit the ms-thumb-ol only, you can use the css sibling combinator, since it is next to div.ms-thumb picture_slider. So, to modify it, add this selector for...
Here is a fiddle to see result. Here are my changes: .A > div{ margin-right: 5px; } #title{ font-size: 100%; } #details{ font-size:100%; float: left; clear: both; display: inline-block; }...
Take a look at flex-wrap:wrap-reverse in this jsfiddle http://jsfiddle.net/gothic/Nf8PR/
Here you go: http://jsfiddle.net/ahallicks/8gApb/2/ changed the display property to opacity and set it to 0 #nav > ul { opacity: 0; } And then added transition to that too: transition:...
If you want reset ALL CSS properties, you can do it. It is big file, probbably not best solution, but it works. .yourContainer * { -webkit-align-content: stretch; -moz-align-content: stretch; align-content:...
Is that what you want? var origBg = $("article:hover").css('background'); var origBorder = $("article:hover").css('border'); $("article").click(function () { $(".folder-items",this).slideToggle("slow"); if ($("article:hover").css('border')==origBorder) { $("article:hover").css({ background : 'none', border : '1px solid...
here are the css codes, may find what you want :) /* define a fixed width for the entire menu */ .navigation { min-width: 300px; } /* reset our lists...
You don't need to block the vertical mousemove. You just need to catch the proper element and its siblings and also attaching event each to class where the items are...
Your problem is that you've got css transitions on these affects. Check out line 67 of your style.css file: a, button, .owl-buttons div { -webkit-transition: all .1s ease-in-out; -moz-transition: all...
This has absolutely nothing to do with laravel nor PHP. The element #tlkio has a CSS rule overflow: auto; which is differently interpreted by different browsers. To override it, you...
Maybe you could use some data attribute: <td id="one12" class="navigateTest" data-target="divOne12"><b>1</b></td> <td id="two12" class="navigateTest" data-target="divTwo12"><b>2</b></td> <td id="three12" class="navigateTest"...
You can certainly use CSS3 gradient and clip properties .. I am aware of webkits which I used for, but not sure about other browsers, if you want you can...
Skip the JavaScript and just use named anchors. For example, I have a CodePen with the bare minimum code you will need: http://codepen.io/aardrian/pen/OPgmPe If you want to see it in...