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/
Related
I want both animations to execute on hover and then reset back after the cursor moves away like the rotate animation I have below. So I just need to combine the grow animation with a keyframe or ? Any Suggestions? Thanks.
#rotating_image {
position:absolute;
left:70px;
top:100px;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
#rotating_image:hover {
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
<img src="http://i.imgur.com/ZKEqcWm.jpg" id = "rotating_image">
Try looking into scale(), also note that you can use multiple transformations.
#rotating_image {
position: absolute;
left: 70px;
top: 100px;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
#rotating_image:hover {
transform: rotate(360deg) scale(2);
-ms-transform: rotate(360deg) scale(2);
-webkit-transform: rotate(360deg) scale(2);
}
<img src="http://i.imgur.com/ZKEqcWm.jpg" id="rotating_image">
So this will only work if you know the start and end height... But basically height transitions have to use the max-height affect. The following example assumes you want it to grow from 100px -> 400px. Let me know if it would need to be dynamic heights
#rotating_image {
position:absolute;
left:70px;
top:100px;
height: 400px;
max-height: 100px;
-webkit-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#rotating_image:hover {
max-height: 400px;
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
<img src="http://i.imgur.com/ZKEqcWm.jpg" id = "rotating_image">
To do this, you can put two methods in the transform like this:
#rotating_image {
position:absolute;
left:70px;
top:100px;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
#rotating_image:hover {
-ms-transform:rotate(360deg) scale(2,2);
-webkit-transform:rotate(360deg) scale(2,2);
transform:rotate(360deg) scale(2,2);
}
<img src="http://i.imgur.com/ZKEqcWm.jpg" id = "rotating_image">
The 2's in the scale() are just examples. You can use different numbers. scale() multiplies by the numbers in the parameter: first is the width, second is the height. Also, the properties with the prefixes should always come before the properties without them. Example to explain previous sentence: -webkit-transform and -ms-transform should come before transform.
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>
I have this code it should scale a link when the mouse is over it
HTML
<a class='subj' href='#'>English 2</a> </br>
CSS
.subj{
text-decoration:none;
transition: 0.5s ease-in-out ;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
}
.subj:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
}
This code works fine on both chrome and mozilla when the tag is <p> but when it is <a> it's not working on mozilla but it does on chrome
Set the .subj display property to inline-block.
.subj {
text-decoration:none;
transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
display: inline-block;
}
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>
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.