HTML:
<a class="navbar-brand page-scroll" href="#intro"></a>
CSS:
.navbar-custom .nav li a.navbar-brand {
width: 70px;
height: 62px;
background: url(myimg.png) no-repeat;
background-size: 70px 62px;
display: block;
position: relative;
text-indent: -9999px;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
}
.navbar-custom .nav li a.navbar-brand:hover {
background: url(myimghover.png) no-repeat;
}
The hover effect works fine in every browser, but the transition effect works in Google Chrome only and I really can't explain why. I've already tried using sprite images and pseudo-element hover, but my images have a transparent background so, on hover, the "bottom" image remains partially visible. Any idea?
Thank you in advance.
Regards,
J.
try
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
You can't animate background-image. https://www.w3.org/TR/css3-transitions/#animatable-properties
Related
/* CSS used here will be applied after bootstrap.css */
body{
background-color:yellow;
}
img{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
img:hover{
-webkit-filter:blur(5px);
}
<img src="http://i.stack.imgur.com/K0jNI.png">
When you hover over the image the borders of the image flash for a bit before settling.. Is there a way to fix that?
And how do i make a text show up on the middle of the image when i hover over it?
EDIT: This now looks great in Chrome
I don't think it's entirely possible to get a super clean transition when using webkit blur. I've had a lot of rendering issues and glitches when using it before. It's a resource hog too when used on a lot of elements. My advice to change your easing to linear and target only the blur. That should tighten it up a little bit.
img{
-webkit-transition: -webkit-filter 0.5s linear;
-moz-transition: -webkit-filter 0.5s linear;
-o-transition: -webkit-filter 0.5s linear;
-ms-transition: -webkit-filter 0.5s linear;
transition: -webkit-filter 0.5s linear;
}
As for the text fade in. You'll need to add in an element that is initially opacity:0; but then changed to opacity:1; when the parent block is hovered. Initial HTML changed to this:
<div class='block'>
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
<span>Hey there</span>
</div>
And the new CSS
/* CSS used here will be applied after bootstrap.css */
body {
background-color: yellow;
}
img {
-webkit-transition: -webkit-filter 0.5s linear;
transition: -webkit-filter 0.5s linear;
}
.block {
position: relative;
width: 400px;
}
.block img {
width: 100%;
}
.block span {
opacity: 0;
-webkit-transition: all .3s;
transition: all .3s;
color: white;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
left: 0;
right: 0;
}
.block:hover > span {
opacity: 1;
}
img:hover {
-webkit-filter: blur(4px);
}
Example here
http://codepen.io/jcoulterdesign/pen/58d613e80e4a768cc9e54aa1e7aaa0af
I've been trying to figure out why the hover image is flying from the left to bottom with transition effect even though the hover image is only set to padding-bottom. I just want the hover image to appear at the bottom of the menu when hovered.
http://jsfiddle.net/9buk14b5/1/
<header>
<div class="row">
<div class="large-12 columns">
<nav id="primary_nav">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
<li>Get a Quote</li>
<li>FAQ</li>
</ul>
</nav>
</div>
</div>
</header>
#primary_nav ul{
display: inline;
list-style-type: none;
li{
float: left;
padding: 15px 50px 15px 0;
a{
color:#ccc;
&:hover{
color:#fff;
background: url('../images/hover.png') no-repeat;
background-position: center center;
width: 22px;
height: 19px;
padding-bottom: 35px;
-webkit-transition: 0.8s all ease-out;
-o-transition: 0.8s all ease-out;
-moz-transition: 0.8s all ease-out;
transition: 0.8s all ease-out;
}
}
}
}
Use the :after pseudo-element in conjunction with :hover.
li {
position: relative;
float: left;
padding: 15px 50px 15px 0;
a {
padding-bottom: 35px;
&:after {
position: absolute;
content: '';
bottom: -3px;
left: 25%;
display:block;
margin: 0 -11px;
background: url('http://i60.tinypic.com/35a7xvs.png') no-repeat 0;
width: 22px;
height: 19px;
opacity: 0;
transition: opacity 500ms linear;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
}
&:hover {
&:after {
opacity: 1;
}
}
}
}
Add the background-image to the :after pseudo element allows you to set a style to applied when its parent <a> is hovered. In this case, we set the pseudo element toopacity:0; initially and opacity:1;, then we simply set the transition-property to watch opacity.
Fade in/Fade out Examples:
Fiddle using original background image: http://jsfiddle.net/9buk14b5/8/
Fiddle using only css to create triangle: http://jsfiddle.net/9buk14b5/7/
A few things:
The odd animation behavior is fixed by tell the transition which property to animate. In your code it's set to all. Change that to padding. I've also changed the timing function to be ease-in-out.
-webkit-transition: 0.8s padding ease-in-out;
-o-transition: 0.8s padding ease-in-out;
-moz-transition: 0.8s padding ease-in-out;
transition: 0.8s padding ease-in-out;
Second, your padding-bottom amount needs to be the sum of the height of the element it is trying to go to the bottom of, and any padding, border, margin offset it may include. In your case, the magic number was 132px
padding-bottom: 132px;
Here is a working fiddle with these modifications: http://jsfiddle.net/rv9wbn8b/
Edit:
To show the arrow without any effect, simply move the padding outside of the :hover
Updated fiddle: http://jsfiddle.net/9buk14b5/4/
I cant get this transition working in IE or Firefox, It looks fine in Safari and Chrome.
The opacity shows but is instant.
To me the below CSS looks right and I can't see any reason that it would work in either IE or firefox.
I've tried this using -ms-transition and it yields the same results, but the site uses CSS3 anyway so shouldn't need the -ms- anyway from what I've read.
Any light that can be shed would be greatly appreciated!
Ben
CSS:
.XMABAN {
height: 153px;
width: 230px;
background-color:rgb(127,0,25);
padding: 0;
vertical-align: top;
}
.XMABAN a {
height: 153px;
width: 230px;
text-decoration:none;
}
.XMABAN a:hover {
text-decoration:none;
}
.XMABAN img {
opacity: 1;
transition: opacity 0.70s ease-in-out;
-moz-transition: opacity 0.70s ease-in-out;
-webkit-transition: opacity 0.70s ease-in-out;
-o-transition: opacity 0.70s ease-in-out;
}
.XMABAN a:hover img {
opacity: 0.30;
transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
}
.XMABAN span {
position: relative;
left: 0%;
top: -62%;
font-weight:bold;
font-size:20pt;
color:#404040;
transition: color 0.70s ease-in-out;
-moz-transition: color 0.70s ease-in-out;
-webkit-transition: color 0.70s ease-in-out;
-o-transition: color 0.70s ease-in-out;
}
.XMABAN a:hover span {
color:#FFF0F5;
transition: color 0.25s ease-in-out;
-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
-o-transition: color 0.25s ease-in-out;
}
HTML:
<tr>
<td style="width: 33%;">
<div class="XMABAN" style="margin: 10px 0px 5px 0px;">
<a class="DSPI" href="online.asp">
<img src="../images/PRM_220.jpg">
<span>TEXT</span>
</a>
</div>
</td>
</tr>
CSS Transitions are not supported in IE9 or lower. They are supported in IE10, however, and the CSS you've included does work correctly in IE10.
I can only assume you're using IE10 with IE9 standards to test this, which is why the transition isn't working. To change this, simply set IE's Document Mode to Standards:
It's also worth noting that you should always include vendor prefixing before the intended CSS property. Specifying transition before -webkit-transition, for instance, will tell WebKit-based browsers to use the prefixed version instead of the actual version, and there may be differences in how each are handled. Change your CSS to:
-moz-transition: ...;
-webkit-transition: ...;
-o-transition: ...;
transition: ...;
I am trying to do simple tooltip only with css3 and html, but the transition doesn't work. What am I doing wrong?
HTML
<p>
This has tooltip
</p>
<div class="tooltip">Tooltip content</div>
CSS
p {
width: 200px;
background-color: aqua;
padding: 10px;
margin-top: 50px;
}
div.tooltip {
position: absolute;
width: auto;
padding: 10px;
background-color: rgba(0,0,0, 0.5);
top: 0px;
display: none;
opacity: 0.0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
p:hover + div.tooltip {
display: block;
opacity: 1.0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
http://jsfiddle.net/MCDg4/
Update / Alternate solution
For a modern browser CSS3 solution you could use pseudo elements..
<span data-tooltip="I am the tooltip">This has a tooltip</span>
and
[data-tooltip]{
position:relative;
}
[data-tooltip]:before{
content:attr(data-tooltip);
position:absolute;
bottom:110%;
padding:10px;
background:#666;
opacity:0;
color:white;
font-size:smaller;
-webkit-transition:opacity 1s ease;
-o-transition:opacity 1s ease;
transition:opacity 1s ease;
pointer-events:none;
}
[data-tooltip]:hover:before{
opacity:1;
}
Demo at http://jsfiddle.net/BJ2tr/
(this could be done without pseudo-elements by nesting the tooltip inside the elements that it refers to, and adjusting the css accordingly)
Unfortunately when you change display from none to something else, you cannot have transitions.
Instead of display:none you could just offset it outside of the window (with top:-9999px) and bring it to position when showing it.
div.tooltip {
position: absolute;
width: auto;
padding: 10px;
background-color: rgba(0,0,0, 0.5);
top: -999px; /*CHANGED THIS AND REMOVED display:none*/
display: none;
opacity: 0.0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
p:hover + div.tooltip {
opacity: 1.0;
top: 0px; /*ADDED THIS AND REMOVED display:block*/
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
This will, however, not fade out (only in) since it moves it away on mouseout (so it actually does fade but you do not see it because it is outside the viewport)..
Explanation
You put transition only on opacity, while when changing to display:block; it is shown as a block with opacity:1; by default.
Solution
(JSFiddle)
Delete the display:none; and display:block on your tooltip element.
Heres a visual: http://cl.ly/image/2L3g1d0W1r1Y
The text fades fine, but the image on the left is instant and doesn't fade ad the same time as the text. How do I get them to fade in at the same time for all browsers? It seems to work fine in chrome, but not in Firefox or Safari.
I'm a little confused by whats going on, but heres my html:
<ul class="action">
<li><a class="visit-site" href="http://google.com">Visit Site</a></li>
<li><a class="back-to-top" href="#portfolio">Back to top</a></li>
</ul>
and here is the css:
ul.action a.visit-site {
background: transparent url('../images/arrow-small-right-rest.png') no-repeat 0 2px;
padding-left: 18px;
color: #57585a;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
transition: 0.5s all ease;
-o-transition-duration: 0.5s all ease;
}
ul.action a.visit-site:hover {
background: transparent url('../images/arrow-small-right-over.png') no-repeat 0 2px;
color: #3ee1df;
}
With Sprite:
ul.action a.back-to-top{
background: transparent url('../images/sprite.png') no-repeat 0 2px;
padding-left: 18px;
width: 13px;
height: 13px;
color: #57585a;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
ul.action a.back-to-top:hover{
background-position: 0 -63px;
color: #3ee1df;
}
If your using something like jQuery with your overall design and development you can "animate" the "opacity" of the whole UL element you have, which should create the transition you want.
But opacity isn't supported in all browsers more so the older ones. There are cross browser solutions to it, but in all you want to adjust the opacity to create the transparency effect