I made a photo gallery (html + javaScript + CSS). It works very simple: by clicking on each thumbnail a lightbox appears with a preview and a caption. When it happens the rest of the page, except for the lightbox itself, is covered with low opacity overlay. It worked fine but right now when I open any lightbox the overlay goes over (in front of) the entire page and the lightbox appears also behind it. Everything is covered with semi-transparent black. I suspect it's the problem with z-index, yet I didn't change a single z-index value within the code at all. What else can it be? Where did I make a mistake?
The CSS for the lightbox and the overlay looks like so:
.lightbox {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
z-index: 10;
}
.lightbox.preload {
transition: none !important;
}
.lightbox.open {
opacity: 1;
pointer-events: auto;
}
.lightbox .close {
background-color: #52616b;
cursor: pointer;
color: #1e2022;
text-decoration: none;
display: inline-block;
font-size: 2em;
line-height: 1em;
text-align: center;
position: absolute;
top: -0.4em;
right: -0.4em;
width: 1em;
height: 1em;
border-radius: 50%;
}
/* overlay */
.lightbox .close::before {
background-color: rgba(0, 0, 0, 0.9);
content: "";
cursor: pointer;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
There is more code but the rest of it is just for styling of image, text and link elements and they are all displayed correctly. So the problem must be within the lines I quoted. I'll be grateful for help.
Related
I have a button with only a single tag (<a>). I want to skew the background of the button and keep the text as is, so I'm using this code, which is working as expected in my Codepen example:
<a class="et_pb_button et_pb_pricing_table_button" href="#">$200 / Month</a>
.et_pb_pricing_table_button {
margin: 10px;
cursor: pointer;
background-color: transparent;
border: none;
height: 50px;
padding: 10px 60px;
position: relative;
color: #000000;
font-weight: bold;
text-decoration: none;
}
.et_pb_pricing_table_button:after {
z-index: -1;
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: skewX(-15deg);
border-radius: 0px;
background-color: #ffd100;
}
.et_pb_pricing_table_button:hover:after{
background-color: skyblue;
}
However, when I apply that code to my page, it is not rendering as expected (not visible). I can't find anything that is stopping this from working (the parent elements are position: relative). I also tried increasing the z-index of the pseudo selectors, but that didn't help either. What am I missing?
I'm a beginner at CSS for about a week.
And this is my first question on stack overflow.
Hope that I'm asking in the right way. I'm happy to receive any corrections.
The problem
I use pseudo-class to make an underline that grows thicker when hovered.
I want to have it swipe from bottom to top while it swipes from top to bottom.
How can I make it?
I did search for similar questions but end up with block elements (gradient etc).
Thanks a lot!
Here is my code on CodePen.
a {
text-decoration: none;
color: teal;
}
a {
display: inline-block;
position: relative;
}
a::after {
content: "";
display: block;
height: 0.1rem;
transform: rotate(0.5deg);
background-color: #20c997; /* teal */
opacity: 0.3;
transition: height 0.3s;
}
a:hover::after {
height: 0.5rem;
}
You just need your underline to be absolute positioned to the link bottom. Left and right offset should be set to 0 to grow up to the whole link width (or you can just set width: 100%;)
a {
text-decoration: none;
color: teal;
}
a {
display: inline-block;
position: relative;
}
a::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.1rem;
background-color: #20c997; /* teal */
opacity: 0.3;
transition: height 0.3s;
}
a:hover::after {
height: 0.5rem;
}
A link text with a animated underline
I have a button with a background color, and text color set. What I like to do, is when the user hover the mouse on the button, the background to animate from bottom to top and change the color of the text to the color of the background.
For terms of simplicity of the code, I didn't put the transient I like to apply on the CSS properties. I know it's much easyer to change the button background code, but I plan to use transient for changing the :before height on hover.
So I have the following code, but when I hover the mouse on the button, the :before overlapping my button text.
I have also try to play with the z-index but no luck. Do you think is there any solution to this problem ?
body {
background: #111;
}
.btn {
color: #FFF;
background: #333;
border: none;
font-size: 18px;
font-weight: bold;
padding: 18px 60px;
position: relative;
}
.btn:before {
display: block;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #FFF;
}
.btn:hover {
color: #333;
}
.btn:hover:before {
height: 100%;
}
<br />
Do Stuff
You need to add additional <span> element which would stay above the ::before pseudoelement:
span {
position: relative;
z-index: 1;
}
fiddle
The effect you desire can also be achieved without adding the additional span. By utilising the before and after pseudo elements for background colours and positioning them correctly.
To position the pseudo elements behind the text, set a positive z-index on the element and a negative z-index on the pseudo-element.
.btn {z-index: 1}
.btn:before {z-index: -1;}
Reference this article by Nicolas Gallagher which explains in more detail, see section 'Pseudo background-position' http://nicolasgallagher.com/an-introduction-to-css-pseudo-element-hacks/.
Also see fiddle with it in action: https://jsfiddle.net/j9whmcmz/2/
This technique does not work if you apply a background color to the .btn itself.
Choose your poison I guess, both solutions do the trick.
Try this:
body {
background: #333;
}
.btn {
color: #FFF;
background: #333;
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
}
.btn span {
display: inline-block;
padding: 18px 60px;
border: none;
font-size: 18px;
font-weight: bold;
z-index: 10;
position: relative;
}
.btn:after {
display: block;
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 0;
background: #FFF;
height: 100%;
z-index: 9;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.btn:hover {
color: #333;
}
.btn:hover:after {
max-height: 100%;
top: 0;
}
<span>Do Stuff</span>
Solution if pretty obvious - content of the button should be also absolute positioned. Then browser order them properly behind each other.
EDIT: Maybe my formatting and styling is not the best for the case, but it was quick update of your code to get the idea
body {
background: #111;
}
.btn {
color: #FFF;
background: #333;
border: none;
font-size: 18px;
font-weight: bold;
padding: 18px 60px;
position: relative;
}
.btn span {
display: block;
content: '';
position: absolute;
top: 18px;
left: 0px;
width: 100%;
text-align: center;
}
.btn:before {
display: block;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #FFF;
}
.btn:hover {
color: #333;
}
.btn:hover:before {
height: 100%;
}
<br />
<span>Do Stuff</span>
I want to replace a button with a Font Awesome icon in css, but I can't hide the text of the button.
button {
border: medium none;
bottom: 0;
font-size: 35px;
left: auto;
overflow: hidden;
padding: 0;
position: absolute;
right: 20px;
top: 0;
background-color: white;
cursor: pointer;
}
button::before {
color: rgba(0, 0, 0, 0.25);
content:"";
font-family: FontAwesome;
position: absolute;
right: 0;
}
http://jsfiddle.net/evhqz1rh/2/
How can I do this?
If you really must do this with CSS only (as opposed to just removing "menu" from your HTML), you can set the overflow: visible but position the element off the screen, then adjust the :before pseudo class to move its contents back onto the screen.
#primary-navigation-menu-toggle {
border: medium none;
bottom: 0;
font-size: 35px;
left: auto;
overflow: visible; /* change to visible */
padding: 0;
position: absolute;
right: 20px;
top: 0;
background-color: white;
cursor: pointer;
right: -500px; /* position off the page */
}
#primary-navigation-menu-toggle::before {
color: rgba(0, 0, 0, 0.25);
content:"";
font-family: FontAwesome;
position: absolute;
left: -470px; /* position on the page */
}
See it on this jsFiddle.
You don't have to use a button element to do this. A simple span or div would do as both support the onClick event.
Another option is to simply remove the "Menu" text from your button code:
<button aria-expanded="false" id="primary-navigation-menu-toggle"></button>
I am displaying a progress bar(loading gif) while my screen loads.
my css entries are as below
.hiddenDiv {
display: none;
}
.visibleDiv {
display: none;
}
.hiddenStyle {
cursor: wait;
z-index: 99999;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: alpha(opacity=80);
}
.busyStyle {
position: absolute;
top: 300px;
left: 580px;
text-align: center;
vertical-align: middle;
font-family: arial, helvetica, verdana, sans - serif;
color: red;
font-size: 16px;
font-weight: bold;
}
when I include background-color: white; in hiddenStyle, then the main screen behind is replaced by a white background while the page is loading.
If I remove that entry, then the progress bar is displayed with main screen behind.
I would like to grey out the main screen behind while the progress bar is displayed. How do I achieve this by changing CSS entries ?
Achieved this by changing CSS entries as
.visibleDiv {
z-index: 99999;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: alpha(opacity=50);
opacity: 0.6;
background-color: white;
}
in JS
document.getElementById('mask').className = 'visibleDiv';
so opacity did the trick
Hopefully, this can help as I have it implemented and working on a website:
HTML
<div id="divLoading">
<div class="page-center">
<div class="loadingBox">
<div class="centered">
Loading...
</div>
</div>
</div>
</div>
Put this anywhere on your page.
CSS
#divLoading {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%; height: 100%;
background-color: #666666;
z-index: 30001;
opacity: .9;
filter: alpha(opacity=90);
display: none;
}
.page-center {
display: inline;
top: 50%;
left: 50%;
position: relative;
}
.loadingBox {
border: 2px solid black;
border-radius: 20px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
width: 300px;
height: 100px;
background-color: white;
}
.centered {
text-align: center;
}
And when you call the said loading method (the one which shows the progress bar) also call this:
$("#divLoading").show();
It will show a div in front of everything else. When the progress is done, call:
$("#divLoading").hide();
You can have following set at the loading time of document:
<html><body>
<script>
document.body.style.backgroundColor='gray';
</script>
</body>
</html>
Once your progress is loaded you can reset the body color:
document.body.style.backgroundColor='#fff';