I am having a problem with given below code
This is my stylesheet
.h_w:hover img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: 5s all;
-moz-transition: 5s all;
-o-transition: 5s all;
-ms-transition: 5s all;
transition: 5s all;
}
.h_w{ border-radius:200px;
-moz-border-radius: 200px;
-ms-border-radius: 200px;
-o-border-radius: 200px;
-webkit-border-radius: 200px;
height: 287px;
overflow: hidden;
position: relative;
width: 287px;
background-color: #FFFFFF;
}
.opacity-0.5{opacity:0.2;}
.circle_background{
background:url(../images/circle-bg.png) no-repeat;
height:100%;
width:100%;
position:absolute;
font-size:15px;
opacity:1 !important;
top: 286px;
}
.h_w:hover .circle_background{
transition:1s all;
-moz-transition:1s all;
-ms-transition:1s all;
-o-transition:1s all;
-webkit-transition:1s all;
top:0px;
z-index:1000px;
}
And this is my HTML
<body style="background-color: #000000;">
<div class="h_w">
<span><img src="images/projects/circles/background.png" alt="flick the switch" /></span>
</div>
</body>
This code is working fine in Mozilla firefox but in chrome it is not working when zooming it is going outside the circle.
Any help will be appreciated.
Look here for your answer: --->X<---
PS: you must add -webkit-mask-image: -webkit-radial-gradient(circle, white, black); to your img's parent-div styles.
Hope it helps.
Use this code it will work .
.h_w:hover img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: 5s img ;
-moz-transition: 5s img ;
-o-transition: 5s img ;
-ms-transition: 5s img ;
transition: 5s img ;
}
here above you can see that .h_w:hover img rule uses transtion property.
In transtion property I use img because You would like to create a motion on "img" not "all" property
So use "img" instead of "all".
Hope the answer!
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!
This question already has answers here:
Spin or rotate an image on hover
(5 answers)
Closed 7 years ago.
I have this code to make a rotation on hover. It doesn't work at all. What's is wrong with it?
I need the complete animation of the rotation for 360ยบ
.icon-style-1 .builder-element-icon {
height: 100px;
width: 100px;
line-height: 100px;
background: blue;
line-height: 100px;
text-align: center;
margin: 0 auto;
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: white;
}
.icon-style-1 .builder-element-icon:hover {
background: green;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
<div class="icon-style-1">
<span class="builder-element-icon fa fa-camera"></span>
</div>
So here you go with transition on normal element style and rotate added on hover and External DEMO HERE
.icon-style-1 .builder-element-icon{
height: 100px;
width: 100px;
line-height: 100px;
background: blue;
line-height: 100px;
text-align: center;
margin: 0 auto;
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: white;
/* Firefox */
-moz-transition: all 1s ease;
/* WebKit */
-webkit-transition: all 1s ease;
/* Opera */
-o-transition: all 1s ease;
/* Standard */
transition: all 1s ease;
}
.icon-style-1 .builder-element-icon:hover{
background: green;
/* Firefox */
-moz-transform: rotate(360deg) ;
/* WebKit */
-webkit-transform: rotate(360deg);
/* Opera */
-o-transform: rotate(360deg) ;
/* Standard */
transform: rotate(360deg) ;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="icon-style-1">
<div class="builder-element-icon glyphicon glyphicon-camera">
</div>
</div>
360 degrees rotates it back to its original place. you probably wanted it to be 180deg;
if you want it animatad, you need to add a transition:
.icon-style-1 .builder-element-icon{
height: 100px;
width: 100px;
line-height: 100px;
background: blue;
line-height: 100px;
text-align: center;
margin: 0 auto;
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: white;
-moz-transition: -moz-transform ease 0.6s;
-webkit-transition: -webkit-transform ease 0.6s;
-o-transition: -o-transform ease 0.6s;
-ms-transition: -ms-transform ease 0.6s;
transition: transform ease 0.6s;
}
.icon-style-1 .builder-element-icon:hover{
background: green;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
<div class="icon-style-1">
<span class="builder-element-icon fa fa-camera">a</span>
</div>
and in case you want to animate the background color to, you could replace transition: transform ease 0.6s; withe either
transition: transform ease 0.6s, background ease 0.6s;
or
transition: all ease 0.6s;
You can use CSS3 transitions in order to achieve this result.
Just move your mouse over the label.
#rotatable {
font-size: 30px;
}
#rotatable:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
<span id="rotatable">I can rotate!</span>
You forgot to add CSS Transitions. Also, you don't need to use -moz, -ms and -o vendor prefixes now, see Can I Use:
JSFiddle
.icon-style-1 .builder-element-icon {
height: 100px;
width: 100px;
line-height: 100px;
background: blue;
text-align: center;
margin: 0 auto;
display: block;
border-radius: 50%;
color: white;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.icon-style-1 .builder-element-icon:hover {
background: green;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="icon-style-1">
<span class="builder-element-icon fa fa-camera"></span>
</div>
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>
In my css I have 3 cogs, I want when I hover one of the cogs, that the other 2 cogs also get activated.
My codes:
CSS
#box_1{
border: 1px solid red;
display: block;
position: relative !important;
width: 200px;
height: 200px;
}
.object1 {
position: absolute !important;
}
.cog1 {
top: 18%;
left: 5%;
}
.object2 {
position: absolute !important;
}
.cog2 {
top: 8%;
left: 54%;
}
.object3 {
position: absolute !important;
}
.cog3 {
top: 60%;
left: 54%;
}
.object1 {
position: absolute;
transition: all 20s ease-in;
-webkit-transition: all 20s ease-in; /** Chrome & Safari **/
-moz-transition: all 20s ease-in; /** Firefox **/
-o-transition: all 20s ease-in; /** Opera **/
}
#axis1:hover .rotate360cw {
transform: rotate(3600deg);
-webkit-transform: rotate(3600deg);
-o-transform: rotate(3600deg);
-moz-transform: rotate(3600deg);
}
.object2 {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
#axis2:hover .rotate360cw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}
.object3 {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
#axis3:hover .rotate360cw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}
HTML
<div id="box_1">
<div id="axis1"><img class="object1 cog1 rotate360cw aligncenter" alt="" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/512px-Cog_font_awesome.svg.png" width="128" height="128" /></div>
<div id="axis2"><img class="object2 cog2 rotate360cw aligncenter" alt="" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/512px-Cog_font_awesome.svg1-e1390559689165.png" width="64" height="64" /></div>
<div id="axis3"><img class="object3 cog3 rotate360cw aligncenter" alt="" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/512px-Cog_font_awesome.svg2-e1390559748608.png" width="64" height="64" /></div>
</div>
Check this at fiddle here.
How can I achieve this?
try adding this to your css
#box_1:hover .rotate360cw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}
Not 100% thats the result you want.
DEMO
Peace.
Add, for instance:
#axis1:hover ~ div > img {
-webkit-transform: rotate(-360deg) !important;
}
Same can be done also for #axis2:hover ~ div > img. Unfortunately CSS can't ascend so therefore you can't declare a rule which would apply from cog2 to cog1 or from cog3 to cog2/cog1. This could only be solved with JavaScript.
You cannot archive this with siblin selectors, since you cannot ascent in CSS (you cannot affect .cog1 when hovering .cog3).
An idea is to give the container the effect trigger:
#box1:hover img[class*="cog"] {
niceHoverEffect
}
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);