I have a CSS3 transition that resizes/positions an image inside a div on hover.
FIDDLE
This works as desired but my concern is about browsers that don't support CSS3 transitions like IE9-. Would it be possible to write this CSS code so that these browsers have a fallback?
Idealy, the fallback should display the image so it fits the div and isn't zommed (fiddle example) and with no animation on hover.
I would prefer a CSS only solution and to not to alter the markup.
Full code example :
HTML :
<div><img src="http://lorempixel.com/output/people-q-c-1000-500-7.jpg" />
CSS :
div{
overflow:hidden;
width:500px;
height:250px;
position:relative;
}
img{
display:block;
position:absolute;
height:auto;
width:200%;
left:-30%;
top:-60%;
-webkit-transition-property: width, left, top;
-webkit-transition-duration: .8s;
-webkit-transition-timing-function: ease-out;
transition-property: width, left, top;
transition-duration: .8s;
transition-timing-function: ease-out;
}
div:hover img{
width:100%;
top:0;
left:0;
}
You could use Modernizr or go through the javascript feature detection route.
Both ways are detailed here:
Detect support for transition with JavaScript
Generally speaking, CSS transitions (and most of CSS, really) were designed with progressive enhancement in mind. The intended fallback in browsers that don't understand transitions is quite simply to ignore the transition properties themselves. This allows the style changes to still take place, only immediately and not in a smooth transition (as implied by the name), and obviates the need for complex workarounds.
What you're looking to do however is to not have any change in state occur at all; you want your image to be fixed in the unzoomed state. That will take a bit more work.
If #supports had been implemented in the beginning, you could easily get away with
img{
display:block;
position:absolute;
height:auto;
width:100%;
top:0;
left:0;
-webkit-transition-property: width, left, top;
-webkit-transition-duration: .8s;
-webkit-transition-timing-function: ease-out;
transition-property: width, left, top;
transition-duration: .8s;
transition-timing-function: ease-out;
}
#supports (-webkit-transition-property: all) or (transition-property: all) {
div:not(:hover) img{
width:200%;
left:-30%;
top:-60%;
}
}
But of course, not everything works that way. It's a real shame that #supports was proposed so late and implementations still haven't caught on. But I digress.
Looking at the support tables at caniuse.com, it looks like Gecko- and WebKit/Blink-based browsers are extremely well covered (except maybe Firefox 3.6 and older), which is a relief because I can't think of any pure CSS-based solution to cater to those engines (other than ugly hacks).
For other browsers, I can see some other workarounds:
It may be worth including the -o- prefix if you care about Presto Opera.
Likewise with -moz- if you care about Firefox < 16.
For IE, simply hiding the div:not(:hover) img rules in conditional comments is enough, since the first version of IE to support transitions and ignore conditional statements happens to be the same — version 10:
<!--[if !IE]><!-->
<style>
div:not(:hover) img{
width:200%;
left:-30%;
top:-60%;
}
</style>
<!--<![endif]-->
Note the use of div:not(:hover) here, analogous to the hypothetical #supports example above. You will need to swap the declarations with your img rule accordingly.
Lets not lie ourselves, the only browser we are talking about is IE9, so just go add:
width: 200%\9;
left: -30%\9;
top: -60%\9;
and IE9 will use it. We can just hope in 2017 there will be no more need for CSS hacks.
Related
Of the 4 method listed below, which are more compatible and/or performance driven when animating? To keep the topic more isolated, lets say while animating a navigation pane (drawer) into view from left to right.
margin/padding/border-left` (further reading on negative margins)
position:absolute
position:relative
transform:translateX adjustment (Support for Transforms)
From what I know, position:relative, padding, margin, & borders generate reflows and repaints... is the impact really that big?
whereas positions:absolute/fixed generates reflows only.
I'm not entirely sure what translateY does, although it does pass transitions to the GPU which may not be desirable on mobile, from what I've read (not personally tested). Is this accurate? Is it just splitting hairs?
I'm looking for a well supported method of animating that performs well from mobile to desktop (IE9+) and is CSS based. I haven't tested a particular path but have used all at one point or another, just curious which is preferred and why?
I'll provide one example to demonstrate how they all can achieve the same effect...
Fiddle: http://jsfiddle.net/darcher/94yf1a39/
/* hardware acceleration */
.margin,
.relative,
.absolute,
.translate-x{
transform: translate3d(0, 0, 0)}
/* margin */
.margin{
margin-left:-200px;
transition:margin-left 200ms, color 200ms cubic-bezier(.17,.67,.83,.67) 20ms}
.margin:hover{margin-left:50px}
/* positioning */
.absolute{position:absolute}
.relative-wrap,
.relative{position:relative}
.relative-wrap{margin-bottom:2.4rem}
.relative,
.absolute{
left:-200px;
transition:left 200ms, color 200ms cubic-bezier(.17,.67,.83,.67) 20ms}
.relative:hover,
.absolute:hover{left:50px}
/* translate */
.translate-x{
-webkit-transform: translateX(-200px);
transform: translateX(-200px);
transition:transform 200ms, color 200ms cubic-bezier(.17,.67,.83,.67) 20ms;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;}
.translate-x:hover{
-webkit-transform: translateX(50px);
transform: translateX(50px)}
/* will change */
.will-change .margin{will-change: margin-left}
.will-change .position{will-change: left}
.will-change .translate-x{will-change: transform}
.will-change .margin,
.will-change .position,
.will-change .translate-x{will-change: color}
I have used the CSS below to make speech bubble for my website, Yep Website
It looks okay in google chrome and safari. It does not show up in firefox giving me, '-moz-transform' depricated? I am not good in designing. I want to seek help how to correct this problem. Thanks in advance.
/*SPEECH BUBBLES*/
.wiget_bottom_all li h3 {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#fff;
background:#00B9B7;
/* css3 */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f04349), to(#c81e2b));
background:-moz-linear-gradient(#f04349, #c81e2b);
background:-o-linear-gradient(#f04349, #c81e2b);
background:linear-gradient(#00B9B7, #00B9B7);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */
/* creates the wider right-angled triangle */
.wiget_bottom_all li h3:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:105px; /* controls horizontal position */
border:0;
border-right-width:30px; /* vary this value to change the angle of the vertex */
border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */
border-style:solid;
border-color:transparent #00B9B7;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
Firefox has probably stopped to support the vendor prefixed css rule.
Do you have a not vendored prefixed css rule: transform: ... that will probably do the trick.
According to http://caniuse.com/#search=transform the not vendored prefixed transform rule has been supported in firefox since firefox 19.
edit: You do not use -moz-transform in your example code on s.t. you probably use it somewhere else in your css otherwise the error message really should not be there
Seems to have issues with cross browser codes. You can refer to css tricks for cross browser compatible codes. Perhaps, read this.
I came across this website today and I was mystified: http://www.actionbutton.net/
Is he using some kind of known technique for his backgrounds that scroll at a different rate and overlap each other. I looked at the source but am pretty confused. Does anyone know what the technique is called and how to learn it?
Here is an approximation of the parallax effect that doesn't use JS (thus backgrounds are scrolling at constant speed). The jfiddle example: http://jsfiddle.net/MFC9B/2/
Key is that there is a 2-layer nested divs, the outer one to hold the background, the inner one to hold the content:
.section {
position:relative;
z-index:1;
height:500px;
width:100%;
background-attachment:fixed; /* this keeps the background in place */
background-size:100% 100%;
background-repeat:no-repeat;
}
.content {
position:relative;
z-index:2;
background-color:#fff;
border:2px solid #666;
height:50%; /* this height difference allows the bg to show through */
}
It's call parallax there's plenty of plugin for this e.g. http://www.ianlunn.co.uk/plugins/jquery-parallax/
You could also consider something like that (no javascript is required):
#keyframes backgroundscroller {
from {
background-position: 0% 0%;
}
to {
background-position: 500% 500%, 400% 400%, 300% 300%, 200% 200%, 100% 100%;
}
}
#yourdivid {
background-image: url('full/sprite1.png'), url('512/sprite2.png'), url('256/sprite3.png'), url('128/sprite4.png'), url('64/sprite5.png');
animation-name: backgroundscroller;
animation-duration: 300s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
Obviously you must be aware that this will work only with browsers that support CSS3 and you also want to consider including a very useful javascript that takes care of adding prefixes where and if needed: http://leaverou.github.com/prefixfree/
I am very close to what I want to do but still some problems.
All I want is #sca to come from outside of the div and stays there all the time until page closes and I want this to happen with transition effect very smooth. I also want it to happen without an :focus, :hover, :active events, I want it to happen 2seconds after page opens.
if anybody could help me I would be appreciated.. this is so hard.
#sceneo {width:1200px;height:300px;border:1px solid red;margin:0 auto;}
#scenet {width:650px;height:300px;border:1px solid black;background-color:#FAFAFA;margin:0 auto;}
#sca {float:left;position:relative;left:0;width:271px;height:180px;background: url(http://img521.imageshack.us/img521/7913/123hc.png) no-repeat;display:block;position:relative;right:300px; opacity:0.5;
transition: all 2s;
-moz-transition: all 2s; /* Firefox 4 */
-webkit-transition: all 2s; /* Safari and Chrome */
-o-transition: all 2s; /* Opera */
-webkit-transition-delay:2s;
}
#sca:hover {left:280px;}
<div id="sceneo">
<div id="sca"></div>
<div id="scenet">
</div>
you're almost there! you'll need to create a KEYFRAME animation (as far as I know Opera does not have this yet, but webkit, mozilla, and new IE all support them)
There's a great write up at http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/ about how to use keyframes
here's also a quick jsfiddle: http://jsfiddle.net/2wMVR/3/
from there it should be easy!
If you do not want to deal with keyframes, you could use a CSS3 javascript library such as jQuery Transit that handles all the transitions and stuff for you. In my opinion, it is a lot easier than coding CSS3 by hand.
Here is an example that answers your question:
JS Fiddle Demo
Javascript:
$("#sca").transition({ left: '0px', opacity: 1, delay: 2000 }, 2000, 'in');
I have code that works in Chrome and Firefox, but not in IE8.
<a href="javascript:void();" class="shareActionLink" id="comment">
<img src="comment.gif" class="shareActionImage" />Comment
</a>
The CSS for this is:
.shareActionLink:link, .shareActionLink:visited
{
margin-right:8px;
color:#999;
opacity:0.6;
filter: alpha(opacity=60); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; /*IE8*/
background-color: #fff;
}
#shareActionsBox .shareActionLink:hover
{
color:#333;
text-decoration:none;
opacity:1.0;
filter: alpha(opacity=100); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /*IE8*/
}
Based on other StackOverflow posts, I added the IE filters, which helped to adjust the text opacity, however, the image opacity still doesn't change in IE. It works fine in other browsers.
I suspect that this is happening because the img is nested within the link. How do I get the image to change opacity in IE??
Thanks
MS filters only work in IE7 if the hasLayout property is set to true, they only work in IE8 on block elements, or if you set the display property to block or inline-block.. as you're trying to use this on an inline element, the a, then setting display: inline-block; should solve it for all IE's as it works to set hasLayout for IE7 and also keeps IE8 happy
.shareActionLink {
display: inline-block; /* IE needs but shouldn't hurt anyone else */
}
.shareActionLink:link, .shareActionLink:visited {
margin-right:8px;
background: #fff;
color:#999;
opacity:0.6;
filter: alpha(opacity=60); /* IE */
}
.shareActionLink:hover {
color:#333;
text-decoration:none;
opacity:1.0;
filter: alpha(opacity=100); /* IE */
}
Off the top of my head, setting opacity on a parent element means it's children elements get, erm, opacitied? as well.
To target the image specifically, add img after each of the css selectors; e.g.:
#shareActionsBox .shareActionLink:hover img
to target the image whenever the parent link is something (in this case when hovered).
I could not get this to work in IE6 without targeting the <img> element. I've not got IE8 installed so cannot be sure this demo will work in that browser. However, it does work in IE6, Chrome11 and Firefox4.
Also, it is worth noting that if your comment.gif has transparency then you may have further problems with the transparent part unless you set a background-color or use JavaScript to handle the hover. See another answer I wrote on this.