I've been stuck on this issue for hours and hours at this point. I've been trying to work through it on my own but I am just unable to figure it out. Someone save me!
Problem: Initially the problem was that my footer wouldn't stick to the bottom of the page, so I followed this popular YouTuber's tutorial on how to fix it using flex. Here's the vid: Easy sticky footer - stop a footer from floating up a short page!. This caused a new issue to arise, now there is this extra white space between my footer and the main content which I think is due to the "margin-top: auto" I added to the footer per the tutorial. This issue isn't apparent in the mobile view of my page but as I expand the page, the main content rises to the top.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
height: 100%
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
.main__wrapper {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: repeat(4, 1fr);
grid-template-areas: "sec1" "sec2" "sec3" "sec4";
}
p {
margin: 10px 0 10px 0;
}
button {
border: none;
border-radius: 4px;
color: white;
width: 77px;
height: 18px;
font-family: 'Roboto', sans-serif;
font-size: 8px;
font-weight: 400;
}
button:hover {
border-width: 1px;
border-style: double;
border-color: rgb(255, 114, 114);
}
.header__text {
font-size: 17.4px;
}
.header__text span {
font-size: 0.6em;
}
h3:first-of-type {
font-size: 8.22px;
color: #908B87;
}
h3:last-of-type {
font-size: 9.35px;
margin-top: 1.3em;
}
.header__wrapper {
display: flex;
justify-content: center;
background-image: url("../images/nycforheader.jpeg");
background-size: cover;
background-position-y: 40%;
font-family: 'Roboto', sans-serif;
color: white;
flex-direction: column;
height: 88px;
min-height: 12.6vh;
}
.headertext__grouped {
margin-left: 2em;
}
.navbar__menu {
display: block;
border-top: solid #908B87 1.15px;
border-bottom: solid #908B87 1.15px;
}
#navbar__list {
display: flex;
justify-content: space-evenly;
align-items: center;
height: 4vh;
width: 50%;
}
#navbar__list li {
list-style: none;
font-family: 'Roboto', sans-serif;
font-size: 6.02px;
}
#navbar__list li a {
text-decoration: none;
color: #000000;
}
#navbar__list li a:hover {
text-decoration: underline red;
text-underline-offset: 100%;
}
.landing__container {
display: flex;
flex-direction: column;
box-shadow: #000000;
}
.landing__container h2 {
font-family: 'Roboto', sans-serif;
font-size: 13.62px;
}
.landing__container p {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 9px;
}
#section1 {
grid-area: sec1;
}
.section2 {
grid-area: sec2;
}
.section3 {
grid-area: sec3;
}
.section4 {
grid-area: sec4;
}
.your-active-class,
.section3 {
padding: 14px 0 14px 14px;
background: radial-gradient(100% 100% at 50% 0%, rgba(233, 211, 160, 0.65) 28.12%, rgba(255, 255, 255, 0) 100%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 25%);
}
.section2,
.section4 {
padding: 14px 14px 14px 0;
background: radial-gradient(100% 100% at 50% 0%, rgba(212, 168, 138, 0.65) 28.12%, rgba(255, 255, 255, 0) 100%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 25%);
}
.section2,
.section4 {
text-align: right;
}
#s2_button,
#s4_button {
text-align: right;
}
#s2_button button {
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/time-square.jpeg');
background-size: cover;
background-position: center;
}
#section3 {
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/nyc-hotel.jpeg');
background-size: cover;
background-position: center;
}
#s4_button button {
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/statue-liberty.jpeg');
background-size: cover;
background-position-y: 21%;
}
footer {
display: flex;
justify-content: space-around;
text-align: center;
align-items: center;
height: 9vh;
margin-top: auto;
background-color: #908B87;
}
footer a {
text-decoration: none;
color: white;
font-family: 'Roboto', sans-serif;
}
.footer__list {
line-height: 10%;
}
.footer__list li {
display: inline-block;
list-style: none;
font-size: 8.02px;
margin-inline: 8px;
}
.social__icons {
display: inline-block;
margin-inline: 8px;
font-size: 0.8em;
}
footer a:hover {
color: #ffffffcc;
}
/* tablet design */
#media screen and (min-width: 768px) {
.header__text {
font-size: 25.4px;
}
h3:first-of-type {
font-size: 12.22px;
color: #908B87;
}
h3:last-of-type {
font-size: 12.35px;
margin-top: 1.3em;
}
.header__wrapper {
display: flex;
justify-content: center;
background-size: cover;
font-family: 'Roboto', sans-serif;
color: white;
flex-direction: column;
height: 99px;
min-height: 12.6vh;
}
}
<header class="page__header">
<div class="header__wrapper">
<div class="headertext__grouped">
<h1 class="header__text">New York City <span>Travel Guide</span></h1>
<h3>USA</h3>
<h3>#1 in Best Places to Visit In NYC</h3>
</div>
</div>
<nav class="navbar__menu">
<ul id="navbar__list">
</ul>
</nav>
</header>
<div class="main__wrapper">
<main>
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>Why Go To New York City</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar interdum ipsum, vel ullamcorper arcu volutpat id. Nullam vel lorem vitae eros tempus aliquam. Nunc at ante non neque vestibulum sagittis. Etiam lobortis massa vitae quam
eleifend lobortis. Nam non ligula at arcu volutpat fringilla vel iaculis quam. Vivamus non orci nec justo accumsan consectetur. Donec egestas arcu non ligula blandit suscipit. Aenean fermentum ex ac nisi porta iaculis. Ut dapibus eros at quam
semper aliquam sit amet quis massa. Duis in velit eget risus commodo convallis. Sed at lorem a nibh pulvinar viverra. Aenean varius sed dolor pretium condimentum.</p>
</div>
</section>
<section class="section2" data-nav="Section 2">
<div class="landing__container">
<h2>32 Best Things To Do in New York City</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar interdum ipsum, vel ullamcorper arcu volutpat id. Nullam vel lorem vitae eros tempus aliquam. Nunc at ante non neque vestibulum sagittis. Etiam lobortis massa vitae quam
eleifend lobortis. Nam non ligula at arcu volutpat fringilla vel iaculis quam. Vivamus non orci nec justo accumsan consectetur. Donec egestas arcu non ligula blandit suscipit. Aenean fermentum ex ac nisi porta iaculis. Ut dapibus eros at quam
semper aliquam sit amet quis massa.</p>
<div id="s2_button">
<button type="button">Click To View</button>
</div>
</div>
</section>
<section class="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Best Hotels in New York City</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar interdum ipsum, vel ullamcorper arcu volutpat id. Nullam vel lorem vitae eros tempus aliquam. Nunc at ante non neque vestibulum sagittis. Etiam lobortis massa vitae quam
eleifend lobortis. Nam non ligula at arcu volutpat fringilla vel iaculis quam. Vivamus non orci nec justo accumsan consectetur. Donec egestas arcu non ligula blandit suscipit. Aenean fermentum ex ac nisi porta iaculis. Ut dapibus eros at quam
semper aliquam sit amet quis massa.</p>
<button id="section3" type="button">Click To View</button>
</div>
</section>
<section class="section4" data-nav="Section 4">
<div class="landing__container">
<h2>What to Eat in New York City</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar interdum ipsum, vel ullamcorper arcu volutpat id. Nullam vel lorem vitae eros tempus aliquam. Nunc at ante non neque vestibulum sagittis. Etiam lobortis massa vitae quam
eleifend lobortis. Nam non ligula at arcu volutpat fringilla vel iaculis quam. Vivamus non orci nec justo accumsan consectetur. Donec egestas arcu non ligula blandit suscipit. Aenean fermentum ex ac nisi porta iaculis. Ut dapibus eros at quam
semper aliquam sit amet quis massa.</p>
<div id="s4_button">
<button type="button">Click To View</button>
</div>
</div>
</section>
</main>
</div>
<footer>
<ul class="footer__list">
<li>About Us</li>
<li>Contact</li>
<li>Newsletters</li>
<li>Store</li>
</ul>
<div class="social__icons__container">
<a class="social__icons" href="#">
<ion-icon name="logo-facebook"></ion-icon>
</a>
<a class="social__icons" href="#">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</div>
</footer>
<script src="js/app.js"></script>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
Initially the problem was that my footer wouldn't stick to the bottom
of the page
There are many successful approaches to achieving this effect, but one of the simplest, oldest and most broadly supported is to use absolute positioning on the <header> and <footer> and apply overflow: auto to the <main> element.
In the example below you can delete text from (or add text to) the <main> element. You will see that the <footer> remains positioned at the bottom of the viewport no matter how much or how little text the <main> element contains.
Working Example 1: (Run Code Snippet and click Full Page)
body {
margin: 0;
}
header,
footer {
position: absolute;
left: 0;
display: block;
width: 100vw;
height: 100px;
background-color: rgb(127, 127, 0);
}
main {
height: calc(100vh - 200px);
min-height: calc(100vh - 200px);
max-height: calc(100vh - 200px);
margin-top: 100px;
padding: 0 18px;
overflow: auto;
}
header {
top: 0;
}
footer {
top: calc(100vh - 100px);
}
h2 {
color: rgb(255, 255, 255);
text-align: center;
text-transform: uppercase;
height: 100px;
line-height: 100px;
margin: 0;
padding: 0;
}
<header>
<h2>Header</h2>
</header>
<main contenteditable="true">
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversations?”</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, “Oh dear! Oh dear! I shall be late!” (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
<p>In another moment down went Alice after it, never once considering how in the world she was to get out again.</p>
<p>The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
<p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled “ORANGE MARMALADE”, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody underneath, so managed to put it into one of the cupboards as she fell past it.</p>
<p>“Well!” thought Alice to herself, “after such a fall as this, I shall think nothing of tumbling down stairs! How brave they’ll all think me at home! Why, I wouldn’t say anything about it, even if I fell off the top of the house!” (Which was very likely true.)</p>
<p>Down, down, down. Would the fall never come to an end? “I wonder how many miles I’ve fallen by this time?” she said aloud. “I must be getting somewhere near the centre of the earth. Let me see: that would be four thousand miles down, I think—” (for, you see, Alice had learnt several things of this sort in her lessons in the schoolroom, and though this was not a very good opportunity for showing off her knowledge, as there was no one to listen to her, still it was good practice to say it over) “—yes, that’s about the right distance—but then I wonder what Latitude or Longitude I’ve got to?” (Alice had no idea what Latitude was, or Longitude either, but thought they were nice grand words to say.)</p>
<p>Presently she began again. “I wonder if I shall fall right through the earth! How funny it’ll seem to come out among the people that walk with their heads downward! The Antipathies, I think—” (she was rather glad there was no one listening, this time, as it didn’t sound at all the right word) “—but I shall have to ask them what the name of the country is, you know. Please, Ma’am, is this New Zealand or Australia?” (and she tried to curtsey as she spoke—fancy curtseying as you’re falling through the air! Do you think you could manage it?) “And what an ignorant little girl she’ll think me for asking! No, it’ll never do to ask: perhaps I shall see it written up somewhere.”</p>
</main>
<footer>
<h2>Footer</h2>
</footer>
Alternatively, you can tweak the setup above very slightly to build a display which no longer has an absolutely positioned <footer>.
Working Example 2:
body {
margin: 0;
}
header,
footer {
display: block;
width: 100%;
height: 100px;
background-color: rgb(127, 127, 0);
}
main {
min-height: calc(100vh - 200px);
margin-top: 100px;
padding: 0 18px;
overflow: auto;
}
header {
position: absolute;
top: 0;
left: 0;
}
h2 {
color: rgb(255, 255, 255);
text-align: center;
text-transform: uppercase;
height: 100px;
line-height: 100px;
margin: 0;
padding: 0;
}
<header>
<h2>Header</h2>
</header>
<main contenteditable="true">
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversations?”</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, “Oh dear! Oh dear! I shall be late!” (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
<p>In another moment down went Alice after it, never once considering how in the world she was to get out again.</p>
<p>The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
<p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled “ORANGE MARMALADE”, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody underneath, so managed to put it into one of the cupboards as she fell past it.</p>
<p>“Well!” thought Alice to herself, “after such a fall as this, I shall think nothing of tumbling down stairs! How brave they’ll all think me at home! Why, I wouldn’t say anything about it, even if I fell off the top of the house!” (Which was very likely true.)</p>
<p>Down, down, down. Would the fall never come to an end? “I wonder how many miles I’ve fallen by this time?” she said aloud. “I must be getting somewhere near the centre of the earth. Let me see: that would be four thousand miles down, I think—” (for, you see, Alice had learnt several things of this sort in her lessons in the schoolroom, and though this was not a very good opportunity for showing off her knowledge, as there was no one to listen to her, still it was good practice to say it over) “—yes, that’s about the right distance—but then I wonder what Latitude or Longitude I’ve got to?” (Alice had no idea what Latitude was, or Longitude either, but thought they were nice grand words to say.)</p>
<p>Presently she began again. “I wonder if I shall fall right through the earth! How funny it’ll seem to come out among the people that walk with their heads downward! The Antipathies, I think—” (she was rather glad there was no one listening, this time, as it didn’t sound at all the right word) “—but I shall have to ask them what the name of the country is, you know. Please, Ma’am, is this New Zealand or Australia?” (and she tried to curtsey as she spoke—fancy curtseying as you’re falling through the air! Do you think you could manage it?) “And what an ignorant little girl she’ll think me for asking! No, it’ll never do to ask: perhaps I shall see it written up somewhere.”</p>
</main>
<footer>
<h2>Footer</h2>
</footer>
I am trying to make a website with a parallax scrolling. I have the basic code but I want the images to fade out when I scroll down to to the next image and fade in when it comes on screen. I am using pure HTML and CSS, no plugins. How should I do this? Here is my code:
#divname {
background-image: url('http://lorempixel.com/1024/600/abstract/');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100vw;
height: auto;
background-attachment: fixed;
}
.text {
background-color: rgba(255, 255, 255, 0.75);
}
.header {
font-size: 10vw;
}
<div id="divname">
<div class="text">
<p class="header">Headername</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis dictum mi ac euismod. Aenean fermentum nisl ut lorem cursus, in consectetur est eleifend.</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
PS: By the way, I am fine with using javascript, but I would rather not use jQuery.
Not sure if this is what do you want,
But you need to separate your Images from the other texts, Otherwise all your #divaname will fade out when scrolling.
var myDiv = document.getElementById('divname');
function scrolled() {
if (window.pageYOffset < 100) {
myDiv.style.opacity = 1;
} else {
myDiv.style.opacity = 0.3;
}
}
window.addEventListener('scroll', scrolled);
#divname {
background-image: url('http://lorempixel.com/1024/600/abstract/');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100vw;
height: auto;
background-attachment: fixed;
transition: opacity 1s ease;
}
.text {
background-color: rgba(255, 255, 255, 0.75);
}
.header {
font-size: 10vw;
}
<div id="divname">
<div class="text">
<p class="header">Headername</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis dictum mi ac euismod. Aenean fermentum nisl ut lorem cursus, in consectetur est eleifend.</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
I have a tooltip with some text, and in order to control the tooltip's position relative to the cursor with CSS, I placed it inside a zero-sized div. Javascript moves the outer div, and the tooltip can be aligned via any of the top/right/left/bottom attributes, depending on which side it should be placed on.
However, this creates a new problem - the tooltip contents now tries to use as little width as possible. I can't disable wordwrap because it needs to fit on mobile screens. Without the outer container, it works perfectly, stretching up to the window edge. Is there a way to ignore the outer container while calculating the line breaks?
From what I can tell, the tooltip no longer 'sees' the body element so it can't know how much it can stretch. However, controlling the tooltip position directly via Javascript is more complicated if I need to align the bottom or right sides - I have to either consider tooltip size (which can change depending on its position), or set bottom/right properties and consider window size.
Here's an example: http://jsfiddle.net/03gdomLt/1/
The first tooltip works correctly, while the second one tries to shrink to zero width.
.tip-outer {
position: absolute;
top: 200px;
left: 100px;
}
.tooltip {
position: absolute;
left: 10px;
top: 10px;
border: 1px solid black;
}
<div class="tip-outer">
<div class="tooltip">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra feugiat augue, non pretium massa ultricies vel. In hendrerit tellus.
</div>
</div>
<div class="tooltip">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra feugiat augue, non pretium massa ultricies vel. In hendrerit tellus.
</div>
Looks only parent width shrinks to 0, the tooltip text are still there but are not able to fit on screen. That is because the parent div (tip-outer) is having left:100px which is forcing tooltip to shift towards right, hence not visible.
Try below css to fix it for small screen. Updated fiddle
#media only screen
and (max-width : 400px) {
.tip-outer .tooltip{
left: -90px;
}
}
I don't know if this can or can not work for your case, but positioning the element relative does enable the text to wrap correctly even if it is positioned left top bottom right.
http://jsfiddle.net/03gdomLt/3/
.tip-outer {
position: absolute;
top: 200px;
left: 100px;
}
.tooltip {
position: relative;
left: 10px;
top: 10px;
border: 1px solid black;
//white-space: pre-wrap;
}
<div class="tip-outer">
<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse accumsan lectus eget egestas fringilla.</div>
</div>
<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse accumsan lectus eget egestas fringilla.</div>
So I'm working on this site http://wiafe.github.io/Love-Nonprofits/index.html and near the bottom there are divs that hold messages. And I would like to add an hover effect that will display two buttons and a link over it. And everything I have tried has failed so checking to see if there is a way to do it. I took out the html portions I had and kept the css classes. Have been messing with it all day and it's breaking my brain right now.
HTML:
<div class="message">
<a class="message-content overlay">I<span class="heart"></span>working for a nonprofit because we care about more than our own cause. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,<br><span class="signature">Leaslie S.</span>
</a>
<a class="message-content overlay">I<span class="heart"></span>working for a nonprofit because we care about more than our own cause. <br><span class="signature">Leaslie S.</span>
</a>
</div>
CSS:
.message-content:hover {
text-decoration: none;
}
.message-content p {
color: rgba(255,255,255,1);
background: black;
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
padding: 10px;
line-height: 28px;
text-align: justify;
position: relative;
bottom: 0;
margin: 0;
height: 30px;
transition: height .5s;
-webkit-transition: height .5s;
-moz-transition: height .5s;
}
.message-content:hover small {
opacity: 0;
}
.message-content:hover .show-description p {
height: 100%;
}
.message-content .show-description small {
opacity: 1;
}
JS:
$('.message-content').hover(function() {
$(this).toggleClass('show-description');
});
Use this CSS:
.box > .appear {
opacity: 0;
transition: all 0.5s;
}
.box:hover > .appear {
opacity: 1;
}
Add class .appear to whatever you want to display on hover over .box.
JS Fiddle
i want to blur the curved shape overlayed over slider that itself is a image which is a transparent png format, i want to make effect via css3 or jquery or any other.Help me out image here
this is my code
<div class="slider_overlay_menu">
<div class="overlay_menu">
<div class="banner_questions">
<select style="width: 60%;">
<option value="Career">Lorem ipsum dolor sit amet, consectetur adipiscing elit ?</option>
<option value="Subject">Curabitur at erat ornare elit tristique porttitor eget at tellus ?</option>
<option value="Stream">Fusce laoreet, tortor quis mattis congue, enim lacus vulputate tellus ?</option>
<option value="Category">Ut imperdiet egestas purus non ultricies. Sed id aliquet magna ?</option>
</select>
<input type="submit" name="commit" value="Know How !">
</div>
</div>
</div>
css
.slider_overlay_menu
{
float: right;
position:relative;
}
.slider_overlay_menu:before
{
-webkit-fliter:blur(5px);
}
.banner_questions
{
float:right;
width:825px;
text-align:center;
position:relative;
display:block;
margin-top:50px;
}
.overlay_menu input[type="submit"]
{
margin-left:30px;
vertical-align:middle;
}
.overlay_menu
{
position: absolute;
background: url('../images/banner_bg.png')no-repeat;
height: 155px;
overflow: hidden;
width: 1007px;
right: 0;
z-index: 99998;
bottom: 10px;
padding:2%;
}
Actually, my slider is responsive, its width is 100%, and the overlay green shape is also position absolute which means when we increase the page size of the browser its changes it position.
Bottom line: I want to blur the content behind the green shape.
Just add -webkit-filter property for .overlay_menu like this:
.overlay_menu
{
position: absolute;
background: url('../images/banner_bg.png')no-repeat;
height: 155px;
overflow: hidden;
width: 1007px;
right: 0;
z-index: 99998;
bottom: 10px;
padding:2%;
-webkit-filter: blur(5px);
}