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'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/
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>