Ive added an animation in CSS, the idea is that when i hover over an image of food it shows me its details as shown:
but when i add a part of css animation code , the card's background becomes transparent.
if i remove the following code it shows the result as described in 1st image, writing this results in 2nd image
.stars, .twinkling, .clouds {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:2400px;
display:block;
}
Rest of code is uploaded on Github
https://github.com/mareyam/Maryam-s-Restaurant
There is a problem with the z-index values, since your Restaurant component is not a children of your App component. The img components have a z-index of 999, that's why you can see the menu images. But the detail block below doesn't. You can solve it by adding the following CSS rule:
.container-fluid {
z-index: 4;
}
However I recommend avoid using too much z-index, it's very hard to maintain. Always try to solve that kind of issue with a proper nesting of your components.
Related
I am trying to take a regular video through a filter that looks like dark blue and light blue filter.
.
The thing is it's on video, and I need it to be a mask (div on the video that changes the color). I have tried a couple of things but didn't get the desired result.
I tried to use svg feColorMatrix, and CSS filters. But I got a weird blue. If you have any other idea I will be grateful.
HAPPY new year!
filter: contrast(84%) brightness(31%) saturate(93%) grayscale(27%) hue-rotate(354deg);
This solution is purely based on HTML and CSS,
Wrap your video with a container div and put another div before the video which will behave as an overlay, give it id something like "overlay", now css part
#overlay{
position:absolute;
width:100%;
height:100%;
z-index:100;
background:blue;
opacity:0.5;
}
Other modifications you can make as per the output you want, but this will get you to the closest of your desired solution.
I have an on boarding tour in at my.bonify.de. It offers a similar experience to introjs.
We implemented this in a very ugly way using a cutout div with a very large box-shadow. We would like to improve upon this and use an overlay like introjs since it seems to have much better performance than our dirty hack.
Having read this, I do not understand how introjs works since the element to be highlighted should definitely be in a lower stacking context.
I have tried replicating the behaviour with our own onboarding but I can not get the element in the page to rise above the overlay.
I would like to know how introjs achieves this, I thought that this block of code was the secret but when I put a debugger the class is not added.
Easy, you just put a relative element with higher z-index on top of a fixed element. Sample classes:
.fixed-elem {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:2;
background: rgba(0,0,0,0.75);
}
.relative-elem {
position:relative;
z-index:10;
}
Here is a working fiddle:
https://jsfiddle.net/7ergcfvq/1/
Look at demo step 1 of intro.js, the <h1>Intro.js</h1> element has .introjs-relativePosition and .introjs-showElement, so it got position:relative and z-index:9999999!important.
And the <div class="intros-overlay">'s z-index 999999, smaller than <h1> & <div class="introjs-helperLayer">
I'm trying to create what I think would be a cool content effect, whereby a dark semi-transparent background covers the entire screen while certain content rises above it, thus creating a highlight effect. I'm a massive JS amateur but I've been using fullPage.js (https://github.com/alvarotrigo/fullPage.js/) to create a scrolling content area, and also used a small drop down jQuery within the FullPage. I set up a function to bring my darkness div to the foreground, and it covers the entire screen as I expected, however, the drop down list within the fullPage simply won't rise above it, no matter what I try.
CSS of the darkness div:
#darkness {
background:rgba(0, 0, 0, 0.5);
display:none;
height:100%;
left:0;
position: fixed;
top:0;
width:100%;
z-index:10;
}
This is my JS function:
function thedarkside () {
console.log ('the dark side');
$('#darkness').fadeTo(200, 1);
}
All of that works as intended. However I can't get my drop down #dd to have a z-index higher than darkness div. This is the general structure of the FullPage.js:
Darkness -->
<-- Darkness
Fullpage -->
Section -->
Form -->
Dropdown -->
<-- Dropdown
<-- Form
<-- Section
<--Fullpage
I set the z-index of drop down to something ridiculous like 100, as I don't want any of the other elements to be above the darkness div. I really only want Dropdownto be above. Anyway if anyone could help me achieve this affect I'd really appreciate it. I'm ok if the solution lies in JS as opposed to CSS.
Thanks,
Mike
It took the JSFiddles for me to discover why it wasn't happening. I had to turn off the css3 flag on start of the FullPage.js and now it works.
Hope this helps anyone else who experiences something similar.
I am learning how to do a slideshow with CSS, HTML and Javascript, everything seems to be fine but when I click on next or prev the current image gets bigger and it stays on the screen for a few seconds. I am using images with different sizes, but I added a width on CSS -> img{width:100%;}. It could be something related with the margins as well but that doesn't seem to be the problem.
Here is some code that might help you understand the problem:
figure
{
position:absolute;
opacity:0;
transition:1s opacity;
margin:0;
border-left:solid 2px black;
border-right:solid 2px black;
}
figure.show
{
opacity:1;
position:relative;
transition:1s opacity;
margin-right:15%;
margin-left:15%;
}
Also there is a space between the image and the bottom div. I am doing this on c9.io and I don't have this problem there, could it be something on codepen that is causing it?
You can check the code out here: http://codepen.io/iikinz/pen/BiLeJ
Your images are getting bigger cause you are removing the show class and the show class has the margins.
Move:
margin-right:15%;
margin-left:15%;
out of figure.show and into figure.
--UPDATE--
Here it is: http://codepen.io/anon/pen/Cuikc
--UPDATE--
This works for most of your images but a couple of them are smaller than the rest so those appear to get smaller when changing slides. The ideal solution would be to just make sure they are all the same size. Plus it will keep them looking clear since they won't have to be stretched.
About the gap under the image, it's displayed inline :
img {
display: block; /* this will fix bottom gap */
width: 100%;
}
About your images size :
Just use images of the same size will fix your situation. Otherwise try forcing them with css
figure img {width:1280px;height:960px;margin-right:15%;margin-left:15%;}
About i can i do the transition and more ... well, not to sound arsh or nothing, but .. keep studying. You are quite asking too much in a single question.
I am really struggling with this. I have a small amount of knowledge of coding like this, but more modifying than actual coding.
I am looking for some code to allow me to overlay 2 different layers of PNG images (a door and a door handle) which will then each change to a different image when a link is clicked on the page, e.g. a different handle or a different door style or colour.
#png1 {
position:absolute;
top:0;
left:0;
z-index:0;
}
#png2 {
position:absolute;
top:0;
left:0;
z-index:0;
}
The above CSS combined with the below HTML gives me the overlay, it would just be nice to get it in a frame (DIV maybe?) and then for a HTML link to then change the image
<img id="png1" src="aub.png" />
<img id="png2" src="handle1.png" />
position:absolute and z-index css property are your tools
door handle must have supperior z-index than door
use jQuery to the behaviour to change it by clicking a link
Add a wrapper div around the images. Set it to position relative. Give the image you want on top a higher z-index than the one you want on the bottom.
Use the jQuery click function to change the src of the image tag or to show/hide other images.
Assuming you create two links with the classes of .my_link_1 and .my_link_2 to act as the triggers for the images you want to change:
$(".my_link_1").click(function() {
$("#png1").attr('src', 'red.png');
});
$(".my_link_2").click(function() {
$("#png1").attr('src', 'blue.png');
});