I have an image I would like to apply a css transitioned rotate transformation to when I mouse over an "a" tag in a separate area of the page. The only element I've thus far been able to target with this rotate is the image itself on hover over the image:
section#logo img {
-webkit-transition: -webkit-transform 5s ease-out;
-moz-transition: -moz-transform 5s ease-out;
-o-transition: -o-transform 5s ease-out;
transition: transform 5s ease-out;
}
section#logo img:hover {
-ms-transform: rotate(1800deg);
-webkit-transform: rotate(1800deg);
transform: rotate(1800deg);
}
What I want to do is something like this but I can't get it to function properly.
nav a:hover {
-webkit-transition: -webkit-transform 5s ease-out;
-moz-transition: -moz-transform 5s ease-out;
-o-transition: -o-transform 5s ease-out;
transition: transform 5s ease-out;
}
section#logo img {
-ms-transform: rotate(1800deg);
-webkit-transform: rotate(1800deg);
transform: rotate(1800deg);
}
Markup:
<nav>
Click
</nav>
<section id="logo">
<img src="images/item.png" />
</section>
Any help is greatly appreciated, thank you.
Related
I have a two-step CSS animation that I want to run forward once when "activated", and then run backward when "deactivated". I know it's possible to achieve by defining separate forward and backward animations, like so, but I was wondering if this was achievable with a single animation and the animation-direction: reverse property.
Something like this? If so what you're looking for is
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
If you need to attach it to a click you can add script to it in order to toggleClass with onClick
#test{
position:absolute;
height: 100px;
width: 100px;
background-color: #A8A8A8;
border-bottom: 0px solid black;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#test:hover{
border-bottom: 10px solid black;
}
<div id="test">
</div>
div {
background: aqua;
color: #fff;
margin: 0 auto;
padding: 100px 0;
-webkit-transition: -webkit-border-radius 1.5s ease-in;
-moz-transition: -moz-border-radius 1.5s ease-in;
-o-transition: border-radius 1.5s ease-in;
-ms-transition: border-radius 1.5s ease-in;
transition: border-radius 1.5s ease-in;
text-align: center;
width: 200px;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
div:hover {
background: red;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-transition: -webkit-border-radius 1.5s ease-in;
-moz-transition: -moz-border-radius 1.5s ease-in;
-o-transition: border-radius 1.5s ease-in;
-ms-transition: border-radius 1.5s ease-in;
transition: border-radius 1.5s ease-in;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
<div></div>
I have the following picture of an arrow
What I would like to achieve is to let this arrow arise (grow) via CSS.
How could I achieve this? I would prefer a CSS3 only solution if it was possible.
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.zoomin img {
height: 200px;
width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.zoomin img:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="zoomin">
<img src="img/image.png" />
</div>
</body>
</html>
Hope this helps
A simple example using CSS3 tranform and transition properties :
HTML :
<img id="arrow" alt="arrow" src="http://i.stack.imgur.com/x0Pe8.png">
CSS :
#arrow {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-o-transform: scale(0.3);
-ms-transform: scale(0.3);
transform: scale(0.3);
}
#arrow:hover {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
See Fiddle
Then you can play with other transform property values if you need a different effect (rotate, translate, skew, or more complex transformations).
I want to make element "tilt" on my page, to be more precise I have an .svg image (size 100px 100px) so I have these two css classes, and I have some strange effect, some small white line in upper left corner.
I have tried to add
-webkit-backface-visibility:hidden;
but it solws problem only in Chrome if I dont hover while page is loading.
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.tilt:hover {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-500deg);
-o-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
transform: rotate(-50deg);
}
css
.score {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.score-big {
-webkit-transform: scale(3);
}
js
$('.score').addClass('score-big')
scale applying but without transition. When i toggling scale in chrome console, transition works. What problem?
I have a website where I am working with a Wordpress theme that I am trying to modify. If you go the site
http://66.147.244.132/~dokkanca/
and scroll down to where it says, "Ramadan specials through August 10th", you'll notice that the title bar which is in the form of a ribbon wraps to the next line. I don't want this, but I can't figure out how to prevent this. I've spent a lot of time trying to change parameters within my relevant CSS code but unfortunately I have not been successful. Can someone please show me how to correct this so that the ribbon around the title goes straight across, and NOT wrap to the next line? In my wordpress options, this title within the ribbon is referred to as, "Bottom slider title". Below is my relevant CSS code:
.home-title{width:265px;color:#ffffff;font-family:'Merienda One', sans-serif;font-size:18px;text-shadow: 0 1px 0 rgba(30, 30, 30, 0.6);position:relative;padding:0px 0px 4px 10px;margin:0;}
.home-img{margin:10px 0px 10px 0px;display:block;overflow: hidden;border:2px solid #e9e9e9;}
.home-img .mask{width: 100%;height:100%;position: absolute;overflow: hidden;top:0;left:0;}
.home-img span.link-img {background:url("images/link-img.png") no-repeat 0 0;
display:block;
width:31px;
height:37px;
text-indent:-9999px;
margin-left:45%;
-webkit-transform: translateY(-160px);
-moz-transform: translateY(-160px);
-o-transform: translateY(-160px);
-ms-transform: translateY(-160px);
transform: translateY(-160px);
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.home-img:hover span.link-img{-webkit-transform: translateY(45px);
-moz-transform: translateY(45px);
-o-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;}
.home-img, .post_image img, .img-left-post img{-webkit-transition: border-color 0.5s ease;-moz-transition: border-color 0.5s ease;-o-transition: border-color 0.5s ease;transition: border-color 0.5s ease;display: block;position: relative;}
.home-img:hover, .post_image:hover img, .img-left-post img:hover{-webkit-transition: border-color 0.5s ease;-moz-transition: border-color 0.5s ease;-o-transition: border-color 0.5s ease;transition: border-color 0.5s ease;}
.home-img .mask, .post_image .mask2{background-color: rgba(0, 0, 0, 0.2);-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.3s ease-out 0.3s;-moz-transition: all 0.3s ease-out 0.3s;-o-transition: all 0.3s ease-out 0.3s;-ms-transition: all 0.3s ease-out 0.3s;transition: all 0.3s ease-out 0.3s;}
.home-img:hover .mask, .post_image:hover .mask2{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;-webkit-transition: all 0.3s ease-out 0s;-moz-transition: all 0.3s ease-out 0s;-o-transition: all 0.3s ease-out 0s;-ms-transition: all 0.3s ease-out 0s;transition: all 0.3s ease-out 0s;}
.home-bottom{margin-top:30px;}
.text-right{float:right;display:block;}
.home-bottom .home-title{margin-bottom:40px;}
.home-time{font-size:11px;color:#858585;font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;}
.home-post-title{padding:0;margin-bottom:5px;}
.home-post-title a{font-size:14px;}
Thanks in advance to all who reply.
It's wrapping because you set .home-title to have width:265px;. Increase the value and it will solve your problem.
Edit: to not disturb the other elements with .home-title, see if you can assign that element a second class, with a new width value, > 265px.
Yet another option would be a rule like: .container .span8 .home-title {width: put new width here}