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>
Related
I've been struggling with creating a page on which I can display multiple images which, on hover, will enlarge approximately 80% of the page width.
To do this, based on the answers of other questions on here, I have used transform: scale ().
The problem I face is that this seems to result in the images overlapping when enlarged.
What I'm hoping to achieve is for the images to push each other down the page when enlarging, rather than going over or under.
Please excuse my messing attempt at solving this. Coding in general is very new to me.
https://jsfiddle.net/msandford/zjrc7v6s/
.image1 { `display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image1:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image2 {
display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image2:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image3 {
display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image3:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
Thanks in advance.
The scale() function keeps the bounding box of the original element thus not pushing the other images, I could have played around with adding a margin (top and bottom) but then the image jumps around so I opted for just using the width property (why not? what was your initial question that led to scale()?)
#scale {
text-align: center; /* to align all inline content inside the div */
}
#scale img {
width: 150px;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
#scale img:hover {
width: 80%;
}
<div id="scale">
<img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br>
<img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br>
<img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg">
</div>
Also I think I should point out that you were using classes wrong.
A class is a string that you would apply to all of the images and then you can do .scalethis{} in css to apply that to all of your images at once.
How you were using it was like how you should use id
I created a simple effect that causes an image to change color on hover. Now I want to add transition-timing-function properties so the color transition fades in and out rather than an instant change, but I can't seem to get it to work. Any ideas?
Here's the code:
div {
position: relative;
display: inline-block;
-webkit-transition: all 500ms ease-out 1s;
-moz-transition: all 500ms ease-out 1s;
-o-transition: all 500ms ease-out 1s;
transition: all 500ms ease-out 1s;
}
img {
width: 100%;
height: 100%;
}
div:hover::after {
position: absolute;
z-index: 1;
background-color: Indigo;
opacity: 0.4;
left: 0;
top: 0;
height: 100%;
width: 100%;
content: '';
Thanks!
There are two problems with your code:
The ::after selector works as a separate element, so having the transitions on the div won't work, they need to be applied to the ::after.
The :hover::after selector needs something to transition from.
This should work:
div {
position: relative;
display: inline-block;
}
img {
width: 100%;
height: 100%;
}
div::after {
-ms-transition: all 500ms ease-out 1s;
transition: all 500ms ease-out 1s;
position: absolute;
z-index: 1;
background-color: transparent;
opacity: 0.4;
left: 0;
top: 0;
height: 100%;
width: 100%;
content: '';
}
div:hover::after {
background-color: Indigo;
}
Somebody also shared this code with me, which seems to do the same thing by wrapping the image in a span class:
.imghov {
display: inline-block;
background-color: #fff;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.13ss linear;
transition: all 0.3s linear;
}
.imghov img {
opacity: 1;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.imghov:hover {
background-color: indigo;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
imghov:hover,
.imghov:hover img {
opacity: 0.6;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
Hi what I am trying to do is have a with background color and on hover it will transition to a image. I found very good example but other way around here is a link.
http://jsfiddle.net/davidThomas/PbvFr/1/ so I need bg black and on :hover image will appear over time. I tried to do this but unfortunately the transition is not smooth. thank you for your time!!!!!!!!
.imageWrap {
background-color: #333;
border: 1px solid #000;
height: 300px;
moz-transition: all 1s linear;
ms-transition: all 1s linear;
o-transition: all 1s linear;
transition: all 1s linear;
webkit-transition: all 1s linear;
width: 300px;
}
.imageWrap .img {
moz-transition: all 1s linear;
ms-transition: all 1s linear;
opacity: 1;
o-transition: all 1s linear;
transition: all 1s linear;
webkit-transition: all 1s linear;
}
.imageWrap:hover {
background-image: url(5.jpg);
moz-transition: all 1s linear;
ms-transition: all 1s linear;
o-transition: all 1s linear;
transition: all 1s linear;
webkit-transition: all 1s linear;
}
.img:hover, .imageWrap:hover .img {
moz-transition: all 1s linear;
ms-transition: all 1s linear;
opacity: 0;
o-transition: all 1s linear;
transition: all 1s linear;
webkit-transition: all 1s linear;
}
Just reverse what he did: http://jsfiddle.net/PbvFr/102/
Change opacity from 0 to 1 rather than 1 to 0.
Look the CSS
Here you go: FIDDLE
CSS
.imgWrap {
display: inline-block;
position:relative;
border: 1px solid #000;
background-color: #000;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
height: 500px;
width:364px;
}
.imgWrap img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background: #fff;
color: #fff;
opacity:0;
transition:1s;
}
.imgWrap:hover img {
opacity: 1;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
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}
I have .css which makes mine image darker on hover:
a.darken {
display: inline-block;
background: #222222;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.1;
}
I wonder how could I change it that it would be darkened on normal state and would be normal on hover?
Move the opacity: 0.1 to the normal state and revert it to 1.0 on hover:
a.darken img {
display: block;
opacity: 0.1;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 1.0;
}