So i'm doing a transition effect on an <a> that has no default background image so when I try to hover over it the transition effect doesn't work. I doubt that without having a default background image it'll not work. So how can I achieve my goal or any alternative on doing that without using javascript? Here is my code:
<nav>
<li>Products</li>
</na>
Here is my css:
.nav>li>a { font-size:17px; color:#929799; padding:45px 25px 35px 25px;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
}
.nav>li>a:hover, .nav>li>a:focus{
background:url(http://cdn.myld.com.au/2/1198/web_total-gardens_9a0e4cf244.png) no-repeat top center; color:#38c867; }
background-image is a non-animatable property. You can not apply transitions.
I'm assuming you want to fade in the image on hover (?). A way to fake it is to apply your background image to a pseudo element and transition the opacity:
body {
padding-top: 50px;
}
nav>ul>li>a {
font-size: 17px;
color: #929799;
padding: 45px 25px 35px 25px;
position: relative;
}
nav>ul>li>a>span {
position: relative;
}
nav>ul>li>a:before {
content: "";
background: url(http://placehold.it/200x100) no-repeat top center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
nav>ul>li>a:hover:before,
nav>ul>li>a:focus:before {
opacity: 1;
}
<nav>
<ul>
<li><span>Products</span></li>
</ul>
</nav>
As #GabyakaG.Petrioli mentioned in the comments, your selectors are wrong and you have invalid HTML. Both are fixed in the above example
css transition opacity allow image to change values over a specified duration, animating the property changes
http://css3.bradshawenterprises.com/cfimg/
or try
transition: all 1s ease-in-out;
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
I have a :before pseudo element displayed on :hover of a particular element.
I'm using font awesome and want to vertically center the content of the :before, but vertical align, margins etc haven't been of much help.
Any ideas?
.tile:before {
font-family: FontAwesome;
font-size: 150px;
color: white;
text-align: center;
border-radius: 15px;
opacity: 0;
z-index: 9999;
width: 100%;
height: 100%;
content: "\f16b";
position: absolute;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tile:hover:before {
opacity: 1;
}
Here are a few potential suggestions for .tile:before :
1 - use pixel value instead of 100% for height:
height: 100px;
2 - Make sure this is being displayed as an element that can ACCEPT margin, padding, etc.
display: block;
-or-
display: inline-block;
3 - I know you said you tried margins, but did you try padding-top?
padding-top: 20px;
4 - Try setting the overflow to hidden or visible. This often forces elements to behave "better."
overflow:hidden;
I would try all of these TOGETHER and see what happens.
Last, I might try setting a "top:" value since you have "position:absolute;" already. Maybe try this in conjunction with "position:relative;" too.
top: 10px;
Really need all the code (HTML) to tell what would work.
Using :before as the cover background to display on top of the tile element, and an :after with:
.tile:after {
top: 50%;
left: 50%;
/* Both half of font-size */
margin-left: -75px;
margin-top: -75px;
height: 150px;
line-height: 1;
}
Seemed to do the trick. Thanks all.
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
I want a div to float next to my input but instead it's floating over top of it, and I'm not sure why. It's as if the div is set to use absolute positioning. I think I'm probably just overlooking something silly, but what is it?
html:
<input type="file" id="files" name="file" />
<div id="progress_bar"><div class="percent">0%</div></div>
css:
input { float: left;}
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
//clear: both;
opacity: 0;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
opacity: 1.0;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}
I have an example here:
http://jsfiddle.net/sWrvU/
which is based on the read files demo on html5rocks http://www.html5rocks.com/en/tutorials/file/dndfiles/
Uncomment clear:both to see the demo actually work (i.e. you can press the button because there's not a div on top of it), but then obviously the div still isn't floated next to the input.
Using display: block instead of opacity removes the transition, which I'm guessing you're trying to keep.
The Progress bar isn't "floating over top" so much as the input is floating underneath. If you float the progress bar as well, things should go a little better: http://jsfiddle.net/cjc343/sWrvU/24/
I changed it to use display instead of opacity since opacity means the element is still there even though it is transparent.
CSS
input {
float: left;
}
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
display:none;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
display:block;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}