I have card component using material UI. The card is transforming on hover and there should appear shadow on the card too. But when i put the box-shadow shadow appears on the box before transforming, and there is white space between the transformed card and the shadow. How can i fix this?
const CardStyle = styled(Card)`
background: red;
transition: transform 50ms;
&:hover {
transform: scale(1.02) perspective(0px);
box-shadow: ${({ theme }) => theme.shadows[4]};
}
`;
The same output in other way:
:hover {
transform: scale(1.02) perspective(0px);
box-shadow: 4px 4px 4px rgba(60, 60, 93, 0.33)
}
Include a transition for your box-shadow if I'm understanding your intent right.
div {
height: 5rem;
width: 5rem;
margin: 3rem auto;
border: green 5px dashed;
background: red;
transition: transform .5s, box-shadow 1s;
}
div:hover {
transform: scale(1.02) perspective(0px);
box-shadow: 0 10px 10px rgba(255,0,0,.7);
}
<div></div>
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 am designing a custom animated button and needed to use a combination of simple CSS-3 transitions and psedo elements .
now i am aware of the fact that pseudo elements are affected by declarations to the element to which they are attached . but i have a contextual question with a difficulty i am having.
background :
now i have a custome animation that turn an elements opacity to 0 , however i would like it if the psedo element and its properties can be preserved visually without thier opacity being changed to 0 .
here's a fiddle : fiddle
see how along with the span element being turned to opacity:0 the psedo element too gets its opcaty turned to 0.
BTW , the custome animation is as follows :
#-moz-keyframes hidden {
0%{
opacity: 0;
}
100%{
opacity: 0;
transform: translateX(100px);
}
}
and the code that fires the custom animation is as follows :
.btn:hover span{
animation-name:hidden;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
I know if i choose to go without the psedo element there would be a solution , but i'd really like to keep the psedo element in the code .
Thanks .
Alexander.
You can do this by transitioning rgba(Red, Greeb, Blue, Alpha) instead of the opacity.
* {
box-sizing: border-box;
transition: .3s;
}
.btn {
outline: 0;
/*padding: 20px 0;*/
border: 1px solid green;
margin: 0 auto;
text-align: center;
}
.btn span {
width: 100%;
height: 100%;
position: relative;
left: 0;
background: rgba(0, 255, 0, 1);
color: rgba(101, 141, 102, 1);
transition: all 0.5s;
}
.btn:hover span {
left: -100%;
background: rgba(0, 255, 0, 0);
color: rgba(101, 141, 102, 0);
}
.btn span:after {
background: red;
content: 'new content';
position: absolute;
left: 100%;
width: 100%;
height: 100%;
text-align: center;
}
.btn:hover span:after {
color: rgba(101, 141, 102, 1);
margin-left: 6px;
}
<button class="btn">
<span>Hey press me</span>
</button>
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
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/
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.