I'm trying to apply a complex parallax effect to my site. The background image should be behind the overall content and should move slower than the main content. I tried many approaches to this functionality but neither work.
So, according to what I understand, I need to first create a parallax wrapper.
.parallax-wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
This wrapper has a perspective, it hides the x overflow and sets the height of the overall content. It will be set just after the body tag.
Then, I have a section that should have a background that is a direct child of parallax-wrapper:
.latest_news_section {
display: flex;
flex-direction: column;
height: 390px;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
This section just formats the content and gives shape to it.
Then, I apply the shift of the Z plane to make sure the content is behind and it has a slower scroll:
.latest_news_section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
transform-origin: center;
background-image: url("../img/top-back.jpeg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transform: translateZ(-5px) scale(2);
}
However, the parallax starts working only when I disable overflow: hidden; from the section. And I don't know why. However, my colleague tested the same code and it worked.
Please check my version below:
HTML:
.parallax-wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
transform-style: preserve-3d;
}
.latest_news_section {
display: flex;
flex-direction: column;
height: 390px;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
transform-style: preserve-3d;
}
.latest_news_section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
transform-origin: center;
background-image: url("https://www.freecodecamp.org/news/content/images/size/w2000/2021/06/w-qjCHPZbeXCQ-unsplash.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: 1s;
transform: translateZ(-5px) scale(2);
transform-style: inherit;
}
.latest_news_section_header {
font-family: AdobeInvisFont, OpenSans, Courier;
font-size: 27px;
color: rgba(255, 255, 255, 255);
text-align: center;
margin-bottom: 55px;
}
button {
border: none;
font-family: AdobeInvisFont, Courier, OpenSans-Semibold;
font-size: 18px;
color: rgba(255, 255, 255, 255);
text-align: center;
height: 55px;
width: 170px;
border-radius: 5px;
cursor: pointer;
}
.green {
background-color: #89ca62;
margin-right: 20px;
}
.blue {
background-color: #14b9d5;
}
.some-content-to-fill {
height: 1000px;
z-index: 2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<title>Document</title>
</head>
<body>
<div class="parallax-wrapper">
<div class="latest_news_section">
<h1 class=".latest_news_section_header">
THE LATEST NEWS ON DESIGN & ARCHITECTURE
</h1>
<div class="heading-buttons container">
<button class="green">Subscribe Now</button>
<button class="blue">Best Articles</button>
</div>
</div>
<p class="some-content-to-fill">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi temporibus debitis deleniti velit suscipit est aliquid voluptates voluptatem, consequatur ratione, minima autem ex inventore reiciendis commodi, harum repellendus nam! Cupiditate,
amet expedita! Est beatae ut illum voluptatum quod nesciunt, similique minus labore consequuntur, nostrum ad ducimus libero eveniet aperiam recusandae, dignissimos totam quas ipsum explicabo! Dolore cupiditate expedita quisquam quis doloribus dolorum
laborum ad excepturi odit cumque praesentium, quasi neque quia totam ea officia quibusdam nostrum, libero, eaque atque!
</p>
</div>
</body>
</html>
Thank you. I am trying to get this for a too long time and I don't have a single clue why it doesn't work without overflow: hidden disabled. Thank you.
Scrolling is disabled when using overflow: hidden;
You need to do:
.parallax-wrapper::-webkit-scrollbar {
display: none;
}
Related
I have a transparent navbar which always keeps overlaying the main content.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css">
<!-- <script src="index.js"></script> -->
</head>
<body>
<header id="header_main">
<div id="d1">
<h1 id="h1_title_responsive">YASH</h1>
</div>
<ul id="ul_nav">
<li class="li_nav" id="li1"><img src="logo.png" id="logo_img"></li>
<li class="li_nav" id="li2">Home</li>
<li class="li_nav" id="li3">About</li>
<li class="li_nav" id="li4">Contact</li>
<h1 id="h1_title">YASH</h1>
<li id="search_li"><input name="search" id="search_box" placeholder="Search this website" type="text"></li>
</ul>
</header>
<div id="d2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsam et quam eum placeat consequatur iure at rerum? Necessitatibus numquam facilis, fugiat non eum ipsum. Aperiam maxime provident harum quia!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa excepturi a nihil laudantium corporis fugit quisquam enim natus facilis dolor. Vitae quibusdam blanditiis atque, eligendi architecto hic repellat amet accusantium!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit enim natus? Aspernatur libero alias unde veniam cumque impedit cum corrupti facere consectetur molestiae laudantium, asperiores esse quis, autem saepe
</p>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
#header_main{
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
width: 100%;
}
body{
background: red;
}
.li_nav{
list-style: none;
margin: 0.9vh 1vw;
font-size: large;
z-index: 1;
font-weight: bolder;
}
a{
color: white;
text-decoration: none;
padding: 2px;
border-radius: 3px;
}
.a_text:hover{
color: black;
background: white;
}
#li1{
color: white;
}
#logo_img{
height: 40px;
width: auto;
}
#ul_nav{
display: flex;
align-items: center;
justify-content: left;
}
#h1_title{
color: white;
display: flex;
justify-content: center;
position: absolute;
width: 100%;
}
#d1{
display: none;
}
#h1_title_responsive{
display: flex;
color: white;
justify-content: center;
position:relative;
width: 100vw;
}
#search_box{
border-radius: 7px;
height: 2em;
font-size: 80%;
font-weight: bolder;
width: 170%;
}
#search_li{
list-style: none;
position: absolute;
left: 75%;
width: 12.5%;
}
#d2{
height: 1000vh;
}
#media (max-width: 700px) {
#h1{
visibility: hidden;
}
#d1{
display: flex;
}
}
This is a screenshot of the issue:
[enter image description here][1]
https://i.stack.imgur.com/WgWoL.png
and in my css the #d2 is 1000vh because I want the navbar to work perfectly even when scrolling
The navbar position: fixed means that the navbar element is removed from the flow of the document.
You can find the full explanation of what position: fixed does here: https://developer.mozilla.org/en-US/docs/Web/CSS/position.
To prevent the navbar from covering the main content, you have to add either some padding or margin above the content.
#d2{
padding-top: // height of the navbar + some extra
}
The navbar has position fixed. Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Fix this by adding a height to your navbar.
Example:
#header_main{
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
width: 100%;
height:50px; /*set to your own*/
}
body{
margin-bottom: 10%;
margin-left: 10%;
width:80%;
color: #264653;
position: relative;
}
#photo{
border-radius: 70%;
position: absolute;
left: 25%;
top: 50px;
}
.left1{
margin-top: 10%;
background-color: #264653;
width : 30%;
color: white;
position: relative;
}
.left2{
background-color: #264653;
width : 30%;
padding-bottom: 20%;
padding-top: 25%;
padding-left: 1.5%;
color:white;
font-size: 20px;
text-indent: 12px;
}
#title{
text-align: center;
position: absolute;
left: 31.5%;
top: 0;
font-size: 25px;
border: 1px solid white;
padding : 20px 175px;
background-color: white;
color:#264653;
}
.right{
position: absolute;
left:35%;
top : 30%;
font-size: 20px;
font-weight: bold;
width: 60%;
}
.article{
display: block;
background-color: #264653;
text-transform: lowercase;
font-variant: small-caps;
padding-left: 20px;
font-size: 100%;
margin-right: 20%;
width: 90%;
}
.annee{
display: inline-block;
width: 15%;
font-weight: bold;
}
The entire page when zoomed in way too much, everything is mashing into each other and its just not appearing as the original design including images and text.
So how my webpage could appear with the same original design even with the zooming in?
ps : here I add the code, I don't what's the problem, is it because I used "positio"
Try making the website Responsive
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.</p>
<img src="img_girl.jpg" style="width:100%;">
</body>
</html>
you don't posted any code about your design, and your question is very general and it depends on your layout and styles that you use. here I posted a code and have some tips that could help you to solve your problem:
*, *::after, *::before {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 1000px;
background-color: #4b8ff0;
color: white;
margin: 20px auto;
}
.container::after {
content: "";
display: table;
clear: both
}
.leftTag {
float: left;
width: 25%;
height: 360px;
background-color: #7f000a;
}
.rightTag {
float: right;
width: 70%;
height: 360px;
background-color: #123456;
}
#media only screen and (max-width: 854px) {
.container {
width: 750px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zoom-file</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="leftTag">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor similique vel ex, quis sint at accusamus labore sit.</p>
</div>
<div class="rightTag">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis reiciendis fuga veritatis quaerat praesentium ipsa saepe commodi placeat atque provident vitae illum molestiae, adipisci repudiandae nesciunt ducimus sit ipsam ea quibusdam architecto ut qui beatae! Numquam vel mollitia, expedita iure est. Est voluptatibus, minima obcaecati accusamus, libero aperiam fugiat, repellat a hic deleniti quia maxime.</p>
</div>
</div>
</body>
</html>
here I posted a simple container that have two columns that are besides each other with "float" property. but when you zoom in the page you could inspect that the width of ".container" tag is changed to 750px at some level of zoom. this is because of "#media" rule of css that you can read more about it here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
other links that are usefule are about javascript "resize" method and window width that could help you:
https://www.w3schools.com/jsref/event_onresize.asp
https://www.w3schools.com/jsref/prop_win_innerheight.asp
the last thing that I could add is that it is better to use relative units (like width:45%) to force the tags to have relative size to their parents. in this way you need lower changes on different "window size". because when you zoom in or out actually the browser window width is changed.
HI #issou Ok so to solve your problem you have to change all your unite PX into rem because when you set value with unite PX you fix it to be for example 16px whatever the zoom , but when you set for example
1rem =16px by default so 1rem it will be responsive with the zoom ,
also
you can change:
1rem =16px in the ::root element of your page HTML.
I hope that helpful, if I don't understand your question let me know ("_")
I want to centre the content on my page. I have a button and a paragraph of text on my page.
I'm new to css so I don't know what I should try.
body {
margin: 0 auto;
}
button {
top: 921px;
left: 400px;
width: 180px;
height: 60px;
background: #ff9b52 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
}
p.text {
top: 2639px;
left: 1014px;
width: 398px;
height: 88px;
text-align: left;
font: Regular 20px/27px Segoe UI;
letter-spacing: 0;
color: #39316c;
opacity: 1;
}
<button>Click Me</button>
<p class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis
necessitatibus sed officiis repellat illo ratione libero recusandae
tempora dolorum excepturi. Velit odio mollitia nam vel, nulla nostrum
officiis exercitationem esse!
</p>
You can use display: flex;
body,
html {
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
p {
text-align: center;
}
button {
width: 180px;
height: 60px;
background: #ff9b52 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
}
<div class="container">
<button>Click Me</button>
<p class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis necessitatibus sed officiis repellat illo ratione libero recusandae tempora dolorum excepturi. Velit odio mollitia nam vel, nulla nostrum officiis exercitationem esse!
</p>
</div>
Used flexbox for that:
body {
margin: 0 auto;
}
.wrapper {
display: flex;
align-items:center;
flex-direction: column;
justify-content: center;
height: 100vh;
}
button {
top: 921px;
left: 400px;
width: 180px;
height: 60px;
background: #ff9b52 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
}
p.text {
top: 2639px;
left: 1014px;
width: 398px;
height: 88px;
text-align: left;
font: Regular 20px/27px Segoe UI;
letter-spacing: 0;
color: #39316c;
opacity: 1;
}
<div class="wrapper">
<button>Click Me</button>
<p class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis
necessitatibus sed officiis repellat illo ratione libero recusandae
tempora dolorum excepturi. Velit odio mollitia nam vel, nulla nostrum
officiis exercitationem esse!
</p>
</div>
You can use flexbox. Take a look at this https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
Here is the solution for your current problem.
html,body, .wrapper {
margin: 0;
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
button {
width: 180px;
height: 60px;
background: #ff9b52 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
}
p.text {
width: 398px;
height: 88px;
text-align: left;
font: Regular 20px/27px Segoe UI;
letter-spacing: 0;
color: #39316c;
opacity: 1;
}
<div class="wrapper">
<button>Click Me</button>
<p class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis necessitatibus sed officiis repellat illo ratione libero recusandae tempora dolorum excepturi. Velit odio mollitia nam vel, nulla nostrum officiis exercitationem esse!
</p>
</div>
You can use flexbox technique as they say in other comments or you can add some lines to you code.
Add to body text-align: center; and add to p.text margin: 0 auto;
Your CSS code will become like that:
body {
margin: 0 auto;
text-align: center;
}
button {
top: 921px;
left: 400px;
width: 180px;
height: 60px;
background: #ff9b52 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
}
p.text {
margin: 0 auto;
top: 2639px;
left: 1014px;
width: 398px;
height: 88px;
text-align: left;
font: Regular 20px/27px Segoe UI;
letter-spacing: 0;
color: #39316c;
opacity: 1;
}
See demo here
Just add
text-align: center;
and remember to remove the
text-align: left;
from your p.text
Some things to consider;
You are using top and left rules without giving a position rule value other than static (the default value). In your case you should use position: absolute
Don't use positioning with absolute values, if you don't need to. Absolute values (px unit) are not flexible enough to adjust to window size. Use relative units like % or vw/vh
For your contents to act as a group of elements, you should wrap it with a container element, which you then position accordingly (I used <div class="center"></div>)
I positioned this center container element absolutely using top: 50vh and left: 50vw. 100vh is 100 per cent of the view height, i.e. the inner window height and 100vw is 100 per cent of the view width likewise
This positioning is not enough, because it will position the top left corner of the .center element at the center of the window. We need to have a correction. I use transform: translate(-50%, -50%). This will shift an element 50% of its width to the left and 50% of its height to the top, making it perfectly centered.
There are alternatives like flexbox mentioned in the other posts, but this one is a little bit more straightforward for a beginner like you. Nonetheless it is recommended to learn flexbox. You might want to read A complete guide to flexbox on css-tricks.com
body {
margin: 0 auto;
}
.center {
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
}
button {
width: 180px;
height: 60px;
background: #ff9b52 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
}
p.text {
width: 398px;
height: 88px;
text-align: left;
font: Regular 20px/27px Segoe UI;
letter-spacing: 0;
color: #39316c;
opacity: 1;
}
<div class="center">
<button>Click Me</button>
<p class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis necessitatibus sed officiis repellat illo ratione libero recusandae tempora dolorum excepturi. Velit odio mollitia nam vel, nulla nostrum officiis exercitationem esse!
</p>
</div>
I am working this popup section. On larger screens there are 2 images stacked on the left. When the screen is smaller (tablet/phone) they are side by side.
I cannot find whats wrong here, but my images are different sizes. On the large screen I notice a 1px white line on the left side. On the smaller screens its off on the top.
I noticed the pictures are slightly different sizes. I went back through the my code to see if I could notice anything that was adding this extra white space, but I can't see anything besides the different photo ratios (2000X1333px) and (2000X1376px)...
I am following a video and the persons images seem to be the same size?
Photos and code attached, help very much appreciated!
Large screen
Small Screen
Codepen Link for extra CSS/HTML It may help with clarity, although it doesnt have the images for the visual problem.
<div class="popup__left">
<img src="img/nat-8.jpg" alt="Tour Photo" class="popup__img">
<img src="img/nat-9.jpg" alt="Tour Photo" class="popup__img">
</div>
<div class="popup__right">
×
<h2 class="heading-secondary">Start booking now</h2>
<h3 class="heading-tertiary">Important – Please read the terms and conditions first</h3>
<p class="popup__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum molestias recusandae id consequuntur odio alias dolores culpa reiciendis hic incidunt eos ipsa qui, doloribus consequatur voluptas enim obcaecati laborum mollitia aperiam ut. Molestias dicta, ipsa iusto esse commodi neque unde ipsam dolor quasi? Expedita, earum nemo? Soluta aspernatur nulla, doloremque harum, corrupti unde adipisci id officiis repudiandae vel, odio mollitia. Ab esse placeat quod earum aliquid iure! Ipsum assumenda, recusandae quia perspiciatis maiores quos sunt? Molestiae unde deleniti id repudiandae porro et, incidunt explicabo, similique quibusdam voluptatum a, sunt impedit?</p>
Book now!
</div>
</div>
</div>
.popup {
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba($color-black, .8);
z-index: 9999;
visibility: hidden;
opacity: 0;
transition: all .3s;
&__content {
#include absCenter;
width: 75%;
background-color: $color-white;
box-shadow: 0 2rem 4rem rgba($color-black, .2);
border-radius: 3px;
display: table;
overflow: hidden;
opacity: 0;
transform: translate(-50%, -50%) scale(.25);
transition: all .4s .2s;
}
&__img {
display: block;
width: 100%;
#include respond(tab-port) {
display: inline-block;
width: 49%;
}
}
&__left {
width: 33.333333%;
display: table-cell;
#include respond(tab-port) {
display: block;
width: 100%;
padding: 3rem 5rem 0rem 5rem;
}
}
&__right {
width: 66.666667%;
padding: 3rem 5rem;
display: table-cell;
vertical-align: middle;
#include respond(tab-port) {
display: block;
width: 100%;
}
}
&__text {
font-size: 1.4rem;
margin-bottom: 4rem;
-moz-column-count: 2;
-moz-column-gap: 4rem;
-moz-column-rule: 1px solid $color-gray-light-2;
column-count: 2;
column-gap: 4rem;
column-rule: 1px solid $color-gray-light-2;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
#include respond(tab-port) {
-moz-column-count: 1;
column-count: 1;
}
}
//Popup open state
&:target {
visibility: visible;
opacity: 1;
}
&:target &__content {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
&__close {
&:visited,
&:link {
color: $color-gray-dark;
position: absolute;
top: 2.5rem;
right: 2.5rem;
font-size: 3rem;
text-decoration: none;
display: inline-block;
transition: all .3s;
line-height: 1;
}
&:hover {
color: $color-primary;
}
}
}
You are using popup__left width=33.33% and popup__img width=100% and the 100% of image is bigger then 33% of your screen. Try to set overflow:hidden on the popup__left (needs to define width and height).
If it doesn't work, try to set z-index:1 to left and z-index:0 to the right because that line is from the border of popup__text (column-rule: 1px solid $color-gray-light-2).
I am having a simple web page with a navigation bar. When is toggle my navigation bar I want the rest of area in my page to be overlay live Youtube(A sample image is attached below). But after trying 100 time the result is attached below(A sample image is attached below).The problem is it's not overlaying the element which has defined color attribute.
My css code to achieve overlay:
.overlay{
width: 100%;
position: fixed !fixed;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5) !important;
z-index:0;
cursor: pointer;
}
You need to add an higher z-index and a grey background overlay.
$(".btn").click(function () {
$(".overlay").show();
});
.overlay {
background-color: rgba(128, 128, 128, 0.40);
position: fixed;
width: 100%;
height: 100%;
z-index: 99999;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="overlay">
</div>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit.</div>
<input type="text">
<button class="btn btn-success">Submit</button>
</div>
The below example just plays with visibility and opacity of overlay wrapper.
$("#click").on("click", function(){
$(".orientation-check-wrapper").toggleClass('show-overlay');
});
.orientation-check-wrapper {
height: 100vh;
position: fixed;
width: 100%;
background: rgba(0,0,0,0.7);
z-index: 99;
top: 0;
opacity:0;
transition: .4s all;
opacity: 0;
visibility: hidden;
}
.orientation-check-text {
top: 100px;
right: 0;
left: 0;
bottom:0;
position: absolute;
margin: 0 auto;
width: 390px;
height: 18px;
background: #fff;
padding: 12px;
border-radius: 8px;
box-shadow: 0 0 10px #3493c1;
font-size: 13px;
color: #000;
text-align:center;
font-family: sans-serif;
}
.show-overlay{
opacity: 1;
visibility: visible;
}
#click{
z-index: 999;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="click" id="click" />
<div class="orientation-check-wrapper">
<div class="orientation-check-text">This application is best supported on resolutions above 800px</div>
</div>
I would like to add the possibility of usage of css filters in this case, as a side technique.
They are now widely available into many browsers, we can with them do pretty nice stuffs, without adding an overlay.
Here on this simple example, the blur filter is used. The filter is added by javascript alone. This way, there is no need to modify the html or the css. It can be useful.
I took the html from the top answer, which is the good regular way to do this.
document.getElementsByClassName("content")[0].setAttribute("onclick","this.style.filter='blur(2px)'")
<div class="overlay">Some text
</div>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit.</div>
<input type="text">
<button class="btn btn-success">Submit</button>
</div>
The list of css filters:
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
Further infos: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
I have updated a post with some code which may probably very helpful to simulate YouTube like overlay.
$(document).ready(function() {
$(".overlay, .close").hide();
$("#btnClickme").bind("click", function() {
$(".overlay, .close").fadeIn();
$(".wrapper-btn").fadeOut();
});
$(".btnClose").bind("click", function() {
$(".overlay, .close").fadeOut();
$(".close").unbind("click");
$(".wrapper-btn").fadeIn();
});
});
* {
font-family: 'arial';
font-size: 12px;
}
.close a {
color: #ffffff;
right: 0px;
top: 0px;
font-size: 10px;
position: relative;
z-index: 1;
display: block;
text-decoration:none;
font-size:13px;
}
.close {
position: absolute;
}
.overlay-wrapper {
float: left;
width: 200px;
height: 200px;
position: absolute;
padding: 10px;
}
.wrapper-row {
float: left;
}
.overlay {
float: left;
position: relative;
background-color: #000000;
width: 200px;
height: 200px;
margin: 10px;
opacity: 0.5;
filter: alpha(opacity=50);
/* For IE 8 & 9 (more valid) */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overlay-wrapper'>
<div class="wrapper-row">
<img src="http://via.placeholder.com/200x200" />
</div>
<div class="wrapper-row wrapper-btn">
<input type="button" id="btnClickme" name="btnClickme" value="click here" />
</div>
<div class="close">
<a href="javascript:void(0);" class="btnClose">
(close)
</a>
</div>
</div>
<div class="overlay"></div>
Assuming that you have a structure like this
<aside class="sidebar">
<!-- Stuff-->
</aside>
<section class="content">
<!-- More stuff -->
</section>
and an open class is added to sidebar when the bar is opened, you can use the adjacent sibling combinator to get the overlay
.sidebar.open + .content:before {
width: 100%;
position: fixed !fixed;
display: block;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5) !important;
z-index:0;
cursor: pointer;
}