I want to make a circle, where you can hover over it and then it change from picture 1 to 2. I can do that, but when the transition is finished it goes back to the .circle class, instead of staying at second picture.
So is there anyway to make it stay at second picture, as long as im still having my mouse over the picture.
Is there also a way to make it change from second to first picture, when i remove my mouse from it ?
.circle{
width: 250px;
height: 250px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #333333;
box-shadow: 10px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 10px 10px rgba(0,0,0,0.4);
-webkit-box-shadow: 10px 10px rgba(0,0,0,0.4);
-o-box-shadow: 10px 10px rgba(0,0,0,0.4);}
}
.circle-:hover{
-webkit-animation: second 2s; /* Chrome, Safari, Opera */
animation: second 2s;
}
#-webkit-keyframes second {
from {background: url("../images/circle-picture1");}
to {background: url("../images/circle-picture2");}
}
Add animation-fill-mode: forwards; and its prefixed variants to your .circle:hover class.
This causes the target to "retain the computed values set by the last keyframe encountered during execution."
More info on MDN
Related
I have some issues on my website with a hover effect.
When I load a collection and then go very quickly on a product, the hover effect glitches, and if I go to another product it shows the effect twice (hover bug)
When I leave the mouse on a product when it's loading it gives me this result.
Here is my code:
.hoverbuttons {display:none}
.quickbutton {display:block}
.hovereffect {margin-top: -38px;
display: inline-block;
position: relative;
left:0;
width: 100%;
background: rgba(255, 255, 255, 0.85);;
border-top: 0px solid {{settings.border_color}};
transition: all .7s ease-in;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-in;
transition-delay: initial;
}
.hoverthumb {box-shadow: 0 0 10px rgba(0,0,0,.15);}
.thumbnail {height:295px}
.formbkg{background-color:white;border:1px solid {{settings.productformborder}};padding: 10px;}
.swatch .swatch-element {
background-color: white;
}
Not sure if this is your problem but you have a double ;; in this line
background: rgba(255, 255, 255, 0.85);;
This would prevent the rest of your transitions/stylings from being used. Otherwise, it's hard to see exactly what's going on here without your HTML, but I would try playing with your transition lengths and see if that helps.
I have a div animation below which translate from bottom to top repeatedly.
0px to -20px to 0px to -20px to 0px.... but I want it to translate like this
0px to -20px to 5px to -20px to 0px to -20px to 5px to -20px to 0px
The demo is here.
HTML
<div id="main">
<div id="example"></div>
</div>
CSS
#main{
border-bottom: 1px solid black;
}
#example{
width: 100px;
height: 100px;
border: 1px solid black;
-webkit-animation: example 0.5s linear 0s infinite alternate;
}
#-webkit-keyframes example {
from {transform:translate(0px,0px);}
to {transform:translate(0px,-20px);}
}
first of all change the syntax of the animation from to and from to percentage based I.E.
from ::
#-webkit-keyframes example {
to {transform:translate(0px,0px);}
from {transform:translate(0px,-20px);}
}
to ::
#-webkit-keyframes example {
0% {transform:translate(0px,0px);}
50% {transform:translate(0px,-20px);}
100% {transform:translate(0px,5px);}
}
now see with percentages , you can animate an element at any point , DEMO here
use percertanges instead of from and to.
DEMO
#-webkit-keyframes example {
0% {transform:translate(0px,-20px);}
25% {transform:translate(5px,-20px);}
50% {transform:translate(0px,-20px);}
75% {transform:translate(5px,-20px);}
100% {transform:translate(0px,0px);}
}
I don't if this is the desired effect. Just update accordingly.
I have a div that I need to animate.
The animation starts with the div being 43px from the top of the viewport after which it moves downwards and then the div should stop at its natural position (top:auto) - the position where the div would normally be located.
I have styled the div as:
.page-slider {
position: absolute;
background-color: #FFFFFF;
display: block;
width: 100%;
-webkit-box-shadow: 0 -7px 7px -7px #333333;
-moz-box-shadow: 0 -7px 7px -7px #333333;
box-shadow: 0 -7px 7px -7px #333333;
animation: uncover 3s ease 0s 1 ;
-webkit-animation: uncover 3s ease 0s 1 ;
-moz-animation: uncover 3s ease 0s 1 ;
}
I have defined my animation as:
#keyframes uncover {
from {
top: 43px;
height: 1000px;
}
to {
top: auto;
height: 0;
}
}
#-webkit-keyframes uncover {
from {
top: 43px;
height: 1000px;
}
to {
top: auto;
height: 0;
}
}
The div is basically empty and thus the height is set to 1000px so that it blocks the contents behind it as it progresses towards the bottom.
Now, the issue is that with the above markup, the animation behaves weirdly. It starts at 43px as expected but then instead of moving down, it moves up (with the height of the div reducing with each second) and then the div comes to rest at its natural position.
If I change the top in the from section of the keyframe to 100% from auto, then it does the trick, but the div crosses its natural position all the way to the bottom of the viewport and then after 3 seconds comes back to its natural position.
How do I animate the div such that it starts at 43px from the top and then comes to rest at its natural position (top: auto)?
I think you can stop the animation at end by using : fill-mode.
it seems to be the same issu :
Can't stop animation at end of one cycle
best regards.
Try to use max-height instead height, may be max-height bigger than your box can help you.
Assuming an element is at 100% saturation, opacity, etc... how can I have its background become slightly lighter when it is hovered?
The use case is that I'm allowing a user to hover over any element on a page. I don't want to go around determining each colors equivalent at 80% opacity.
One method is to change the opacity: 0.4 but I only want the background to change.
It's a long time ago but you can do something like this:
.element {
background-color: red;
}
.element:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}
You can change the 100px into a number you want. I took a large one to cover the whole element.
It isn't a very beautiful solution but it works!
Here an example: http://jsfiddle.net/6nkh3u7k/5/
Here's an easy way to do it:
.myElement:hover {
filter: brightness(150%);
}
I'm using box-shadow property to control the brightness of the background color, by placing a translucent overlay
Example:
.btn {
background-color: #0077dd;
display: inline-flex;
align-content: center;
padding: 1em 2em;
border-radius: 5px;
color: white;
font-size: 18px;
margin: 0.5em;
cursor: pointer;
}
.btn.brighten:hover {
box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.3);
}
.btn.darken:hover {
box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.3);
}
<span class="btn brighten">Brighten on Hover</span>
<span class="btn darken">Darken on Hover</span>
you should use the RGBa method (background-color:rgba(R,G,B,alpha);) to do this:
.element{
background-color:rgba(0,0,0,1); /*where 1 stands for 100% opacity*/
}
.element:hover{
background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}
FIDDLE
AND if you strongly need to make it work in IE8 or lower too here is how it comes:
.element:hover{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6 & 7 */
zoom: 1;
}
note that the startColorstr and endColorstr values are built like this #AARRGGBB (where AA is the Alpha channel) and must be the same if you don't want a gradient effect from a color to another.
I would use a :after pseudo-element instead of a conventional background. It's supported in IE8, where rgba() isn't.
HTML:
<div class="hoverme">
<p>Lorem ipsem gimme a dollar!</p>
</div>
CSS:
.hoverme {
position: relative;
}
.hoverme:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #fff;
z-index: -1;
}
.hoverme:hover:after {
background-color: #ddd;
}
or something like that.
http://caniuse.com/#search=%3Aafter
For a smoother result, add a CSS3 transition:
.hoverme:after {
-webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
-o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */
transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
The previous snippet was copied and pasted from http://css3please.com
http://jsfiddle.net/ghodmode/6sE9E/
You can do this with only CSS using filter: brightness(); but it is only currently supported in WebKit browsers. See http://jsfiddle.net/jSyK7/
You want to change the background-color lightness of any element that is hovered without using opacity. Unfortunately. I don't think this is possible without setting specific background-color values for your hovers.
The use case is that I'm allowing a user to hover over any element on
a page. I don't want to go around determining each colors equivalent
at 80% opacity.
There is one alternative that I can think of but it would require a translucent PNG overlay on the entire element, which will also cover any of the element's contents. Thereby not solving your problem.
Related Question: Dynamically change color to lighter or darker by percentage CSS (Javascript)
So i have my image on my webpage. In my css code, i have a transition for a :hover (glow appears), which works fine, and i want to add a stroke on :active. Here's my code :
#bb
{
top: 55%;
left: 6%;
opacity: 0.85;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#bb:hover
{
opacity: 1;
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
}
#bb:active
{
opacity: 1;
border: 10px solid rgba(87,87,87,0.8);
}
my problems are the following : how do i get the stroke to appear around the image without moving it, and how do i get it to stay "active" without having to hold the click on the image?
You can use CSS box-sizing:border-box;. Write like this:
#bb:active
{
opacity: 1;
border: 10px solid rgba(87,87,87,0.8);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Check this http://jsfiddle.net/4g6d9/
A border occupies space, so adding a border normally displaces an element. If you use the outline property instead of border, no displacement takes place—but the outline will appear on top of anything that would otherwise appear in the same place, i.e. may cover other content.
The meaning of :active has various interpretations in different browsers. To make specific things happen (as cross-browser as possible) on keyboard or mouse events, you need to use JavaScript.