Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a div in the sidebar. The whole div is a link which takes you to another part of the website.
Now, there is this small flower like image in the left side of the div, background image. When you hover the div the flower should
rotate
fade in and out.
If I apply the animation on the entire div, the div will rotate, not the background image. So I solved it like this: the flower is in an absolutely positioned div and rotates and fades in and out continuously (if I apply the animation to the :hover then it rotates only when I hover directly on the image.)
Is this what you want?
http://jsfiddle.net/kgFdJ/2/
#foo {
width: 300px;
height: 500px;
background-color: #eee;
position: relative;
}
#foo:after {
content: "";
width: 20px;
height: 20px;
background-color: #f00;
position: absolute;
top: 10px;
left: 10px;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s
}
#foo:hover:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
But be aware that using a pseudo selector to another pseudo selector could get a little buggy in some browsers, so instead you can do something like this:
HTML
<div id="foo">
<div class="flower"></div>
</div>
CSS
#foo:hover > div.flower ...
Related
This question already has answers here:
CSS performance relative to translateZ(0)
(5 answers)
Closed 3 years ago.
Yesterday I used a snippet of from hover.css. I know CSS well enough to understand what is going on here, except one line, which is transform: perspective(1px) translateZ(0);. I've tried to feed the exact values to this demo on MDN, however, it gave me a crazy result. (I suspect that this is some kind of render sub-optimization (such as transform: scale(0.99), which I slightly remember to have seen before), but I might be wrong. Or a stacking context?). Can anybody explain? Thanks.
.hvr-underline-reveal {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0); /* <-- what is going on here? */
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
}
.hvr-underline-reveal:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
background: #2098D1;
height: 4px;
transform: translateY(4px);
transition: transform 0.3s ease-out;
}
.hvr-underline-reveal:hover:before {
transform: translateY(0);
}
<div class="hvr-underline-reveal">You'll see a thick underline if you hover me</div>
<p>But do I really need perspective and Z axis transition? What is it good for?</p>
A "useless" transformation in the Z-plane is often used to fix blurry rendering that occurs when translating or transitioning something or for some other reason force the browser to use hardware accelleration / the gpu.
for instance see here CSS transition effect makes image blurry / moves image 1px, in Chrome?
I want to rotate a frame but not the image inside it. Here is a JSFiddle that does the rotation but the image still moves. How can I keep the image stationary but move the frame only.
https://jsfiddle.net/q6n2w4qm/2/
HTML:
<body>
<div class="center">
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2">
</div></div>
</div>
</div>
</body>
CSS:
.center{
width: 200px;
margin: auto;
margin-top: -50px;
}
.hexagon{
width: 200px;
height: 400px;
overflow: hidden;
visibility: hidden;
transform: rotate(120deg);
cursor: pointer;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.hexagon-in1{
overflow: hidden;
width: 100%;
height: 100%;
transform: rotate(-60deg);
}
.hexagon-in2{
width: 100%;
height: 100%;
visibility: visible;
transform: rotate(-60deg);
background: url('http://lorempixel.com/g/250/350/city');
repeat: no-repeat;
position: relative;
}
.hexagon:hover{
-ms-transform: rotate(150deg); /* IE 9 */
-webkit-transform: rotate(150deg); /* Chrome, Safari, Opera */
transform: rotate(150deg);
}
1) PNG pseudo-mask overlay
I created a simple HTML/CSS solution, but is only possible with the following three criteria:
The background color behind the image is a solid color
There is enough margin on all sides of the image
You have Photoshop or some comparable image editing software
Working Example
body {
background-color:#222222;
}
.hex-hack {
position:relative;
top:0;
left:0;
}
.base-image {
position:relative;
top:0;
left:0;
z-index:1;
margin: 84px;
}
.hex-overlay {
position:absolute;
width:568px;
height:568px;
top:0px;
left:0px;
z-index:3;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.hex-overlay:hover {
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
<body>
<div class="hex-hack">
<img class="base-image" src="https://lorempixel.com/output/technics-q-g-400-400-2.jpg" alt="" />
<img class="hex-overlay" src="https://i.imgur.com/zYa31Tw.png" alt="" />
</div>
</body>
Note that the margin of the top image is half of the difference between the widths of the bottom image and the top image to keep it centered.
How I Made the Hexagon Mask in Photoshop
I started with a 400 by 400 image on a 800 by 800 canvas and created a perfect circle around the image so that each corner pixel of the image touched the circle. I cropped the canvas down to the width of the circle (568px). The purpose of this is to guarantee that the image is completely covered as the hexagon mask rotates.
Next, I had to create a 350 by 400 hexagon with no fill, rotate it 30 degrees, and center it in the middle of the canvas. Then I selected the hexagon's pixels (ctrl + click the hexagon layer), inverted the selection (shift + ctrl + I), and filled a new layer with the #222222 background color. I hid every other layer and saved it as a png.
2) CSS clip-path and animate
Another possible solution for you to consider is to use CSS to animate an image's clipping path via the clip-path and animate properties. This might be an easier approach, however, the clip-path property is relatively new and doesn't have the greatest browser support - especially with IE, Edge, and Opera. Here are a couple resources to check out:
CSS Masking - Excellent article on the clip-path property (includes animation demo)
Clippy - Great tool for creating CSS clip-paths
3) SVG animation and clipPath
Finally, this is a very browser-friendly solution, but you'll need some software (like Illustrator) to create an SVG from an image. This is also something I have no actual experience with, but I'm positive it can be achieved with a little research, and some trial and error. Here are some resources to get you started.
SVG clipping/masking techniques
Animating SVGs with CSS
I have a question about the CSS3 steps() function.
When you enter the element with your mouse, the transition starts.
When you're mouse leaves the element before the animation is ready, it returns to it's original state. But the steps() isn't working anymore. Is there a workaround for this?
My fiddle: Fiddle
My SCSS:
* {
background: #f00;
}
.block {
width: 38px;
height: 38px;
background-image: url('http://s8.postimg.org/gr7lvdms5/sprite_test.png');
transition: all 0.5s steps(15);
background-position: 0 0;
position: absolute;
left: 100px;
top: 100px;
&:hover {
background-position: -570px 0;
}
}
Can somebody help me with this?
PS: I already found this: CSS transition on png sequence using steps 1, but this doesn't solve my problem.
You can use a workaround by using 3D transforms. From your code, I have added the transform to flip the arrow, and a transition for the transform:
transform: rotateX( 0deg );
transition:transform 0.5s;
&:hover {
transform: rotateX( -180deg );
}
You can see a working example here: http://jsfiddle.net/1t5u3r3L/1/
I have a problem in latest Firefox browser version 34 (system: Windows 7, screen width: 1600px). I made effect with zooming images (in some container) after hover on it. I am using transform: scale(1.1) with transition: transform 0.3s ease-in-out. But when I hover on image, and after image zoom in.. it make some strange 1px-shifting. Some rendering browser bug, but I hope that existing some fix for it.
Most important CSS definition and part of HTML code:
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
}
<figure>
<img class="img-responsive" src="http://lorempixel.com/600/400/fashion/7">
</figure>
Sample with bug is online here: http://templates.silversite.pl/test/jumpingimg/
I saw also that somebody can fix it, but I do not know how, e.g. box "Our recent work" on http://demo.qodeinteractive.com/bridge/
I had a similar problem on my project. All images were position: absolute; and the transform look like that:
figure img{
transform: translate( -50%, 50%) scale(1);
position: absolute;
top: 50%;
left: 50%;
}
figure img:hover{
transform: translate( -50%, 50%) scale(1.1);
}
I replace every scale with scale3d and that solved my problem.
The final styles look like that:
figure img{
transform: translate( -50%, 50%) scale3d(1, 1, 1);
position: absolute;
top: 50%;
left: 50%;
}
figure img:hover{
transform: translate( -50%, 50%) scale3d(1.1, 1.1, 1);
}
Hope that's will fix your problem
On the link that you provided, http://demo.qodeinteractive.com/bridge/ , if you actually go here: http://demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns-grid/ , you can see that, once looking at dev tools, that they apply a margin of "1px" on left/right side
.projects_holder.hover_text.no_space article .image img {
margin: 0 1px;
}
If you disable that style, you'll see the image move as you're describing when hovering on the image.
Therefore, your CSS for the image should be:
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
display: block; /* (or inline-block) */
margin: 0 1px;
}
I have just run into this same problem now. The solutions here didn't fix the issue, so I'm posting what I did to get this to work.
Like OP I had a container with oveflow hidden and was the same size as the image inside it. The image would scale on hover to create a 'zoom' effect - but when initially starting and ending the transition, the image was "jumping"/growing a tiny bit on the bottom and right-hand side. This made it jumpy and not smooth.
I had calculated the dimensions of my components based off of percentages, which caused them to be non-integers (Chrome). I have a feeling Scale & Scale3d round the pixel values when scaling, which caused this jump. I gave a parent container display:table, which caused all children to have their width/heights be rounded to be an integer value. This fixed the issue for me, and the images now scale smoothly!
7,5 years later it's still an issue and the now solution is will-change css property. Only IE won't get this, but others seems to be doing fine - no more px jumping (edit: on non retina screens).
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
will-change: transform;
}
I just run over the same issue and for me it looks like that the browser corrects the decimal pixel after the scaling is done. Or some how the height and the width doesn't get scaled equals and that gets corrected in the end.
So I think the solution is to use an image with a 1 x 1 ration factor.
So for me the code of the question works fine when I use a the lorempixel with a width and height of 400px.
Let me know if that solves the issue?!
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
}
<figure>
<img class="img-responsive" src="http://lorempixel.com/400/400/fashion/7">
</figure>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
Is it possible to make 2 picture overlap this way ?
Imagine you have 2 images both like 60% of the resulting image. They should overlap, but by a diagonally cutout.
Either you use CSS Masking or you play around with CSS3 transform rotate:
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
You would rotate one inner container by say 45 degrees and the image inside that container by -45 degrees to make it straight again. The result is a diagonal border. Add z-index and absolute positioning and you got your result.
Here's a demo.
.container {
width: 500px;
height: 200px;
margin: 50px;
overflow:hidden;
position: relative;
border: 2px solid #666;
}
.img1 {
border-right: 2px solid #666;
position: absolute;
width: 300px;
height: 600px;
overflow: hidden;
left: -75px;
top: -230px;
z-index: 2;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.img1 img {
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
.img2 {
position: absolute;
width: 350px;
overflow: hidden;
left: 150px;
z-index: 1;
}
<div class="container">
<div class="img1"><img src="http://lorempixel.com/output/city-q-c-600-300-7.jpg" /></div>
<div class="img2"><img src="http://lorempixel.com/output/city-q-c-600-300-10.jpg" /></div>
</div>