I have a overlay problem. I would like to show a text if my overlay is on. If the user clicks then the overlay should go off and the body content should be seen.
But how can I make a text or a picture over the overlay?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#overlay {
position: fixed;
display: none;
-webkit-filter:blur(4px);
filter:blur(4px);
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:rgba(255,255,255, 0.9);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="overlay" onclick="off()">
<div id="text">Overlay Text</div>
</div>
<body onload="on()">
sguhdulfghldusfhgsdufg
</body>
<script>
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
</script>
</body>
</html>
Basically, you just need to change the color of the overlay text to make it visible. But then you have the problem that blur will also apply to your child elements and the text is not readable.
In order to make it work you need to create a child element which holds the blur to make sure it does not apply to the overlay text.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:rgba(255,255,255, 0.9);
z-index: 2;
cursor: pointer;
}
#blur {
width: 100%;
height: 100%;
-webkit-filter:blur(4px);
filter:blur(4px);
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="overlay" onclick="off()">
<div id="background"></div>
<div id="text">Overlay Text</div>
</div>
<body onload="on()">
sguhdulfghldusfhgsdufg
</body>
<script>
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
</script>
</body>
</html>
Related
I am trying to set transition on changing position of .ball div. But its not working.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.stage{
height: 300px;
width: 300px;
background-color: lightblue;
margin: 50px auto;
position: relative;
}
.ball {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: rgb(119, 40, 40);
position: absolute;
left: 0;
top: 0;
transition: 2s;
}
.stage:hover .ball{
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="stage">
<div class="ball"></div>
</div>
</body>
</html>
I wanted .ball to move from top-left to bottom-right. But its not working
Not sure if this is what you want, but I added the effect on hover, starting from 0 :
<html lang="en">
<head>
<style>
.stage{
height: 300px;
width: 300px;
background-color: lightblue;
margin: 50px auto;
position: relative;
}
.ball {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: rgb(119, 40, 40);
position: absolute;
left: 0;
top: 0;
transition: 2s;
transition-timing-function: ease-in-out;
}
.stage:hover .ball{
top: 100%;
left: 100%;
}
</style>
</head>
<body>
<div class="stage">
<div class="ball"></div>
</div>
</body>
</html>
I am not sure if this is a simple task to accomplish but I've had no success so far.
Let me explain the problem a little so that you understand what's going on.
The body element contains one div which contains a background that covers the entire window. I want this very big div to contain a smaller one somewhere in the middle. A transparent one. So whenever I would hover over the invisible div the parent would zoom from there.
This is me trying to accomplish a CSS zoom effect in a certain area of a picture. Whenever I leave the entire invisible div I want the huge background to return to its original zoom.
Here's some code.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
</script>
</head>
<body>
<div id="indexPage" class="indexPage">
<div id="indexInvisible" class="indexInvisible"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
font-family: Arial, Tahoma;
font-size: 12px;
}
.indexPage {
background: url("map.jpg");
width: 100%;
height: 100%;
background-size: cover;
position: fixed;
transition: transform .2s;
}
.indexPage > .indexInvisible {
width: 80%;
height: 80%;
background: black;
margin: 5% auto 0 auto;
}
Thanks a lot in advance!
-> please update css into your css file
* {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
font-family: Arial, Tahoma;
font-size: 12px;
}
.indexPage {
background: url("map.jpg");
width: 100%;
height: 100%;
background-size: cover;
position: fixed;
}
.indexPage > .indexInvisible {
width: 80%;
height: 80%;
background: black;
margin: 5% auto 0 auto;
overflow: hidden;
transition: transform .2s;
-webkit-transition: transform .2s;
-moz-transition: transform .2s;
-ms-transition: transform .2s;
}
.indexPage:hover .indexInvisible {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="indexPage" class="indexPage">
<div id="indexInvisible" class="indexInvisible"></div>
</div>
</body>
</html>
Use a background-image:inherit on the inner div and leverage background-size on hover.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
}
.map {
width: 860px;
height: 480px;
background-image: url(https://www.homesinc.com/wp-content/uploads/2017/05/1.jpg);
margin: 10px;
border: 5px solid red;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
;
}
.zoomer {
width: 80%;
height: 80%;
background: inherit;
border: 3px solid blue;
background-size: 125% 125%;
transition: background-size .5s ease;
background-position: center center;
}
.zoomer:hover {
background-size: 150% 150%;
}
<div class="map">
<div class="zoomer"></div>
</div>
I'm trying to apply CSS transform property to two elements(Parent and child) But the problem is when i adding transform to parent then it affects child positioning.
An Example:
$('.dropdownToggler').click(function() {
$('.dropdown').toggleClass('-isOpen')
});
$('.test').click(function() {
$('.topbar').toggleClass('transform');
});
* {
box-sizing: border-box;
}
.topbar {
position: fixed;
height: 45px;
background: #333;
top: 0;
right: 0;
left: 0;
padding: 12px;
color: #fff;
/* remove comment below */
/*transform: translateY(0);*/
}
.topbar.transform {
transform: translateY(0);
}
.dropdown {
background: #ddd;
height: 100%;
position: fixed;
top: 45px;
right: 0;
left: 0;
color: #333;
/* main styles */
transform: translateY(100%);
transition: transform 300ms ease-in-out;
will-change: transform;
}
.dropdown.-isOpen {
transform: translateY(0%);
}
.test {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="topbar">
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<button class="dropdownToggler">Open Menu</button>
<button class="test">toggle `transform` to parent</button>
<div class="dropdown">Notifications</div>
</div>
</body>
</html>
When you add transform: translateY(0); to the topbar (Parent) then notifications panel(Child) positioning based on parent. I'm trying to prevent this behavior.
For smoother animations, I've used transform, of course, we can use CSS top. Any suggestion? Thank you for devoting your time.
You could set the height of .dropdown in viewport units (100vh - the height of the topbar)
Example:
$('.dropdownToggler').click(function() {
$('.dropdown').toggleClass('-isOpen')
});
$('.test').click(function() {
$('.topbar').toggleClass('transform');
});
* {
box-sizing: border-box;
}
.topbar {
position: fixed;
height: 45px;
background: #333;
top: 0;
right: 0;
left: 0;
padding: 12px;
color: #fff;
/* remove comment below */
/*transform: translateY(0);*/
}
.topbar.transform {
transform: translateY(0);
}
.dropdown {
background: #ddd;
height: calc(100vh - 45px);
position: fixed;
top: 45px;
right: 0;
left: 0;
color: #333;
/* main styles */
transform: translateY(100%);
transition: transform 300ms ease-in-out;
will-change: transform;
}
.dropdown.-isOpen {
transform: translateY(0%);
}
.test {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="topbar">
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<button class="dropdownToggler">Open Menu</button>
<button class="test">toggle `transform` to parent</button>
<div class="dropdown">Notifications</div>
</div>
</body>
</html>
I need to put some text on the pic and it has to stay there forever in that exactly color. I did it, but when I hover on a pic - text disappears. What should I do?
Didn't find answer.
I want text being there all the time with and without hovering. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay{
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
}
.photo-text.one:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
}
</style>
</head>
<body>
<div class="photo-text one">
<div class="img-overlay">
</div>
<h2 class="text">fffff</h2>
</div>
</body>
</html>
Add the z-index property to your text.
Information here
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay {
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
}
.photo-text.one:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay">
</div>
<h2 class="text">fffff</h2>
</div>
How do I get the green div to overlap my DOCX or PDF IFrame in IE? Using z-indexes doesn't work.
<html>
<head>
<style>
html, body {
width: 100%;
height: 100%;
}
#container {
position: absolute;
top: 25px;
left: 50px;
right: 50px;
bottom: 25px;
overflow: hidden;
z-index: 1;
}
#overlap {
background-color: green;
position: absolute;
height: 100%;
width: 250px;
overflow: hidden;
right: 0;
z-index: 10;
}
</style>
</head>
<body>
<div id="container">
<iframe height="100%" width="100%" src="Test.docx"></iframe>
</div>
<div id="overlap">
</div>
</body>
</html>