I have a form that changes border color(red-green) if the inputted values are correct or not - I also change between two small icons (glyphicon-ok and glyphicon-remove) at the end of each field.
I wanted to add a transition effect on the border color and icons(ease-in-out).
On the border color works perfectly but I noticed on the icons even though I set 'ease-in-out' the very first transition it's still 'linear' - the icons come in from the bottom like something pushes them up - I want them just to simply appear with a 0.2s transition.
Here is my css for the icons:
.start-label .glyphicon-ok {
position: absolute;
font-size: 25px;
top: 19px;
right: 10px;
color: #ACCB71;
transition: 0.2s ease-in-out;
}
.start-label .glyphicon-remove {
position: absolute;
font-size: 25px;
top: 19px;
right: 10px;
color: #CC3E44;
transition: 0.2s ease-in-out;
}
I have only these transitions in my entire css code with the border ones.
The transition for the border is the following:
transition: border 0.2s ease-in-out;
What am I doing wrong here? Or this is how it supposed to work?
Thanks to Dorvalla's help I resolved it by specifying the transition on the color.
From:
transition: 0.2s ease-in-out;
To:
transition: color 0.2s ease-in-out;
I'm getting strange behaviour occurring in Safari on OSX and more noticeably on iOS with this CSS driven radiobox multi-select form I'm working on...
http://s.codepen.io/achisholm/debug/jPzzzB
Same page with editors visible...
http://codepen.io/achisholm/pen/jPzzzB?editors=110
During the .3s transition, notice the width of the multi-form__option-content element seems to go from 0 to 100% while opening and closing.
It doesn't happen on any other browser, only Safari. Why is this happening and how can I prevent it?
You could change transition: all .3s ease; to transition: height .3s ease;
&__option-content {
overflow: hidden;
transition: height .3s ease; /*this one*/
height: 0;
padding: 0 20px 0px 50px;
line-height: 1.6;
http://codepen.io/anon/pen/MwVXNb
I am trying to scale up a linked image and reduce the opacity on hover. I have the image in a container to make it a circle with border-radius and the container has overflow set to hidden. I have everything working except that when I hover, the full image appears for a brief second before the overflow is hidden again. Here is a codepen mockup: http://codepen.io/jphogan/pen/WbxKJG
I have tried a few of the solutions I've found on here including setting the image to display:block. I've also tried setting the background color and overflow hidden to the container rather than the link, but I had the same result. I tried adding overflow hidden to the image itself, though unsurprisingly that did nothing. I just need the excess of the image to stay hidden throughout the transition.
Here is the CSS the way I have it set up now, although I've gone through a number of iterations to try and solve this. I appreciate any help. Thanks!
.solutions_role_container {
text-align:center;
}
.role_img_container {
width: 70%;
margin: 0 auto;
}
a.solutions_role_image {
background:#000;
border-radius: 50%;
overflow: hidden;
display: block;
border: 1px solid #B1C3DA;
box-shadow: 0 4px 10px #C6C6C6;
}
.solutions_role_image img {
width:100%;
-moz-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-o-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
display:block;
overflow:hidden;
transform:scale(1);
}
a.solutions_role_image:hover img {
opacity:0.7;
transform:scale(1.08);
}
Add these rules to role_img_container:
border-radius: 50%;
overflow: hidden;
z-index: 2;
position: relative;
The a and img tags should no longer need any css for overflow or border radius. You could add z-index: 1 to solutions_role_img just to be safe, but I don't think it is necessary
Im setting my image src in php and controlling the styling in css. I have an image sprite but no matter what I do the image does not seem to clip to the area I want. Im just getting the whole image appear dispite my background-size being set to 24 by 24px.
Note that the img src has to stay in the HTML rather than moving to a bg-image in the css :)
A jsfiddle can be seen here
jsfiddle.net/s6UnV
Any ideas?
#swap li img {
background-position: 0 0px;
background-size: 24px 24px;
display: block;
text-indent: -10000px;
-webkit-transition: background-position .6s;
-moz-transition: background-position .6s;
-o-transition: background-position .6s;
-ms-transition: background-position .6s;
transition: background-position .6s;
}
#swap li img:hover {
background-position: 0 -24px;
}
You shouldn't use the tag img for sprites, you should use a div with a background-image to the one you would like to add the sprite effects.
I updated your jsFiddle here Updated jsFiddle
What i did was the following
Changed the Html to
<ul id="swap">
<li>
<a href="www.google.com" target="_blank">
<div class="fb-sprite" style=" background-image:url('http://rldesign.net/Joomla3/modules/mod_social_css3/assets/glyph/facebook_hover.png')">
</div>
</a>
</li>
</ul>
And added the fb-sprite class style to the css
.fb-sprite{
width:24px;
height:24px;
background-position: 0 0px;
background-size: 24px 48px;
display: block;
-webkit-transition: background-position .6s;
-moz-transition: background-position .6s;
-o-transition: background-position .6s;
-ms-transition: background-position .6s;
transition: background-position .6s;
}
.fb-sprite:hover{
background-position: 0 -24px;
}
Hope it helps
ps: you can also use the opacity effect on this one so the facebook logo doesn't disappear
out of the blue, just a suggestion.
Cheers.
EDIT: Now you can change the url of the img programtically and the style would work. Also Updated the jsFiddle
I'm currently making a new theme for my blog and I'm having a problem with the header. See, the header has a fixed position at the top, like a nav bar, and it shrinks when the user scrolls down. However, on some browsers (mainly Chrome, especially for windows), the Twitter icon on the header has a strange flickering behaviour, going down to the next line for 1/10th of a second or so.
I've seen lots of things about flickering bugs in Chrome when using transitions but nothing that looks like this (also, the fixes didn't apply to my situation).
It's a simple transition on the margin of the icons and the height of the header.
Has anyone seen something similar?
Thanks a lot!
EDIT: recreated it in a Fiddle. The problem is still here: http://jsfiddle.net/PVmgz/
HTML `
<header>
<div class="container header">
<div id="logo">Logo</div>
<div class="social">
<div class="search icon">
</div>
<div class="facebook icon">
</div>
<div class="twitter icon">
</div>
</div>
</div>
</header>
<div id="button">Scroll</div>
`
CSS
header {
width: 100%;
height: 98px;
background: #EEE;
position: fixed;
top: 0;
z-index: 9999;
-webkit-transition: height, ease-in, 0.4s;
-moz-transition: height, ease-in, 0.4s;
-ms-transition: height, ease-in, 0.4s;
-o-transition: height, ease-in, 0.4s;
transition: height, ease-in, 0.4s;
}
header.scroll {
height: 60px;
}
header.scroll .header #logo {
width: 350px;
height:50px;
}
header.scroll .header .social {
margin-top: -2px;
}
header.scroll .header .social .icon {
margin-left: 2px;
}
.header {
padding: 5px 10px 0;
}
.header #logo {
width: 400px;
height:82px;
background: #696;
color:white;
float: left;
-webkit-transition: width, ease-in, 0.4s;
-moz-transition: width, ease-in, 0.4s;
-ms-transition: width, ease-in, 0.4s;
-o-transition: width, ease-in, 0.4s;
transition: width, ease-in, 0.4s;
}
.header #logo img {
max-width: 100%;
height: auto;
}
.header .social {
float: right;
margin-top: 19px;
-webkit-transition: margin-top, ease-in, 0.4s;
-moz-transition: margin-top, ease-in, 0.4s;
-ms-transition: margin-top, ease-in, 0.4s;
-o-transition: margin-top, ease-in, 0.4s;
transition: margin-top, ease-in, 0.4s;
}
.header .social .icon {
display: inline-block;
margin-left: 20px;
width: 51px;
height: 51px;
border-radius:999px;
-webkit-transition: margin-left, ease-in, 0.4s;
-moz-transition: margin-left, ease-in, 0.4s;
-ms-transition: margin-left, ease-in, 0.4s;
-o-transition: margin-left, ease-in, 0.4s;
transition: margin-left, ease-in, 0.4s;
}
.header .social .icon.facebook {
position: relative;
background:#336699;
}
.header .social .icon.twitter {
position: relative;
background:#66cccc;
}
So I have a possible explanation for this problem, and some code that definitely fixes it.
The possible explanation is that the shrinking social media icons are being rounded up in size at times. As they're shrinking it might be calculating a width of, say, 26.6 pixels, when of course it must always display as an integer number of pixels. When it rounds that up to 27 pixels, this knocks the last social media icon to the next level.
If this is correct, it flickers because it will continue to shrink, calculating 26 pixels, which is an O.K. value, and it won't drop down. But then it immediately goes to 25.9 pixels, which again drops it down.
If this is indeed correct, it'd actually be a bit more complicated than this simple explanation I'm giving (the width of the parent element comes into play), but this is enough to get the idea across.
Anyway, a fix that works is giving the div that holds the icons a width, so that there's 'breathing room,' if you will, for the icons to expand.
Here's some code that gives it that room, but you'll need to optimize it for it to display as you want it to.
.header .social {
...
width: 500px;
}
My initial idea for a solution would be the set the width of the this div, then float the icons to the right within it.
Kinda late with the answer, but i was just confronting with this issue when transitioning the margin-left value.
The solution is setting the "border-spacing" value to 0