I'm making a website with a Lightbox image gallery on it. Everything with the gallery and the layout of the page work works perfectly except for one thing.
In desktop view, it's working, but when I try to open it on a phone (or reduce the width of my browser window to the minimum) the lightbox gallery overlays the header menu of the site.
I will provide the HTML and CSS I made to put the header and in their place.
I tried using position fixed absolute and realitive on the header but it didn't work. I have no idea how to fix this to be honest.
The HTML of the header:
<header>
<ul>
<li>Home</li>
<li>Shiatsu</li></strong>
<li>Terapia Holística</li>
<li>Terapia com Cristais</li>
<li>Pantaloterapia</li>
</ul>
</header>
The HTML of the gallery:
<div class="gallery">
<img src="images/holistica/1.jpeg">
<img src="images/holistica/2.jpeg">
</div>
The CSS of the header:
header {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
height: 100px;
width: 100%;
background: #f9f3ff;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
}
The CSS of the gallery:
.gallery img {
width: 100%;
max-width: 230px;
height: 230px;
margin: 10px 10px 0 0;
filter: grayscale(100%);
transition: 1s;
}
.gallery img:hover {
filter: grayscale(0);
transform: scale(1.1);
}
I didn't modify the javascript of the lightbox the code is very long, you can see it here: https://lokeshdhakar.com/projects/lightbox2/
I used the lightbox-plus-jquery.min.js.
How can I make so that when the user scrolls down in mobile view, the header overlays the image gallery?
It seems a problem of z-index. Looking at the CSS styles of lightbox (.lightboxOverlay with z-index: 9999 and .lightbox with z-index: 10000), it would be enough to add a z-index: 10001 or more to the .header styles.
Related
I have a webpage here.I have a carousel in which an image is animated as coming from right. When it comes from right I can see a strange thing that all the fixed content (walk me through and chat icon) suddenly change their position when the image comes from right.This is the normal position.This is when the image comes from right.The walk me through and the chat icon are fixed relative to the body element. I have a raw guess that the two images due to being part of the page with display not none, change the calculated height of the body element. But the problem is that it happens in responsive mode only in chrome and otherwise it works fine when viewed without responsive mode on chrome.
Edit1: The culprit is translateX(100%) in animation come-from-right, without it, everything seems to be fine.
Edit2:If we replace translate(100%) with translate(-100%) in animation come-from-right,it works fine.
Edit3:The problem is that the webpage width is increasing when it comes from right, you could see scroll bar's size increasing.
Edit4:Even if we set the width of the body to 100px,even then the carousel is taking much space.
Edit5: If we add .slider img {width:200px;} everything is back to normal
Hope this will help you
<div class="fixedbtn" style="
height: 100vh;
position: absolute;
display: flex;
align-items: center;
">
<div class="walk-me-through-container"><div class="walk-me-through-container-before">?</div><div class="walk-me-through-text-container">Walk me Through
</div></div>
</div>
Comment top 50%
.walk-me-through-container {
position: fixed;
border: 0.1rem solid var(--white);
background-color: var(--white);
height: 18rem;
width: 4.5rem;
left: 0;
/* top: 50%; */
transform: translateY(-50%);
cursor: pointer;
z-index: 10000000000000;
}
Using percentages is the real culprit here as the unstable right and top are changing due to the fact that carousel loaded image is adding to the dimensions. Do top and left in vw and vh instead of percentages.Also use only top and left as right and bottom are unstable in the case.To totally solve the problem do html {overflow-x:hidden}, this make all sides stable.Do
.chat {
display: flex;
align-items: center;
justify-content: center;
background-color: #369cd9;
position: fixed;
top:calc(100vh - 8rem);
left:calc(100vw - 8rem);
height:5rem;
width:5rem;
border-radius: 50%;
box-shadow: 0 0 3rem 1rem rgba(0,0,0,0.2);
z-index: 10000000000001;
cursor:pointer;
}
and
.walk-me-through-container {
position: fixed;
border:0.1rem solid var(--white);
background-color: var(--white);
height:18rem;
width:4.5rem;
left:0;
top:50vh;
transform: translateY(-50%);
cursor:pointer;
z-index: 10000000000000;
}
for a few hours now I'm trying to solve a problem I encounter with the standard sidebar on my localy hosted wordpress site.
The code of my sidebar is the following:
CSS in the Customizer:
function mySlide(){
var x = document.getElementById("sidebar");
var y = document.getElementById("slider");
if(x.style.right === "0px"){
x.style.right = "-305px";
y.src = "arrow_left.png";
}else{
x.style.right = "0px";
y.src= "arrow_right.png";
}
}
#sidebar{
background-color: #571e0b;
padding: 0px 0px 0px 20px;
position: fixed;
top: 50px;
right: -305px;
height: 100%;
width: 300px;
transition: 0.5s;
-webkit-transform: 0.5s;
z-index: 2;
}
#slider {
padding: 10px;;
height: 50px;
position: relative;
left: -65px;
background-color: #571e0b;
border-radius: 0px 0px 0px 15px;
}
<div id="sidebar">
<input alt="slider_button" id="slider" type="image" onclick="mySlide()" src="arrow_left.png">
</div>
This kind of sidebar is positioned on posts and pages. However, the difference between the right attribute of #sidebar on pages and on post is 75px and I can't find a reason to.
The only clue I could find so far is, that it has something to do with pages being fullwidth and blogs being not.
Other characteristics of my website:
Theme: Themify Ultra v1.99
Plugins: Contact Form 7, Themify Portfolio Post, WP Super Cache
What i tried so far:
deleting everything on the affected pages.
reinstalling the theme and plugins
Would marry someone for a solution...
Kind regards
The Solution i found is a workaround with CSS. I set all pages to being not full width, and afterwards I used CSS to tell the container to resize.
It's as simple as:
#content{
width: 80%;
}
help needed once again.
Have a button that calls modal popup, that in turn calls div.overlay. css snippet of class overlay:
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0,0,0,0.7);
}
pretty standard situation. What I need is, the overlay to acts as sort of filter for the background behind it, to paint the body black and white.
now I know there is css grayscale(), trouble is when I apply
body {
filter: grayscale(100%);
}
along with .overlay - my modal popup turns black and white as well..
Any ideas on how to achieve black and white body, that could not be interacted(cant click on anything behind modal) with like an overlay at the same time not to make modal window black and white too.
You have two options:
1. backdrop-filter
This would be easiest way to do it, but browser support is very poor and pretty much only Safari 9+ supports it properly right now (it might work in Chrome behind a flag).
.overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: grayscale(1);
backdrop-filter: grayscale(1);
}
.inner {
background-color: #f88;
padding: 20px;
font-size: 50px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Rosa_Red_Chateau01.jpg/360px-Rosa_Red_Chateau01.jpg" width="200">
<div class="overlay">
<div class="inner">
Overlay
</div>
</div>
2. Overlay should not be a child of the filter element
filter will be applied to the element itself and all of its children, therefore the overlay div should not be a child of the filter element if you do not want it to be affected.
In the following example, you would have to toggle the grayed class when you show/hide the overlay.
.grayed {
filter: grayscale(1);
}
.overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
}
.inner {
background-color: #f88;
padding: 20px;
font-size: 50px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
<div class="app grayed">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Rosa_Red_Chateau01.jpg/360px-Rosa_Red_Chateau01.jpg" width="200">
<!-- The rest of your app is in here -->
</div>
<div class="overlay">
<div class="inner">
Overlay
</div>
</div>
If you're allowed to modify the html structure, you may wrap all of your content in a div and insert the popup outside of it, so you can apply the filter only to the Content when the popup is shown.
Example:
<body>
<div id="content-wrapper">
All of your content goes here
</div>
<div id="my-popup">
This is my popup
</div>
</body>
...now you simply add the filter: grayscale(100%); to the content-wrapper whenever the popup is shown.
To make it simpler.. you can control this by simply adding a class to your <body> whenever you want to show your popup, like so:
/* hide the popup initially */
#my-popup{
display: none;
}
/* gray the content and show the popup
* when the class is added to the body
*/
body.is-popup-open #content-wrapper{
filter: grayscale(100%);
}
body.is-popup-open #my-popup{
display: block;
}
I am currently in the process of developing an online shop via wordpress. Everything was working fine, now I wanted to give my page a custom border( inverted round corners) and found the css code for it as seen here:
css:
body {
background-color: #fff;
}
.wrapper {
overflow:hidden;
width:200px;
height:200px;
}
div.inverted-corner {
box-sizing:border-box;
position: relative;
background-color: #3e2a4f;
height: 200px;
width: 200px;
border: solid grey 7px;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.top:before, .top:after, .bottom:before, .bottom:after{
content:" ";
position:absolute;
width: 40px;
height: 40px;
background-color: #fff;
border: solid grey 7px;
border-radius: 20px;
}
.top:before {
top:-35px;
left:-35px;
}
.top:after {
top: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
.bottom:before {
bottom:-35px;
left:-35px;
}
.bottom:after {
bottom: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
html:
<div class="wrapper">
<div class="inverted-corner">
<div class="top"> </div>
<h1>Hello</h1>
<div class="bottom"> </div>
</div>
</div>
I renamed the classes to get no conflict with the existing css classes of the theme. It is working fine as seen here:my site. The problem is now, that I cannot interact with the site anymore, no links, no hover effects. It seems like the custom css is overlaying the actual site. Do you have any suggestions what I maybe did wrong?
P.S. I edited the header.php so that inverted corner div and the top div are right underneath the page-wrapper div( site content) and in the footer.php I edited the top div and the inverted-corner div closing right above the page-wrapper div closing.
Add :
pointer-events: none;
to the .bottom-corner CSS, so the mouse passes through.
In your custom.css you have this:
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
This basically overlays the whole page and thus disables any interaction.
One other option I would like to suggest to change following css rule
CSS
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
Replace above code with the below one
.top - corner, .bottom - corner {
position: absolute;
width: 100 % ;
}
this solution will work on all modern browsers and IE8 and above ( I'm not sure about lower version of IE, but it may work on them as well )
I've read several tutorials and forums include this and other sources on how to create an hover state description overlay over images. I have also successfully created a version of it. However there is one problem: its not responsive (or it breaks gracefully).
<div class="section">
<ul>
<li>
<div>
<p><b>1 unit Mathematics extension</b></p>
<img src="img/thumbnail.png" alt="Thumbnail">
<p id="overlay">Placerat massa ut est, in, .</p>
</div>
</li>
</ul>
</div>
Note*: the reason why i have it in a list is that on desktop and tablet view i want 3 images to appear across the page.
my relevant CSS is:
.section ul{
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
.section li{
width: 100%;
padding-bottom: 30px;
}
.section img{
width:90%;
}
#overlay{
width: 90%;
position: relative;
left: 5%;
bottom: 127px;
color: white;
background: rgba(0, 0, 0, 0.7);
}
My problem is the #overlay css, Im trying to align the bottom of the overlay to the bottom edge of the image. however when i do a percentage e.g. bottom: x% it does not work, which forces me to use a fixed px. However when i do this, based on the width of the window the height of the overlay changes and sometimes it results in the bottom edge of the overlay not aligned with the bottom of the edge.
Is there are way to work around this using css and html only?
if anyone is able to provide some input that would be much appreciated it!
Thank you all in advanced.
use z-index for #overlay
#overlay{
width: 90%;
position: relative;
bottom: 50px;
color: white;
background: rgba(0, 0, 0, 0.7);
z-index:1;
}
DEMO
check the demo and expand and collapse the result window to know the reponsiveness
Sometime jQuery is very easy help us incompare of tricky CSS
check this jsFiddle
jQuery (library 1.7.2)
jQuery(document).ready(function(){
$("img").mouseover(function(){
$("#overlay").css("z-index","9999");
});
$("img").mouseout(function(){
$("#overlay").css("z-index","-1");
});
});