Hi I'm learning to create some hover effects and managed to pull off what I had in mind with this animation: http://jsbin.com/xawibo/
The CSS that animates the image is this:
transform: scale(3, 3) translateY(50%);
But the animation is not smooth. The thumbnail becomes blurry during the transition, becoming crisp again only when the transition stops. There is also a slight left/right jerky movement.
Here is a quick Youtube video of what I see:
https://www.youtube.com/watch?v=yoIgV1ORbN8&feature=youtu.be
What am I doing that is affecting the perforamce of this animation? Am I nesting too many DIVs?
Seems like Chrome specific issue.
Instead of transform:scale() you can animate width:
.caption:hover > span img{
background: rgba(0, 158, 205, 0.45);
transform: translate(0,10%) ;
width:100%;
}
This happens on chrome on Windows apparently.
Seems very similar to the issue depicted here:
CSS transition effect makes image blurry / moves image 1px, in Chrome?
What happens when using -webkit-transform: [...] along with transform: [...] ?
Related
I've done this in CSS.
It works great in Google Chrome after adding:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
But in FireFox it looks like this:
See source here
I tried several things and searched a lot. I don't know what to do to get rid of those borders FireFox creates. Most stuff I find is about transition, which I don't use. Any ideas would be very much welcome.
References:
- CSS3 transform rotate causing 1px shift in Chrome
- -webkit-transform rotate - Pixelated images in Chrome
- CSS transition effect makes image blurry / moves image 1px, in Chrome?
Adding translateZ(1px) before the rotation rule seems to remove those artifacts:
transform: translateZ(1px) rotate(-45deg);
See this question.
When i put transform: scale(1.1); on hover on some element the image became blurry. How to fix this bug?
Example
Try this, it's work fine for me!
img {
-webkit-backface-visibility: hidden;
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);
}
TL;DR
transform: scale is actually scaling the original image, and because you are leaving it to the browser's render engine to figure out what should go there you got a blurry image. try
img {
transform: scale(.9)
}
img:hover {
transform: scale(1)
}
Aaron Sibler answered the question for me.
I just experienced this riddle. In your example, you’ll
need to transform img DOWN something like “transform: scale(0.7)” and
then scale UP to the images native dimensions on hover like
“transform: scale(1.0)”
The scale value is relative to the original image’s dimensions – not
their current dimensions on screen so a scale of 1 always equals the
original image’s dimensions.
I’ve used this here;
http://meetaaronsilber.com/experiments/css3imgpop/index.html
I had this problem with SVG scaling and blurry images. I scaled up a background image to 4.5 and the image rendered very blurry while scaling up.
I read that you can scale down first transform: scale(0.7) and then scale up to transform: scale(1.0). In my case this meant a huge rebuild of my animation. I had a very complex animation with multiple scales and transforms etc.
I just left all as is and added a pseudo scale width. The browser then seems to re-render every frame, but since the width does not actually change you still can use
transform: scale(x.x) for scaling and you get a very sharp image.
Maybe someone can confirm this. Here is my code. In my case the image was 86px wide and it zoomed up to 4.5 times the initial value.
<div class="overall-scale">
<div class="image-scale"></div>
</div>
#keyframes overall-scale {
0% {
transform: scale(1);
}
100% {
transform: scale(4.5);
}
}
#keyframes image-scale {
0% {
width: 86px;
}
100% {
width: 86px;
}
}
Hope this helps and my explanation makes sense.
Please comment if this does not work for you.
I' ve read all the comments, and tryied all solutions people suggested. But nothing was really good except rotate(360deg). Everything, except this one made stuttering on images, or they became too blurry initially. But rotating is looking strange if you don't hide it. So I decided to rotate for 0.0000001deg and it worked! Image is blurry only during the transition, but at the end and at the start of it it is sharp. May be I just had too small pictures.
So, my current solution is adding this part to CSS (and nothing else):
img {
transform: rotate(0.00000000001deg);
}
I have been playing with transitions all morning and am at a road block. I have the need to have an image "tilt" forward when hovered over. Basically we have beer taps that when they hover over they want them to tilt as if they are being pulled down. I have played with a bunch of code but right now have nothing remotely close to post here. If anyone could give some help on how to accomplish this in css3 it would be greatly appreciated.
Below is a basic version (works in safari & chrome). You can play with the perspective values to change the effect.
I'm not sure where you were running into trouble, but the key points here are:
container to hold the rotated elements that will allow you to use perspective
perspective to change the overall look of the animation
transform-origin to set the rotation point of the image (using the bottom in the demo)
rotateX to rotate around the x axis - tilting the image toward/away from the viewer
html:
<div class="container">
<img src="http://placekitten.com/200/300" width="200" height="300"></img>
</div>
CSS:
.container {
-webkit-perspective: 1000px;
perspective: 1000px;
margin: 2em;
transform-style: preserve-3d;
}
img {
transition: all .5s ease;
-webkit-transform: rotateX(0deg);
-webkit-transform-origin-y: 300px; /* rotates from the bottom of the image */
}
img:hover {
-webkit-transform: rotateX(-40deg);
}
Demo jsFiddle
CSS Supports X and Y 3D rotations, but you cannot rotate on the Z axis (forwards and backwards) purely in CSS, maybe Javascript or jQuery would be able to do so.
For more on CSS rotation try reading up on it here: http://www.w3schools.com/css/css3_3dtransforms.asp
I would play around with something like CAMANJS or just create a second background image that tilts your existing image and use that on the hover event.
Take a look at http://www.kickstarter.com.
When you hover over their logo, the image lights up. Is this effect doable without using a different image on hover?
My first idea was to use ::after:hover and add a white square with high transparency that covers the logo, but since my logo is placed on a blue background this would not work. Another idea is to set opacity to 0.9 and on hover set it to 1. But this makes the image look too dark by default.
You may be able to use the css image filters, like this:
img:hover {-webkit-filter: brightness(150%); }
This sometimes looks funny and will only work in webkit browsers, but it's the best solution I could think of. It'll allow you to keep your blue background as well.
Here's a jsfiddle showing the Kickstarter logo on a blue background.
http://jsfiddle.net/62bCB/
Cheers,
As far as I am aware you can't do what you require with pure CSS at this point, due to the blue background. I think your best bet is edit the image in photoshop to be its :hover brightness, and then use something like:
img {
opacity: 0.7;
}
img:hover {
opacity: 1;
}
Changing the opacity on hover will work:
img:hover {
opacity: 0.5;
}
Fiddle
The original CSS has:
img:hover {
filter: alpha(opacity=80);
opacity: .8;
}
Fiddle: http://jsfiddle.net/praveenscience/hfUpk/
You have a few choices depending on what browsers you need to support. You could make the logo a background image and then change the image on hover. (or sprite the image so that you don't get a flicker)
Or you could try a combination of CSS opacity and microsoft filters for older versions of IE.
http://www.w3schools.com/cssref/css3_pr_opacity.asp
Since you mention you have a dark background you can try some of the new CSS filters (saturation, brightness etc) but you're out of luck for IE.
http://www.html5rocks.com/en/tutorials/filters/understanding-css/
You could use this CSS code which makes lighting up a smoother transition than just instantly bright. Techpp.com and Techlivewire.com also use this same css or one similar to it on their frontpage featured sections. I could not get CSS to post on here since stackoverflow kept giving me errors so I put it in a pastie. http://paste2.org/1L9H2XsF
you can use opacity value between 0.1 to 1
very light and 1 value is dark (default)
img {
filter: alpha(opacity=100);
opacity: 1;
}
img:hover {
filter: alpha(opacity=70);
opacity: 0.7;
}
some designs on the Apple's user's webpage show a photo that is tilted slightly, like at a 5 or 10 degree angle. while this is no big deal, it does make the webpage totally different from "all the rest".
is it true that currently using HTML or CSS, this can't be done yet?
like the big photo in the middle:
alt text http://img7.imageshack.us/img7/383/phototilt.png
(the program lets you choose photos and then create the page (html and jpg) dynamically for you)
CCS 3 will offer this possibility, but it's still not cross-browser and you cannot do it with traditional HTML + CSS... yet.
Websites having a tilted image do it by rotating it in, say, Photoshop and making its background transparent. That's the whole trick there's to it.
Tip: save that picture to your HD and see by yourself. That's probably just an squared image with transparent background, or maybe it has the current background cut nicely to fit there.
You can do it, but only in Firefox 3.5+ and Safari 3.2+ (and recent webkit based browsers). Both provide browser specific CSS extensions for skew: -moz-transform and -webkit-transform respectively.
Here's a nice example that builds a 3d looking cube out of divs: (from http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/)
<div class="cube">
<div class="topFace">
<div>
Content
</div>
</div>
<div class="leftFace">
Content
</div>
<div class="rightFace">
Content
</div>
</div>
And CSS:
.cube {
position: relative;
top: 200px;
}
.rightFace,
.leftFace,
.topFace div {
padding: 10px;
width: 180px;
height: 180px;
}
.rightFace,
.leftFace,
.topFace {
position: absolute;
}
.leftFace {
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
background-color: #ccc;
}
.rightFace {
-webkit-transform: skewY(-30deg);
-moz-transform: skewY(-30deg);
background-color: #ddd;
left: 200px;
}
Yes, with CSS3 you can:
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
Supported by all the modern browsers and IE9+.
See CSS transform on MDN for more information.
To my knowledge you can not do that. Are you sure the image you are thinking of isn't tilted in Photoshop or similar and just added to the page like that?
You can use Apple specific CSS attributes (soon to be ratified, and then they'll remove the webkit prefixes for them) to do this and animation effects, but it will only show up in Safari and Chrome right now. Still, they look quite pretty and CSS is simple to do.
Right now it's probably just done in Photoshop, and nicely anti-aliased there as well, so that it has a consistent cross-browser appearance.
We are doing something similar at work, we have to do it on the fly.
You can't do it with just html/css, however we are using an image library through a php script to generate them automatically, and then make the background transparent.
Use a PHP GD Library. Makes things so much easier.
No. You can't.
Tilting images and text is still JavaScript juju.
Edit: Or, at least, you couldn't with CSS2. Starting with CSS3, there's the transform property, which includes rotations.