I'm trying to add an overlay to my page which is 100% in size. The problem is that the inner divs and buttons are not clickable anymore. Is there a way out of this?
I used the answer here to add the overlay: CSS: How to get this overlay to extend 100% with scrolling?
What i'm trying to achieve is like the mask we add to a layer/group in photoshop.
Thanks
The overlay, being on a layer above that of the button container, is most likely intercepting pointer events. Disable them:
.overlay {
pointer-events: none;
}
you need to use a little bit of JavaScript or JQuery
here is the html page with JQuery and CSS
<!doctype html>
<html lang="en">
<head>
<title>
tester
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".overlay").fadeIn();
$(".popup").fadeIn();
});
$(".overlay").click(function(){
$(".overlay").hide();
$(".popup").hide();
});
});
</script>
<style>
*
{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "helvetica ";
}
button
{
position: absolute;
left: 47%;
height: 50px;
border: none;
top: 10%;
width: 5%;
border-radius: 10px/150px;
transition: 0.5s;
z-index: -2;
}
button:hover
{
cursor: pointer;
background: #212121;
color: white;
font-size: 20px;
}
.overlay
{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 667px;
background: black;
z-index: 1000;
opacity: 0.5;
display: none;
}
.overlay:hover
{
cursor: pointer;
}
.popup
{
width: 50%;
height: 350px;
background: white;
z-index: 1001;
position: absolute;
left: 25%;
top: 25%;
border-radius: 20px;
padding:15px;
text-align: center;
font-size: 36px;
display: none;
}
</style>
</head>
<body>
<button>
Pop up
</button>
<div class="overlay">
</div>
<div class="popup">
<p>AM A Pop Up</p>
<input type="button" value="click me">
</div>
</body>
</html>
Related
I struggle to get my hover to connect with a GIF. Obviously, it does not show when I set display:none on the text, but I thought the #witch:hover ~ text{ display:block} really would work.
#animcontainer {
position: relative;
margin: auto;
overflow-y: hidden;
#witch {
position: absolute;
left: 2950px;
height: 150px;
bottom: 50px;
z-index: 2` #hello {
position: absolute;
display: none;
border: 25px;
padding: 1.5rem;
background-color: orange;
left: 3100px;
font-size: 20px;
border-radius: 20px;
text-align: center;
bottom: 200px;
left: 2900px;
z-index: 1;
}
#witch:target~#hello {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="animcontainer">
<div id="hello"> text</div>
<img id="potato" src="url">
</div>
</body>
</html>
I'm doing an exercise and although I've centered vertically previously, in this case, I'm not being able to center it.
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body {
position: relative;
height: 100%;
width: 100%;
}
.search-init {
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
Add a height to the html element:
html { height: 100%; }
and it will work - the body needs space to occupy, so giving html a 100%, the body can then occupy the full 100% height.
Remove position:relative from body and it would be in center
Here is updated code
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body {
/*position: relative;*/
height: 100%;
width: 100%;
}
.search-init {
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
Declare body position with 'absolute'.
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body {
position : absolute;
height: 100%;
width: 100%;
}
.search-init{
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
position : absolute;
top : 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
Make it easy. Use div instead of html and boy. HTML will like this.
<html lang="en">
<body>
<div class="box-table">
<div class="box-table-cell">
<img src="http://placehold.it/250x150/121212/ffffff?text=Vertically+center+imag" />
</div>
</div>
</body>
</html>
CSS
.box-table{
display: table;
height: 500px;
margin-left: auto;/* If you want to center this box */
margin-right: auto;/* If you want to center this box */
text-align: center;
width: 500px;
}
.box-table{ /* This CSS for full window */
bottom: 0;
display: table;
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
position: fixed;/* You can use absolute */
right: 0;
text-align: center;
top: 0;
width: 100%;
}
.box-table-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
img{
vertical-align: middle;
}
body{
background-color: #ff0000;
margin: 0;
padding: 0;
}
.box-table{
background-color: rgba(0, 0, 0, 0.85);
bottom: 0;
display: table;
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-right: 17px;
position: fixed;/* You can use absolute */
right: 0;
text-align: center;
top: 0;
width: 100%;
}
.box-table-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
img{
vertical-align: middle;
}
<html lang="en">
<body>
<div class="box-table">
<div class="box-table-cell">
<img src="http://placehold.it/600x350/121212/ffffff?text=Vertically+center+imag" />
</div>
</div>
</body>
</html>
Try this
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body,html {
position: relative;
height: 100%;
width: 100%;
}
.search-init {
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
I am familiar with HTML/CSS but am not advanced by any means.
I am having difficulty styling my form element.
I want to add padding around my form however whenever I do this is only pads the top and the left
The other issue is that when I re-size the window really small the form tag seems to protrude out of the
I would like to know what the proper way to do this is.
Also, if you could look over my simple code and let me know if there is a better/more standard way to do what I am trying to do here.
* {
box-sizing: border-box;
font-size: 15px;
margin: 0;
}
body {
padding: 5%;
}
section {
height: 100%;
float: left;
position: relative;
}
div {} .left-section {
width: 25%;
}
.right-section {
width: 75%;
}
.body-left {
background-color: #000000;
height: 93%;
}
.body-right {
background-color: #DCDCDC;
height: 86%;
}
.header {
background-color: #808080;
height: 7%;
}
.footer {
background-color: #808080;
height: 7%;
width: 100%;
position: absolute;
padding: 5px;
}
form {
position: absolute;
height: 100%;
width: 100%;
display: block;
}
input {
background-color: #808080;
border-style: solid;
border-width: small;
border-color: #555555;
border-radius: 5px;
position: absolute;
padding: 10px;
left: 0;
height: 80%;
width: 90%;
top: 50%;
transform: translateY(-50%);
}
button {
background-color: #808080;
border-style: solid;
border-width: small;
border-color: #555555;
border-radius: 5px;
height: 80%;
width: 10%;
position: absolute;
color: #555555;
top: 50%;
right: 0;
transform: translateY(-50%);
}
<html>
<head>
<title>whisper</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="left" class="left-section">
<div id="header_left" class="header">
</div>
<div id="body_left" class="body-left">
<ol id="users"></ol>
</div>
</section>
<section id="right" class="right-section">
<div id="header_right" class="header">
</div>
<div id="body_right" class="body-right">
<ol id="messages"></ol>
</div>
<div id="footer" class="footer">
<form id="form_id" action="#">
<input id="user_input" />
<button id="btn_id">send</button>
</form>
</div>
</section>
</body>
</html>
P.S. I have checkout this page but I couldn't find a sufficient answer.
I do not know if this helps but I switched the padding of 5 pixels from the footer class to the form styling.
.footer {
background-color: #808080;
height: 7%;
width: 100%;
position: absolute;
}
form {
position: absolute;
height: 100%;
width: 100%;
display: block;
padding: 5px;
}
I'm working on a site right now where I've got to have some images that, on hover, dim and display some text (price, item name, etc.). So I've got a for the wrapper, and then a for the image itself and a for the overlay text. The image div and the overlay div are children of the wrapper.
The wrapper has position: relative, and the image and overlay have position: absolute. The image div has a z-index of 10, and the overlay a z-index of 0. On hover, the image dims to 50% opacity, and the text appears, just like it should. Except... wherever the text is in contact with the image, it also has 50% opacity. Text outside of the image has normal opacity.
How do I make it so that all of the text has an opacity of 1?
HTML:
<section class="first-section">
<div class="outfitcontainer">
<div class="outfit">
<img src="purelyoutfit1.png" width="100%" height="100%"/>
</div>
<div class="overlay">
<p class="price">$350<s> $4200</s></p>
<p class="item">FURR COAT</p>
<p class="designer">Antonio Marras</p>
</div>
</div>
</section>
CSS:
.first-section {
width: 80%;
margin-left: 10%;
background-color: #FFFFFF;
height: auto;
}
.outfitcontainer {
position: relative;
float: left;
width: 20%;
height: auto;
background-color: #FFFFFF;
margin: 25px;
}
.outfit, .overlay {
position: absolute;
width: 200px;
height: auto;
top: 0;
left: 0;
}
.outfit {
z-index: 10;
background-color: white;
}
.outfit:hover {
opacity: .5;
cursor: pointer;
}
.overlay {
z-index: 0;
text-align: center;
font-weight: bold;
}
.overlay p {
display: block;
padding: 30px 0;
color: black;
}
The easiest route to go would be to not make the image opaque, but have the overlay create that opacity for you. If you give the overlay an opaque background(either with css or an png image), you will be able to pull off exactly what you need.
A few code modifications should help solve the problem.
HTML
<section class="first-section">
<div class="outfitcontainer">
<div class="overlay">
<div class="text">
<p class="price">$350<s> $4200</s></p>
<p class="item">FURR COAT</p>
<p class="designer">Antonio Marras</p>
</div>
</div>
<img src="http://i.imgur.com/hDLwTh8.gif" width="100%" height="100%"/>
</div>
</section>
CSS
.first-section {
width: 80%;
margin-left: 10%;
background-color: #FFFFFF;
height: auto;
}
.outfitcontainer {
position: relative;
float: left;
width: 20%;
height: auto;
background-color: #FFFFFF;
margin: 25px;
}
.outfit, .overlay {
position: absolute;
width: 200px;
height: auto;
top: 0;
left: 0;
}
.overlay {
height: 400px;
display: none;
background: rgba(255, 255, 255, 0.5);
text-align: center;
font-weight: bold;
}
.overlay p {
display: block;
padding: 30px 0;
color: black;
}
img {
width: 200px;
position: absolute;
height: 400px;
}
.outfitcontainer:hover > .overlay {
display: block;
}
.outfit {
z-index: 10;
background-color: white;
}
.outfit:hover {
cursor: pointer;
}
Try this:
.yourClass > *{
opacity:1;
}.yourClass > *:hover{
opacity:1;
}
Good Luck!
I am developing a website in that i want to Play some videos on the div lightbox (while clicking the link), Please let me know what is the wrong inthe below code.
<html>
<head>
<title>Light Box Video EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
Height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.5;
opacity:.80;
filter: alpha(opacity=63);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 600px;
height: 290px;
padding: 1px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
Clic here to open the light box.
here
<div id="light" class='white_content'>Here i need the Video so that when the user click the Link it will open the lightdiv and play the vedio
Your a has an onclick attribute 'fShowDiv()', which means that when the a is clicked the function fShowDiv should be executed. This function is missing from your code. The following works for me:
<html>
<head>
<title>Light Box Video EXAMPLE</title>
<style>
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.5;
opacity:.80;
filter: alpha(opacity=63);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 600px;
height: 290px;
padding: 1px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script type="text/javascript">
function fShowDiv()
{
document.getElementById('light').style.display = 'block'
document.getElementById('fade').style.display = 'block'
}
</script>
</head>
<body>
Clic here to open the light box.
here
<div id="light" class='white_content'>
Here i need the Video so that when the user click the Link it will open the lightdiv and play the vedio
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>