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.
Related
I'm currently editing a subreddit on reddit.com and my methods are restricted on CSS only.
I managed to get a overlay effect when you hover over the menu on the left side. It's fading in, but I don't know how to fade it out. Since transition wasn't working I tried another method with an animation.
TL;DR: Overlay fade in: yes - fade out: no :(
Here are some parts of the code I used:
#sr-header-area .drop-choices:hover:before {
content: "";
font-size: 13px;
display: block;
position: fixed !important;
height: 100%;
width: 100%;
margin-left: 300px;
pointer-events: none;
z-index: 700 !important;
animation: fade 0.5s ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;}
#keyframes fade {
0% {background-color: rgba(0, 0, 0, 0);}
100% {background-color: rgba(0, 0, 0, 0.4);}}
Maybe someone can help me out here.
You should be able to achieve this effect with transitions and that would be the way I'd personally recommend. Heres a quick implementation: https://jsfiddle.net/z1c8bvcd/1/
The main thing to remember is that you need to define the CSS properties that the div will return to once the hover state is no longer in effect, not just what they look like when hovered otherwise the :before pseudo element will be removed from the DOM.
#foo:before {
content: "";
background: rgba(255, 255, 255, 0);
transition: background 0.5s, margin-left 0.5s;
width: 100%;
height: 100%;
position: fixed!important;
margin-left: 50px;
}
#foo:hover:before {
background: rgba(0, 0, 0, 0.3);
margin-left: 300px;
}
I think you can also achieve a similar effect using keyframes, but I think the animation would run once when the page loads and then whenever the div is hovered.
Check out the Shopify login page and note the checkbox (it's green). I've been inspecting away but can't figure out how they're doing this. I did figure out the real checkbox is hidden behind this one (via float: left). But this thing is not an image. No idea how they pulled that off. Any CSS geniuses care to take a look?
As i understand it , they reduce the width and height of the real checkbox and used label:before pseudo element instead:
here is the code they used to create their custom checkbox :
.marketing-checkbox-label:before, .marketing-radio-label:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
background-color: white;
border-radius: 4px;
border: 1px solid #e5e5e5;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
-webkit-transition: border-color 150ms ease;
-moz-transition: border-color 150ms ease;
transition: border-color 150ms ease;
}
How do I have the properties of a declaration apply to an element after the CSS3 transitions end? I have something like:
.something {
background: blue;
padding: 10px 0px;
background-clip: content-box;
transition: box-shadow 300ms;
}
.something:hover {
box-shadow: 0px 0px 3px blue;
padding: 0px;
margin: 10px 0px;
}
I'd like the padding and margin properties in the :hover declaration to be applied after the transition is done in 300ms.
you can add a delay like this:
transition: box-shadow 300ms, padding 300ms 400ms;
The box-shadow transition will start on hover and last 300ms, and the padding will start after 400ms and again last 300ms.
.something {
background: blue;
color: white;
padding: 0px;
background-clip: context-box;
transition: box-shadow 300ms, padding 300ms 400ms;
}
.something:hover {
box-shadow: 0px 0px 3px blue;
padding: 10px;
margin: 10px 0px;
}
<div class='something'>Something</div>
Article on CSS-Tricks
You can achieve this by placing another element inside or outside .something and applying padding and margin transitions to the new element, but with transition-delay value set to the time equal or greater than time of your initial box-shadow transition.
So, for instance:
<div class="immediate">
<div class="later">
I can haz transitions.
</div>
</div>
And CSS:
.immediate {
background: #eeb;
transition: box-shadow 300ms;
}
.immediate:hover {
box-shadow: 0 0 3px black;
}
.later {
margin: 0;
padding: 10px 0;
transition: all 400ms;
transition-delay: 300ms;
}
.later:hover {
margin: 10px 0;
padding: 0;
}
This will perform the box-shadow transition in 300ms, and afterwards margin and padding in 400ms (you can set this transition time to 0 if that's the effect you're looking for).
You can try it on jsFiddle: http://jsfiddle.net/gTVVk/2/
EDIT: Duncan Beattie's answer will do just fine, unless you need to perform different transitions on the same property. Otherwise there's no point to overcomplicate things with nested divs.
When using #Duncan Beattie´s solution one property will override the other.
This should work:
transition: box-shadow 300ms linear, padding 300ms linear 400ms;
Syntax:
transition: [property] [duration] [timing-function] [delay], ... more property-transitions
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)
I'm trying to create a transition from a white background to an image background. This way when the viewer hovers over a section it goes from plain to styled.
Here's my current code:
div.camp {
background: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 8px;
padding: 8px;
transition: all 1s linear 0s;
}
div.camp:hover {
background: #EFFFD5 url("http://www.alpinejosh.com/host/sp/images/camp.png");
background-position: center bottom;
background-repeat: repeat-x;
border: 1px solid #CECECE;
}
Here's the page this code is on: http://www.summitpost.org/eldorado-peak/150316#chapter_7
From what I understand it's easy to have background colors transition. But it seems as though background images are not supported for transition.
Unfortunately you cannot use transition on background images in the way you've specified. You can see the W3C list of animation property types here.
You could potentially lay your white background over the top, then animate its opacity on hover (to show the image beneath).
Code Sample
You could obviously make this prettier. I've just cobbled something together to give you an idea.
div.camp {
border: 1px solid #CCCCCC;
background: #EFFFD5 url("http://www.alpinejosh.com/host/sp/images/camp.png");
background-position: center bottom;
background-repeat: repeat-x;
border-radius: 8px;
position: relative;
}
div.camp-overlay {
padding: 8px;
border-radius: 8px;
position: absolute;
z-index:50;
width: 100%;
height: 100%;
background:white;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
div.camp-overlay:hover {
background: rgba(255,255,255,0); /* use opacity for older browsers*/
}
HTML for the above CSS
<div class="camp">
<div class="camp-overlay"></div>
</div>
JSFiddle of the above
http://jsfiddle.net/p7mcy/
What you could do is make two div elements, one on top of the other, and fade top div out on hover.
<div class="wrapper">
<div class="image"></div>
<div class="white-bg"></div>
</div>
.wrapper{position:relative;}
.image, .white-bg{position:absolute; top:0; left:0; width:100px; height:50px;}
.image{background:red;}
.white-bg{background:white; z-index:9999; -webkit-transition:opacity 0.3s linear; opacity:1;}
.white-bg:hover{opacity:0;}
Should work
fiddle: http://jsfiddle.net/b46z8/5/