I have a nav overlay I'm trying to slide in from the top of the screen using CSS, I can't figure out the Z index
Here is my attempt so far;
#nav-wrapper {
position: fixed;
z-index: 2;
right: 0;
width: 250px;
height: 100%;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
transform: translateZ(250px);
background: #191919;
border-left: 1px solid fade-out( #ffffff, 0.9);
}
Any help is much appreciated
Related
I'm trying to create a sort of "shooting star" animation on a button underline on hover. I've successfully achieved what I want and it's firing correctly on the first hover, but if you hover over it again the transition is glitchy and doesn't work as intended. The more you hover over it the less the width changes to the point where it no longer works.
I wondered if someone might be able to explain why this is happening?
Here is a JSFiddle
.btn {
position: relative;
font-size: 40px;
}
.btn::before {
content: '';
height: 1px;
width: 100%;
background-color: red;
position: absolute;
bottom: -1px;
right: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.btn::after {
content: '';
height: 1px;
width: 0;
background-color: blue;
position: absolute;
bottom: -1px;
left: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.btn:hover::before {
width: 0;
}
.btn:hover::after {
width: 100%;
}
<a class="btn">Button</a>
With the help of #somethinghere, I was able to resolve this myself. For anyone who might need this in the future, the reverse animation was too slow so was incomplete before hovering over the element again. Adding a transition of 0 for the reverse animation solved the problem.
jsFiddle
.btn {
position: relative;
font-size: 40px;
}
.btn::before {
content: '';
height: 1px;
width: 100%;
background-color: red;
position: absolute;
bottom: -1px;
right: 0;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-ms-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
}
.btn::after {
content: '';
height: 1px;
width: 0;
background-color: red;
position: absolute;
bottom: -1px;
left: 0;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-ms-transition: all 0s ease-in-out;
transition: all 0s linear;
}
.btn:hover::before {
width: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s linear;
}
.btn:hover::after {
width: 100%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s linear;
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
<a class="btn">Button</a>
I'm using LightGallery (http://sachinchoolur.github.io/lightGallery/), I have insert all required files and CSS. It is working fine with full screen, but I want to enable the MouseOver zoom icon over the photos before open the full screen.
But I'm not able to get zoom icon with MouseOver event.
This is what I get
This is what I want
<script type="text/javascript">
$('#aniimated-thumbnials').lightGallery({
thumbnail: true,
animateThumb: true,
showThumbByDefault: true
});
</script>
<div id="aniimated-thumbnials" class="list-unstyled">
<a class="jg-entry" href="img/ProductGallery/Gallery_images1.png" data-sub-html="sdsdsd">
<img class="img-responsive" src="img/ProductGallery/Gallery_images1_thumb.png">
<div class="">
<img src="img/zoom.png" />
</div>
</a>
<a class="jg-entry" href="img/ProductGallery/Gallery_images2.png" data-sub-html="sdsdsd">
<img class="img-responsive" src="img/ProductGallery/Gallery_images2_thumb.png">
<div class="demo-gallery-poster">
<img src="img/zoom.png" />
</div>
</a>
</div>
I came across the same "issue". In reality, it's not really an issue with the lightGallery plugin as it's not a feature they're offering. In their demo, zoom icon is just a feature they've put together for the demo and is not offered WITH the plugin.
So I had to look at their source code to be able to do this.
Below is the CSS you need to add, and remember that you also need to have your image in the same DOM level as your demo-gallery-poster class, both inside an a. The same way you're doing it.
a:hover .demo-gallery-poster>img {
opacity: 1;
}
a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
a .demo-gallery-poster>img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
a>img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
a:hover>img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
a:hover .demo-gallery-poster>img {
opacity: 1;
}
a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
a .demo-gallery-poster>img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .video .demo-gallery-poster img {
height: 48px;
margin-left: -24px;
margin-top: -24px;
opacity: 0.8;
width: 48px;
}
So I have a sticky bar and when it becomes fixed it has a little animation with before and after elements.
This works fine on Chrome but its slightly glitchy on firefox.
The site is live the link is:
http://pixelfriendlytech.co.za/
Simple demo is here:
https://jsfiddle.net/zr8gc1f7/4/
Here is the css:
#pf-bar{padding: 0px;
z-index: 1000;
top:0;
left: 0;
right: 0;
position: relative;
max-width: 2560px;}
#pf-bar:before {
content: "";
position: absolute;
top: 0;
right: calc(50% + 570px);
bottom: 0;
width: 0px;
height: 60px;
background-color: #fff;
border-bottom: 3px solid #2484C6;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
z-index: -1;}
#pf-bar:after {
content: "";
position: absolute;''
top: 0;
left: calc(50% + 570px);
bottom: 0;
width: 0px;
height: 60px;
background-color: #fff;
border-bottom: 3px solid #F72244;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
z-index: -1;}
.sticky #pf-bar:before {
width: calc(50% - 570px);}
.sticky #pf-bar:after {
width: calc(50% - 570px);}
.sticky #pf-bar{
position: fixed;
width: 100%;
box-shadow: 0px 4px 10px rgba(0,0,0,.2);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;'}
I've just noticed that the hover easing on something is not working. It does the zoom effect, but it's instant instead of easing in and out. Is there a work around for IE on this?
CSS:
.nav-tile {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 130px;
width: 360px;
margin-bottom: 10px;
margin-left: 10px;
background-size: 130%;
overflow: hidden;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
float:left;
}
.nav-tile:hover {
transition: transform 3s linear;
background-size: 100%;
-moz-transition: all 3s;
-webkit-transition: all 3s;
-o-transition: all 3s;
-ms-transition: all 3s;
transition: all 3s;
}
If you want it to ease in and out, try this instead of using the "linear" property, set the ease to "ease-in-out".
Here is an example of all the easing effects possible in css3.
http://css3.bradshawenterprises.com/transitions/
.nav-tile:hover {
transition: transform 3s ease-in-out;
}
Dear Stackoverflow readers,
Using only CSS3, how do I show a div after a transition is completed.
This is the snippet of HTML I'm working with
<div class="biography">
<p>Title</p>
<p id="moreBio">This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
</div>
This is the snippet of CSS3 I'm working with
.biography {
width: 100px;
height: 40px;
float: left;
margin: 5px;
background: #3399FF;
color: #ffffff;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
position: relative;
right: 5%;
font-weight: bold;
font-size: 15px;
text-align: center;
padding: 10px;
border-radius: 5px;
opacity: 0.4;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.biography:hover {
width: 200px;
height: 600px;
margin: 10px 10px 0px -100px;
opacity: 1;
background: #7C7C7C;
}
#moreBio {
opacity: 0;
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
}
#moreBio:hover {
opacity: 1;
}
I want #moreBio to show after the transition is completed, how would I go about doing that?
Thank you so much in advance.
Add a transition-delay to #moreBio equal to the transition time of .biography, and make the appearance trigger when .biography is hovered upon.
#moreBio {
opacity: 0;
transition: opacity 0.5s 0.5s ease;
-webkit-transition: opacity 0.5s 0.5s ease;
-o-transition: opacity 0.5s 0.5s ease;
-moz-transition: opacity 0.5s 0.5s ease;
}
.biography:hover #moreBio {
opacity: 1;
}
Instead of doing #moreBio:hover you could do .biography:hover #moreBio and then add a delay for the #moreBio transition like so
// ... other code just like it's
#moreBio {
opacity: 0;
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.biography:hover #moreBio {
opacity: 1;
}
Here is the working sample.