This is my html modal code
<div class="modal">
<div class="modal-body">
</div>
</div>
<div class="modal-background"></div>
This is my CSS
modal {
position: fixed;
top: 53px;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
overflow: auto;
transition: opacity 0.4s, bottom 0.4s;
opacity: 1;
.modal-body {
padding-left: 70px;
background: #fff;
border: 0;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
}
.modal-background {
position: fixed;
top: 55px;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: 0.75;
z-index: 900;
}
}
body.modal-open {
overflow: hidden;
}
I have tried to add slide down animation transition when open modal, but i dont know why this didn't work, can someone help me?. Thanks in advance
Related
The goal is to create a simple and CSS-only modal window (popup), when the user clicks a link.
With no dependencies or any kind of script, and with as less code as possible.
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
<div class="box">
<a class="button" href="#popup1">Open</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
</div>
</div>
I created this simple modal window:
.exit-intent {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
background-color: rgba(255, 255, 255, .8);
z-index: 7;
display: flex;
flex-direction: column;
height: 100vh;
overflow-y: auto
}
.exit-intent {
position: fixed;
max-width: 500px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.9);
visibility: hidden;
opacity: 0;
z-index: 1;
}
.exit-intent:target {
visibility: visible;
opacity: 1;
}
.exit-intent-close {
position: absolute;
max-width: 500px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.9);
}
.exit-intent .close {
position: absolute;
right: 5px;
top: 5px;
padding: 5px;
color: #000;
font-size: 2em;
line-height: 0.6em;
font-weight: bold;
}
.exit-intent .close:hover {
color: #999;
}
.close-exit-intent {
background: rgba(0, 0, 0, 0.7);
cursor: default;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
visibility: hidden;
}
.exit-intent:target+.close-exit-intent {
opacity: 1;
visibility: visible;
}
Link
<div id="exit-intent" class="exit-intent">
×
<h2>Window</h2>
</div>
I am trying to create a page banner which is an image with text over it. There are two things I am facing trouble with two things.
I need a smooth vignette effect on these images so that the text is clearly visible. I have tried the following but am not happy with the end result. I would like to get something as shown in the following image which shows a kind of smooth transition.
The text hides below the vignette effect. I tried using z-index but it does not work.
body {
margin: 0px;
}
#page-banner img {
width: 100%;
object-fit: cover;
height: 48vh;
}
#page-banner .vignette:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
-webkit-box-shadow: inset 20em 5em 15em black;
-moz-box-shadow: inset 20em 5em 15em black;
box-shadow: inset 20em 5em 15em black;
z-index: 0;
}
#page-banner .text {
width: 50%;
right: 50%;
z-index: 1;
}
#page-banner .text-over-image {
position: relative;
}
#page-banner .text-over-image p {
font-size: 60px;
color: white;
margin: 0;
position: absolute;
top: 50%;
left: 15%;
right: 45%;
transform: translate(-10%, -50%);
}
<section id="page-banner">
<div class="text-over-image vignette">
<img src="https://wallpaperaccess.com/full/5117570.jpg">
<div class="text">
<p>I am trying to learn adding vignette to images</p>
</div>
</div>
</section>
In your example, you used:
#page-banner .vignette::after
but you could just use:
#page-banner .vignette::before
instead.
That would position the pseudo-element underneath the content of .vignette, rather than over the top of it.
Working Example:
body {
margin: 0px;
}
#page-banner img {
width: 100%;
object-fit: cover;
height: 100vh;
}
#page-banner .vignette::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
box-shadow: inset 20em 5em 15em black;
z-index: 0;
}
#page-banner .text {
width: 50%;
right: 50%;
z-index: 1;
}
#page-banner .text-over-image {
position: relative;
}
#page-banner .text-over-image p {
font-size: 60px;
color: white;
margin: 0;
position: absolute;
top: 50%;
left: 15%;
right: 45%;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
transform: translate(-10%, -50%);
}
<section id="page-banner">
<div class="text-over-image vignette">
<img src="https://wallpaperaccess.com/full/5117570.jpg">
<div class="text">
<p>I am trying to learn adding vignette to images</p>
</div>
</div>
</section>
You need change z-index: 1 to #page-banner .text-over-image p to show the text.
To simulate smooth effect I put an opacity property.
If you want a really smooth effecty try change your font or use font-smooth but this feature is non-standard:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
body {
margin: 0px;
}
#page-banner img {
width: 100%;
object-fit: cover;
height: 48vh;
}
#page-banner .vignette:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
-webkit-box-shadow: inset 20em 5em 15em black;
-moz-box-shadow: inset 20em 5em 15em black;
box-shadow: inset 20em 5em 15em black;
z-index: 0;
}
#page-banner .text {
width: 50%;
right: 50%;
}
#page-banner .text-over-image {
position: relative;
}
#page-banner .text-over-image p {
z-index: 1;
opacity: 0.88;
font-size: 60px;
color: white;
margin: 0;
position: absolute;
top: 50%;
left: 15%;
right: 45%;
transform: translate(-10%, -50%);
animation: fadeIn 8s infinite alternate;
}
#keyframes fadeIn {
from {
left: 13%;
opacity: 0.69;
color: white;
}
to {
left: 18%;
opacity: 0.88;
color: whitesmoke;
text-shadow: 2px 2px 8px gray;
}
}
<section id="page-banner">
<div class="text-over-image vignette">
<img src="https://wallpaperaccess.com/full/5117570.jpg">
<div class="text">
<p>I am trying to learn adding vignette to images</p>
</div>
</div>
</section>
Update:
I put an animation suggestion using #keyframes alternating:
opacity, left and text-shadow values in 8s
#keyframes fadeIn {
from {
left: 16%;
opacity: 0.69;
text-shadow: 2px 2px 8px whitesmoke;
}
to {
left: 18%;
opacity: 0.88;
text-shadow: 2px 2px 8px gray;
}
}
Dont' use box-shadow. Instead give your ::after this:
background: hsla(0, 0%, 0%, 0.50);
then give your text z-index = 1;
Just play with your color's alpha to get the desired look.
I have an image located in the assets folder within the root directory. Within the assets folder, I have the img folder and in that I have the image in question. My scss folder is also in my root which houses my style.css and my style.scss. I have tried a variety of ways to get the image to appear but have already spent an hour trying to figure this out.
In my html, I have:
<div class="popUpMain">
<div class="box">
<div class="image-area">
<div class="close-button">×</div>
<div class="img"></div>
</div>
</div>
</div>
and my css for these elements are as follows:
.popUpMain {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1099;
background-color: rgba(0, 0, 0, 0.6);
visibility: hidden;
opacity: 0;
transition: all 1s ease;
}
.popUpMain.show {
visibility: visible;
opacity: 1;
}
.popUpMain .box {
// width: 750px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
margin-left: 50px;
transition: all 1s ease;
}
.popUpMain.show .box {
opacity: 1;
margin-left: 0;
}
.popUpMain .box .image-area {
position: relative;
}
.close-button {
position: absolute;
top: -20px;
right: -20px;
background-color: transparent;
color: #fff;
border: 3px solid #fff;
padding: 1px 19px 10px 19px;
border-radius: 50%;
background: #000;
font-size: 30px;
cursor: pointer;
}
.popUpMain .box .image-area .img {
position: absolute;
left: 0;
top: 0;
background-image: url(../assets/img/mesa-de-trabajo.png);
width: 100%;
height: 100%;
}
I am sure it is something simple that I am missing but for the life of my, I cannot see the forest through the tree. Any help would be appreciated.
Thank you in advance.
Edit: The reason I have some hidden properties is in my javascript call here:
const popUpControl = document.querySelector('.popUpMain');
const close = document.querySelector('.close-button');
window.addEventListener("load", function() {
showPopup();
});
function showPopup () {
const timeLimit = 2; // seconds
let i = 0;
const timer = setInterval(function() {
i++;
if(i == timeLimit) {
clearInterval(timer);
popUpControl.classList.add("show");
}
console.log(i);
}, 1000);
}
close.addEventListener("click", function() {
popUpControl.classList.remove("show");
});
It depends on both your stylesheet and image location. Your syntax is correct, but you need to remember you're calling the image from the stylesheet location.
Example:
Root
- css
- styles.css
- assets
- img
- yourImage.jpg
In this case, in your stylesheet you would write
background: url(../assets/img/yourImage.jpg);
Take a look at your stylesheet location and adjust!
Issues:
.popUpMain .box .image-area .img - Here you are calling .img class, in HTML, you have written "image" class. So, fix this.
Remove opacity:0 from .popUpMain .box
Remove visibility: hidden; opacity: 0; from .popUpMain
.popUpMain {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1099;
background-color: rgba(0, 0, 0, 0.6);
transition: all 1s ease;
}
.popUpMain.show {
visibility: visible;
opacity: 1;
}
.popUpMain .box {
// width: 750px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-left: 50px;
transition: all 1s ease;
}
.popUpMain.show .box {
opacity: 1;
margin-left: 0;
}
.popUpMain .box .image-area {
position: relative;
}
.close-button {
position: absolute;
top: -20px;
right: -20px;
background-color: transparent;
color: #fff;
border: 3px solid #fff;
padding: 1px 19px 10px 19px;
border-radius: 50%;
background: #000;
font-size: 30px;
cursor: pointer;
}
.popUpMain .box .image-area .image {
position: absolute;
left: 0;
top: 0;
background-image: url("https://picsum.photos/200/300");
width: 500px;
height: 500px;
}
<div class="popUpMain">
<div class="box">
<div class="image-area">
<div class="close-button">×</div>
<div class="image"></div>
</div>
</div>
</div>
ive got a CSS popup box on my website targeted through an achor tag, it work perfectly fine in chrome and firefox but it wont open in safari, i think its something to do with the visibilty:hidden? any help would be great thanks heres a sample of the code :
<a href="#popup1" class="button">
</a>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Main Stage</h2>
<a class="close" href="#">×</a>
<div class="content">content here</div>
</div>
</div>
CSS:
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: $blue;
width: 50%;
position: relative;
transition: all 1s ease-in-out;
}
Try this model
Only HTML CSS
$("#open").on('click',function (){
$('#model').fadeIn(800);
});
$("#closebtn").on('click',function (){
$('#model').fadeOut(800);
});
#model{
background : rgba(0,0,0,0.7);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
}
#modelmain{
background: #fff;
width: 30%;
position: relative;
top: 20%;
left: calc(50% - 15%);
padding: 15px;
border-right: 4px;
border-radius: 5px;
}
#closebtn{
background-color: red;
color: white;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 50%;
position: absolute;
top: -15px;
right: -15px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="open">Open model</button>
<div id="model">
<div id="modelmain">
<h2>Your Contain</h2>
<div id="closebtn">X</div>
</div>
</div>
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 5 years ago.
I have this project:
https://jsfiddle.net/3xw9aqew/
When a user hovers over the grey box, a red overlay appears with a green border/outline. However this border is applied to the overlay which has an opacity value applied to it on hover.
.image-container:hover .overlay {
opacity: 0.3;
}
I want the overlay to be translucent, allowing the image below to be seen, but I want the border around this to be solid so its a standard "green" colour. This is the CSS for the overlay:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: red;
border:10px solid green;
box-sizing:border-box;
}
How can i achieve this?
For the intended behaviour, apply the required transparency directly to the background-color property value instead of the containing element as a whole. This can be done by adjusting the rgba value as demonstrated in the embedded code snippet below.
opacity applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, the
element and its children all have the same opacity relative to the
element's background, even if they have different opacities relative
to one another.
opacity - CSS | MDN
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
background-color: transparent;
border: 10px solid transparent;
box-sizing: border-box;
}
.image-container:hover .overlay {
background-color: rgba(255, 0, 0, 0.3);
border: 10px solid green;
}
Updated JSFiddle
Code Snippet Demonstration:
var imgContainer = document.getElementById("imgContainer");
var lorem = document.querySelector(".hdr-left");
var ipsum = document.querySelector(".hdr-right");
//When clicking on imgContainer toggle between class to change colour and position
imgContainer.addEventListener('click', function() {
lorem.classList.toggle("hdr-color-white");
ipsum.classList.toggle("hdr-color-white");
lorem.classList.toggle('hdr-left-middle');
ipsum.classList.toggle('hdr-right-middle');
});
body {
max-width: 100%;
overflow-x: hidden;
background: yellow;
font-family: sans-serif;
}
.container {
width: 85%;
max-width: 700px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
img {
width: 100%;
max-width: 920px;
}
p {
font-size: 18px;
color: blue;
font-weight: bold
}
p.left {
position: absolute;
top: 0;
bottom: 0px;
right: -32%;
transform: rotate(-90deg);
}
p.right {
position: absolute;
top: 0;
bottom: 0;
left: -32%;
transform: rotate(90deg);
}
h2 {
font-size: 5em;
position: absolute;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
margin: 0;
z-index: 5;
color: blue;
transition: all 0.5s ease-in-out;
}
.hdr-color-white {
color: white;
}
.hdr-left {
left: -12%;
top: -35%;
}
.hdr-left-middle {
left: 7%;
top: 40%;
}
.hdr-right {
right: -10%;
top: 110%;
}
.hdr-right-middle {
right: 7%;
top: 40%;
}
/*Hovers*/
.container:hover {
cursor: pointer
}
.container:hover>p {
color: red;
}
.container .image-container:hover {}
/*Hovers Ends*/
/*Overlay*/
.image-container {
position: relative;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.image {
display: block;
width: 100%;
height: auto;
outline: 5px solid blue;
}
.container .image-container:hover>.image {
outline: none;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
background-color: transparent;
border: 10px solid transparent;
box-sizing: border-box;
}
.image-container:hover .overlay {
background-color: rgba(255, 0, 0, 0.3);
border: 10px solid green;
}
/*Overlay Ends*/
<div class="container">
<!--Rotated Text-->
<p class="right">Harolds</p>
<p class="left">Harolds</p>
<!--//Rotated Text-->
<h2 class="hdr-left hdr-color" id="lorem">Lorem</h2>
<div class="image-container" id="imgContainer">
<img src="http://via.placeholder.com/980x550" alt="gucci" class="image">
<!--colour overlay-->
<div class="overlay"></div>
<!--//colour overlay-->
</div>
<h2 class="hdr-right hdr-color" id="ipsum">Ipsum</h2>
</div>