I'm making a hover effect on my website, where you hover images (pngs) and they grow in size. The problem i have is that they now get blurry when they resize.
The code that I'm using looks something like this:
.div {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: perspective(1000px) translate3d(0,0,1px);
transform: perspective(1000px) translate3d(0,0,0);
}
.div:hover {
-webkit-transform: perspective(100px) translate3d(0,0,1px);
transform: perspective(100px) translate3d(0,0,31px);
}
And you can see the effect on this jsfiddle: enter link description here
Is there a way to fix this?
I think scale would be more appropriate for this. This solution only blurs during scaling.
.square {
width:100px;
height: 100px;
background-color:black;
margin: 50px;
}
p {
color:white;
text-align: center;
padding-top: 35px;
}
.square {
-webkit-transition: -moz-transform .3s ease-out;
-moz-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.square:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
<div class="square">
<p>Some text</p>
</div>
Related
I'm using this image zoom transition when i hover over an image. It's seems to work perfectly sometimes and sometimes it moves a little bit after zooming. I just can't figure out why..
Can anyone help me out why this happens
header {
width: 65.277777777777778%;
max-width: 1400px;
margin: 0 auto;
overflow: auto;
margin-bottom: 6%;
}
.container {
position: relative;
overflow: hidden;
/* height: 200px;
width: 200px; */
width: 100%;
}
.container img {
position: relative;
height: 100%;
width: 100%;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: transform;
transition: transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
display: flex;
}
.container:hover img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: transform;
transition: transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
<header>
<div class="container">
<img src="https://pixabay.com/static/uploads/photo/2016/08/11/08/43/potatoes-1585060__340.jpg" alt="" />
</div>
</header>
Give this a try and see if it's more consistent for you. It works well for me, and I haven't noticed any issues in the months it's been implemented:
.container img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.container img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
See if this does the trick, if it's something you're interested in. Either way, let me know!
i have a 45 deg rotated div. i am trying on hover to rotate it around its y-axis by using css3 perspective. it dont hover like i want and it becomes a square when hovered. i would like to maintain rotated 45 deg at the end of the animation.
here is my code:
<div class="perspective">
<a href="#" class="box">
<div class="innerbox">
text
</div>
</a>
</div>
.perspective
{
position:relative;
width:100px;
height:100px;
margin:200px 0px 0px 200px;
-moz-perspective: 300px;
-webkit-perspective: 300px;
-o-perspective: 300px;
-ms-perspective: 300px;
perspective: 300px;
}
.box
{
width:80px;
height:80px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
border: 5px solid #000;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
.innerbox
{
margin:30px 0px 0px 20px;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.box:hover
{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
i made an example http://jsfiddle.net/o6mo0rjq/
You've initially rotated .box by 45 degrees around the Z-axis. When you specify a new transform, this initial rotation is overwritten - so for the new rotation on :hover, you should also specify the original rotation. Your block declaration would then become:
.box:hover {
-moz-transform: rotateY(180deg) rotateZ(45deg);
-webkit-transform: rotateY(180deg) rotateZ(45deg);
-o-transform: rotateY(180deg) rotateZ(45deg);
-ms-transform: rotateY(180deg) rotateZ(45deg);
transform: rotateY(180deg) rotateZ(45deg);
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
Here's a JSFiddle to demonstrate. (Note: The order in transform matters! Because that dictates the order in which the rotations are applied to the element, which may give you different results depending on the transformations you're applying.)
Hope this helps! Let me know if you have any questions.
Suppose, I have a facebook logo image. This image also works as a link to my facebook profile. Now, I want as soon as a user put the mouse cursor over it, it should increase the height (let's say 3 px).
This is my source code I am working on:
.HTML:
<div id="find_me_on">
<p>Find me on:</p><br><img src="img/fblogo.png" title="Facebook" id="inc_fb_height" />
</div
.CSS:
#inc_fb_height{
/*Need help*/
}
Don´t waste JavaScript (and especially not jQuery) for those things, you only need CSS:
#inc_fb_height {
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
#inc_fb_height:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
Of course you can also just scale the height with scale(1, 1.1), or scaleY(1.1).
Although, it would be better to start with a scale factor <1 and set scale to 1 on hover - to avoid blurry pictures.
Here´s that version with scale3d, so it uses hardware acceleration (not really needed in that case, but #yolo):
#inc_fb_height {
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
-webkit-transform: scale3d(0.9, 0.9, 1);
-moz-transform: scale3d(0.9, 0.9, 1);
-ms-transform: scale3d(0.9, 0.9, 1);
-o-transform: scale3d(0.9, 0.9, 1);
transform: scale3d(0.9, 0.9, 1);
}
#inc_fb_height:hover {
-webkit-transform: scale3d(1, 1, 1);
-moz-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
USE this fiddle if you want css fix only
http://jsfiddle.net/4wpw6add/4/
#inc_fb_height{
height:120px;
}
#inc_fb_height:hover{
height:124px;
}
USE this fiddle if you can use javascript
http://jsfiddle.net/4wpw6add/5/
.img-zoom:hover {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}
.transition {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
jquery
$(document).ready(function(){
$('.img-zoom').hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});
I have created a JS fiddle for this. -- JS FIDDLE
#inc_fb_height:hover{
height:500px; /* new height*/
}
Use what you have:
#inc_fb_height{
height:100px;
}
but then add
#inc_fb_height:hover{
height:103px;
}
creating a hover property that takes the original and changes it to 3px taller on mouse hover
add a hover state to the image:
HTML:
<div id="find_me_on">
<p>Find me on:</p> <img src="http://www.insidefacebook.com/wp-content/uploads/2013/01/profile-150x150.png" title="Facebook" id="inc_fb_height" />
</div>
CSS:
img#inc_fb_height {
position: relative;
height: 150px;
}
img#inc_fb_height:hover {
height: 153px;
}
Fiddle:
http://jsfiddle.net/jazztorbs/k3u1dLna/
My problem is about choosing in CSS first or second image.
<div class="ao-preview">
<input type="checkbox" id="ao-toggle" class="ao-toggle" name="ao-toggle" />
<img src="img/local.png"/>
<img src="img/local_big.jpg"/>
</div>
CSS code
.ao-item img {
margin: 0 auto;
max-width: 100%;
display: block;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
-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;
}
input.ao-toggle:checked +img{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
opacity: 1;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
input.ao-toggle:checked +img sets attributes for first image.
So the question is, how can I choose second image in that case? Because I want to make by one click one image disappear and another appear instead of first.
A more generic approach could be the use of nth-of-type pseudo class
.ao-toggle:checked + img:nth-of-type(1) {
//style for the 1st element here
}
.ao-toggle:checked + img:nth-of-type(2) {
//style for the 2nd element here
}
foo + img + img would be the image after the image after foo.
I'm having an issue in chrome with a css3 transform rotate transition. The transition is working fine but just after it finishes the element shifts by a pixel. The other strange thing is that it only happens when the page is centered (margin:0 auto;). The bug is still there if you remove the transition as well.
You can see it happening here:
http://jsfiddle.net/MfUMd/1/
HTML:
<div class="wrap">
<img src="https://github.com/favicon.ico" class="target" alt="img"/>
</div>
<div class="wrap">
<div class="block"></div>
</div>
CSS:
.wrap {
margin:50px auto;
width: 100px;
}
.block {
width:30px;
height:30px;
background:black;
}
.target,.block {
display:block;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
Comment out the margin:0 auto; line to make it go away.
Anyone have any ideas of how to stop this while keeping the page centered?
I'm using Version 24.0.1312.57 on OSX 10.6.8
Cheers
Actually just add this to the site container which holds all the elements:
-webkit-backface-visibility: hidden;
Should fix it!
Gino
I had the same issue, I fixed it by adding the following to the css of the div that is using the transition:
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
Backface is used for 3D-based transitions but if you are only using 2D there is no need for the extra stuff.
will-change: transform; on the element helped to me in 2022 (Chrome). No more 1px shift of the text inside the element after zoom animation.
there is something unusual in the relation between the body dimension and the structure of the transform. I don't in fact is because the fiddle iframe that contains the preview of the code.
Anyway, I will suggest this approach instead:
body{
width:100%;
float:left;
}
.wrap {
margin: 50px 45%;
width: 5%;
float: left;
}
.block {
width:30px;
height:30px;
background:black;
}
.target,.block {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
Here is the updated fiddle
For 3d transform use this instead:
-webkit-transform: perspective(1px) scale3d(1.1, 1.1, 1);
transform: perspective(1px) scale3d(1.1, 1.1, 1);