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>
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/
I have an issue , I have the following code I am using for increasing the scale using CSS3 transition , at the end it snaps back to its original scale after increasing.
CSS:
.big{
transition:all 0.3s ease-in-out;
display:inline;
}
.big:hover{
-webkit-transform:scale(1.4);
}
HTML :
<h1 class = "big">Typo</h1>
Try using inline-block instead of inline (also, it's recommended to add compatibility to the rest of the browsers as well).
CSS:
.big {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: inline-block;
}
.big:hover {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
HTML:
<h1 class="big">Typo</h1>
Test it here: http://jsfiddle.net/XbUC8/
I am testing with CSS and got to a strange behaviour where transform:rotate doesn't work, here is an example where the animation doesn't happen: jsFiddle
CSS
.close {
width:100px;
height:100px;
background:#00f;
color:#fff;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.close:hover {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.close, .close:hover {
-webkit-transition:rotate .2s ease-in-out;
-moz-transition:rotate .2s ease-in-out;
-o-transition:rotate .2s ease-in-out;
-ms-transition:rotate .2s ease-in-out;
transition:rotate .2s ease-in-out;
}
Why is this not working?
Thanks ;)
You applied the transition to the wrong attribute: (Working jsFiddle)
.close { /* You don't really need .close:hover here */
-webkit-transition: -webkit-transform .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
-ms-transition: -ms-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
The attribute you want to animate is transform. rotate() is a transformation function not a CSS property.
There are three buttons. I want to arrange them in a circle. Is there a way to do it by putting them in the same div and then give some in div property, instead of giving the coordinates for each button? And how to make animations/ for example on clicking any button tha button should rotate and come to the top.
THIS IS THE STYLE
.Hfaraz {
background-color: #03F;
height: 100px;
width: 100px;
float: left;
}
.Hfaraz:hover{
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-moz-transform: rotate(45deg); /* Firefox */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
-webkit-transition: transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
-ms-transition: transform 0.3s ease-in-out;
-o-transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
THIS IS HTML
<div class="Hfaraz"></div>
<div class="Hfaraz"></div>
<div class="Hfaraz"></div>