I'm trying to add an animation over the button. A faded png that goes from left to right. Problem now is that it goes full width of parent element and not only just over the button.
HTML:
<div style="background: yellow; height: 30px">
<button class="btn-primary btn" style="margin-left: 100px">
Some button here
</button>
</div>
CSS:
.btn:hover:not([disabled]):not(.disabled):before, a.btn:hover:not([disabled]):not(.disabled):before, .swipe-glow:hover:not([disabled]):not(.disabled):before {
-webkit-transition: opacity 0s ease, left 0.4s linear;
transition: opacity 0s ease, left 0.4s linear;
left: 100%;
opacity: 1;
}
.btn:before, a.btn:before, a.btn:before, .swipe-glow:before {
-webkit-transition: opacity 0.3s ease 0, left 0s linear 0.3s;
transition: opacity 0.3s ease 0, left 0s linear 0.3s;
opacity: 0;
content:" ";
-webkit-backface-visibility: hidden;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -100%;
z-index: 100;
overflow: hidden;
background-size: cover;
background-image: url('//eaassets-a.akamaihd.net/battlelog/bb/bfh/ui/swiping-glow-408c7792.png');
}
JSFiddle:
http://jsfiddle.net/lasseedsvik/keanyvde/
How can I fix this?
Add:
.btn {position:relative; overflow:hidden;}
http://jsfiddle.net/keanyvde/4/
Related
Consider the following fiddle code
<div class="my-wrapper">
<input type="text"
placeholder="placeholder." >
<label >Press enter to save</label>
</div>
.my-wrapper {
input {
width: 200px;
height: 3em;
}
input:focus + label{
right: 20px;
opacity: 1;
color: #D3D3D3;
}
label{
line-height: 40px;
position: absolute;
right: 160px;
-moz-transition: 0.3s right ease;
-ms-transition: 0.3s right ease;
-o-transition: 0.3s right ease;
-webkit-transition: 0.3s right ease;
transition: 0.3s right ease;
z-index: 0;
opacity: 0;
}
}
I am seeing the forward transition on focus, I thought on blur the transition would go backwards, but I don't see it, can someone give me a hint on what I did wrong?
You can keep this simple by using transform instead of absolute values
.my-wrapper input {
width: 200px;
height: 3em;
}
.my-wrapper input:focus+label {
transform: translateX(0);
opacity: 1;
color: #D3D3D3;
}
.my-wrapper label {
position: absolute;
right: 10px;
line-height: 40px;
transform: translateX(-20px);
transition: 0.3s all ease;
z-index: 0;
opacity: 0;
}
<div class="my-wrapper">
<input type="text" placeholder="placeholder.">
<label>Press enter to save</label>
</div>
You have given transition: 0.3s right ease which will apply only to right property and not for opacity.
Change the transition property to transition: 0.3s all ease and the effect fades out smoothly on blur.
JsFiddle link
i have an image and a border around it i want to add blur hover to the image only but the blur covers the image and the border here's the code
.ex{
border-radius: 1000px;
margin-right: 20px;
border: 10px solid #fff;
overflow: hidden
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.ex:hover{
-webkit-filter: blur(5px);
cursor:pointer;
<img src="img/13.jpg" alt="" width="200" height="200" class="ex">
You can wrap the image in a parent element, then that element to create the circle border, and give it a positive z-index so the image doesn't pop out when you apply filter.
.wrap {
width: 200px;
height: 200px;
margin-right: 20px;
position: relative;
}
.wrap {
border-radius: 100%;
overflow: hidden;
z-index: 1;
}
.ex {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
max-width: 100%;
display: block;
}
.wrap:hover {
cursor: pointer;
}
.wrap:hover .ex {
-webkit-filter: blur(5px);
}
<div class="wrap">
<img src="https://scontent-dft4-1.cdninstagram.com/t51.2885-15/e35/17266233_1741922516118154_2155597975093510144_n.jpg" alt="" class="ex">
</div>
Wrap your image with a div, set the div size and overflow:hidden and you archive that.
.img-wrapper-for-blur {
border-radius: 1000px;
width: 200px;
height: 200px;
overflow: hidden;
}
removing border-radius from your .ex style and the markup changed by this:
<div class="img-wrapper-for-blur">
<img src="img/13.jpg" alt="" width="200" height="200" class="ex">
</div>
Instead of using a border, you can wrap the image in a div, give that div some padding and a white background, and then leave the blur on the image.
HTML
<div class="border">
<img src="http://www.placehold.it/200x200" alt="" width="200" height="200" class="ex">
</div>
CSS
.ex {
border-radius: 100%;
overflow: hidden -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.ex:hover {
-webkit-filter: blur(5px);
cursor: pointer;
}
.border {
border-radius: 100%;
margin-right: 20px;
background-color: #fff;
display: inline-block;
padding: 10px;
}
Here is a fiddle: https://jsfiddle.net/fm1hLy6h/
https://jsfiddle.net/wa78ja4r/1/
Here's the fiddle please check this out. The image just get bigger after the transition time but doesn't animate. Why is that so.
I'm using these from a duplicate question here:
transition: background-size 2s ease-in;
-moz-transition: background-size 2s ease-in;
-ms-transition: background-size 2s ease-in;
-o-transition: background-size 2s ease-in;
-webkit-transition: background-size 2s ease-in;
Use background-image instead of background.
.outer-disc {
width: 130px;
height: 130px;
background-color: #3F51B5;
margin: 0 auto;
border-radius: 100%;
overflow: hidden;
}
.inner-disc {
margin: auto;
margin-top: 15px;
width: 100px;
height: 100px;
background-color: white;
border-radius: 100%;
}
.inner-disc .icon {
width: 64px;
height: 64px;
background-position: center center;
background-repeat: no-repeat;
background-size: 60px 60px;
opacity: 0.8;
transition: background-size 2s ease-in;
-moz-transition: background-size 2s ease-in;
-ms-transition: background-size 2s ease-in;
-o-transition: background-size 2s ease-in;
-webkit-transition: background-size 2s ease-in;
}
.inner-disc .icon:hover {
background-size: 70px;
}
.inner-disc .customer-support {
background-image: url("http://placehold.it/350x150");
width: 100%;
height: 100%;
}
<li class="jstransitiononservices">
<div class='outer-disc'>
<div class='inner-disc'>
<div class='icon customer-support'></div>
</div>
</div>
<div class="services-text">
<h3>Customer Support</h3>
<h5>Incredibly Amazing</h5>
</div>
</li>
Working Fiddle
I have fixed you the problem with a cleaner code
Working Fiddle
div{
width: 130px;
height: 130px;
background:red;
border-radius: 100px;
border: 10px blue solid;
background: url("http://umerjaved1.base.pk/img/customersupport.png") center center no-repeat;
background-size: 70px 70px;
transition: all 1s ease;
}
div:hover{
background-size: 80px 80px;
}
<div></div>
I've got a modal overlay where the css spinner rotates when first loaded, after hiding then showing again the spinner no longer rotates.
This only happens in Chrome and only happens when the spinner is not visible from the outset (ie if the div is hidden then toggled - the animation happens as expected). Is this a bug or have I missed something?
EDIT It seems to be the visibility that it doesn't like, commenting this out, everything performs as expected
It also seems to be a bug, behaves as expected in Canary 46
EDIT I've though this was a duplicate: CSS infinite animation after hidden is not resetted (Chrome), however that works in the same version of Chrome
document.getElementById('toggle').onclick = function() {
document.getElementById('loader').classList.toggle('out');
}
#holder {
margin-top: 50px;
position: relative;
height: 300px;
background: #cc0000
}
.loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: 10%;
text-align: center;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.5);
overflow: hidden;
visibility: visible;
opacity: 1;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
-o-transition: opacity .5s linear;
transition: opacity .5s linear;
}
.loader.out {
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.5s, opacity 0.5s linear;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
<button id="toggle">Toggle Overlay</button>
</div>
<div id="holder">
<div class="loader" id="loader">
<i class="fa fa-spinner fa-spin fa-5x"></i>
</div>
</div>
I'm setting up a new portfolio website and use the Onepage Scroll Plugin by Pete R.
I added a fix navigation bar and now want to have elements inside a slide overlapping this navigation. Here's a code example at codepen:
http://codepen.io/terrorpixel/pen/BNxYxq
HTML
<nav></nav>
<div class="container">
<div>Bring me to the front!</div>
</div>
CSS
nav {
height: 82px;
left: 0;
position: fixed;
top: 0;
-webkit-transition: background 1.15s ease-in-out 0s;
-moz-transition: background 1.15s ease-in-out 0s;
transition: background 1.15s ease-in-out 0s;
width: 100%;
z-index: 2;
background:rgba(0,255,0,.85);
}
.container {
background:blue;
position: relative;
-webkit-transform: translate3d(0px, -1%, 0px);
-moz-transform: translate3d(0px, -1%, 0px);
transform: translate3d(0px, -1%, 0px);
-webkit-transition: all 2s ease 0s;
-moz-transition: all 2ms ease 0s;
transition: all 2ms ease 0s;
height: 5000px;
z-index:1;
width: 70%;
margin: 0 auto;
}
.container div {
padding: 250px 100px;
z-index:10;
position:absolute;
right:0;
top:0;
background:red;
}
I try to get the red box to the front. I think the failure belongs to the fact that I'm using z-index in different stacking contexts. The inside the .container hadn't worked, too.. Is there actually a possibility to realize that :/?
You need to move .container div outside of .container.
When you place a positioned element inside a positioned element, the children start a new stacking order but it starts in context with the parents value. So even if you specify a z-index value of 10000 to a child of a parent with a z-index of 2 its like the child has a z-index of 2.10000.
This example is crude but you get the idea:
nav {
height: 82px;
left: 0;
right: 0;
position: fixed;
top: 0;
-webkit-transition: background 1.15s ease-in-out 0s;
-moz-transition: background 1.15s ease-in-out 0s;
transition: background 1.15s ease-in-out 0s;
z-index: 2;
background: rgba(0, 255, 0, .85);
}
.container {
background: blue;
position: relative;
-webkit-transform: translate3d(0px, -1%, 0px);
-moz-transform: translate3d(0px, -1%, 0px);
transform: translate3d(0px, -1%, 0px);
-webkit-transition: all 2s ease 0s;
-moz-transition: all 2ms ease 0s;
transition: all 2ms ease 0s;
height: 5000px;
z-index: 1;
width: 70%;
margin: 0 auto;
}
.front {
z-index: 3;
position: absolute;
right: 15%; /* half of 30% (the left over of 70% container width) */
top: 82px;
background: red;
}
<nav></nav>
<div class="container">
</div>
<div class="front">Bring me to the front!</div>
</div>