How did they make the background color on hover look like that and not look like a box on the "about" and "case study" areas? http://clorova.com/
They used an image:
http://clorova.com/assets/img/general/hover.png
If you just inspect the page you will see the css:
.flare-hover:before {
content: '';
position: absolute;
width: 450px;
height: 450px;
background-image: url(../img/general/hover.png);
background-size: cover;
top: -200px;
left: -100px;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
-ms-transform: scale(0.4);
-o-transform: scale(0.4);
transform: scale(0.4);
}
They use image on ::before
.flare-hover:before {
content: '';
position: absolute;
width: 450px;
height: 450px;
background-image: url(../img/general/hover.png);
background-size: cover;
top: -200px;
left: -100px;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
-ms-transform: scale(0.4);
-o-transform: scale(0.4);
transform: scale(0.4);
}
Related
I have the following CSS:
.popup {
background-color: white;
border-style: solid;
z-index: 1001;
box-shadow: 15px 15px 10px rgba(0,0,0,.3);
border-radius: 3px;
position: absolute;
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
-ms-transition: -ms-transform 1s ease;
transition: transform 1s ease;
}
.centered {
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hidden {
top:100%;
visibility: hidden;
}
.visible {
top: 50%;
}
What I'm trying to do is to perform an animation bottom->top when a popup get's visible and top->bottom when it get's hidden.
Before, I was using transition: all 1s ease; and it was working, but it was laggy so I decided to use transition: transform 1s ease;. Doing this the transition is not working anymore even if I think the code should be fine. Does anyone know why and how to fix it?
Thank you.
EDIT
Here a working CodePen example:
http://codepen.io/andipavllo/pen/QyeJjq
And here is a not working example:
http://codepen.io/andipavllo/pen/KVOrgQ
They are exactly the same, except for transition: transform 1s ease; instead of `transition: all 1s ease;
In the working example you're transitioning all the properties and not only the transform property: this is important because also the top property is involved in the effect, changing from 100% to 50% (when you remove the class hidden and add the class visible).
As you can verify, if you change
transition: transform 1s ease;
into
transition: transform 1s ease, top 1s ease;
the transition works as expected.
Previously when you had transition: all 1s ease, in that translate and top values were getting animated.
But once you changed it to transition: transform 1s ease top property was left out.
.popup {
background-color: white;
border-style: solid;
z-index: 1001;
box-shadow: 15px 15px 10px rgba(0, 0, 0, .3);
border-radius: 3px;
position: absolute;
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
/* edited the line below by adding top also*/
transition: transform 1s ease, top 1s ease;
}
.centered {
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hidden {
top: 100%;
visibility: hidden;
}
.visible {
top: 50%;
}
Check this pen.
CSS: Modify your css to the following
.popup {
...
transition: transform 1s ease, top 1s ease;
}
And also do not use a vendor prefix if it is not necessary.
For transition only -webkit is needed. and for transform -ms and -webkit will do the job.
I have transition in css for dropdown menu, on hover scaleY(0) to scaleY(1). Menu drop down smoothly. My question is how to reverse this effect, when currsor is no longer hovering parent (and child) menu needs to hide self with animatioin, not just disappear. Here is css:
nav ul ul {
visibility: hidden;
width: 116px;
height: 126px;
position: absolute;
top: 63px;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
transition: transform 0.5s ease;
}
ul li:hover > .menu_sub {
visibility: visible;
-webkit-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
Thanks in advance.
just add transition is normal and hovered state it will return on original place
nav ul ul {
visibility: hidden;
width: 116px;
height: 126px;
position: absolute;
top: 63px;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 1s ease;
-ms-transition: -ms-transform 1s ease;
-o-transition: -o-transform 1s ease;
transition: transform 1s ease;
}
ul li:hover > .menu_sub {
visibility: visible;
-webkit-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: -webkit-transform 1s ease;
-ms-transition: -ms-transform 1s ease;
-o-transition: -o-transform 1s ease;
transition: transform 1s ease;
}
The following CSS works fine, however I am trying to add 1 or 2 seconds delay to the flip back effect. When you hover it the '.back' is visible and then when you leave the area the '.front'. I would like to add a delay so that when you leave the area it takes one or two seconds before it goes back to '.front' Is that possible?
.panel {
width: 250px!important;
height: 250px;
margin: auto!important;
position: relative;
-webkit-perspective:1000px;
}
.card {
width: 100%!important;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
}
.back {
background-color:#fff;
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
transition-delay: 2s;
}
.back p{
margin-top: 90px;
font-size: 20px;
text-align:center;
}
.panel:hover .front {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition:-webkit-transform 1s;
transition:transform 1s;
}
.panel:hover .back {
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition:-webkit-transform 1s;
transition:transform 1s;
transition-delay: 2s;
}
HTML
<li class="panel"><img class="front card" src="{{image}}" /><div class="back card"><p>{{model.user.full_name}}</p></div></li>
Add the transition-delay to .card - fiddle
.card {
-o-transition: all .5s 2s;
-ms-transition: all .5s 2s;
-moz-transition: all .5s 2s;
-webkit-transition: all .5s 2s;
transition: all .5s 2s;
}
.panel .front {
transition: all 2s;
}
You have to put the effect on the element in order to have it transition back without hovering on it.
I was playing with image swap hover effect with CSS3 transitions. Unfortunately, it only works in Chrome. I have seen lots of examples from CSS3 transition that works flawless in Chrome, Firefox and Safari, but not this time... :(
Where is the problem?
http://jsfiddle.net/kYZ9Y/
.logo {
float: left;
z-index: 1;
width: 325px;
height: 73px;
background: url(../img/logo.png) no-repeat;
position: absolute;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logo:hover {
z-index: 2;
opacity: 1;
background: url(../img/logo1.png) no-repeat;
}
Cheers!
just change the ease to ease-in-out like this
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
demo: http://jsfiddle.net/kYZ9Y/4/
for more Easing Functions go to http://easings.net/
the markup :
<div class="logo"></div>
the style :
.logo {
float: left;
z-index: 1;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/1.jpg) no-repeat;
position: absolute;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.logo:hover {
z-index: 2;
opacity: 1;
background: url(http://pixellab-design.com/img/2.jpg) no-repeat;
}
Can be done with pseudo elements.
.logo {
background: url(http://via.placeholder.com/300?text=Normal) no-repeat;
width: 300px;
height: 300px;
position: relative;
}
.logo:after {
content: "";
opacity: 0;
display:block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url(http://via.placeholder.com/300?text=Hover) no-repeat;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logo:hover:after {
opacity: 1;
}
https://jsfiddle.net/84bvybjs/
At least for Firefox, as per the documentation, background-image is not animatable.
Instead, try putting both images one on top of each other and animating the opacity property:
.logo {
float: left;
z-index: 1;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/2.jpg) no-repeat;
position: absolute;
}
.logotop {
float: left;
z-index: 2;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/1.jpg) no-repeat;
position: absolute;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logotop:hover {
opacity: 0;
}
HTML:
<div class="logo"></div><div class="logotop"></div>
Fiddle: http://jsfiddle.net/kYZ9Y/2/
Here is the problem with the code bellow. I want to create zoom-like effect with css. I am adding the classes zoomIn or zoomOut with jquery on certain events, which is not important right now.
The problem is that in Chrome and Safari (webkit based) the zoom in and out start from 0. In firefox for instance the transition starts from the current image height and extends to 1160px in this case. The webkit browsers however seem to handle things different and start the transition from 0 to 1160px
I ain't got no clever way to solve this so please help
Cheers
The images have also a class of 'full'
.full {display:block;position:absolute;width:100%;top:0;left:0;}
.zoomIn{
top:0;left:0;
box-sizing: border-box;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
height: 1160px !important;
left: 50%;
margin-left: -960px !important;
margin-top: -670px !important;
top: 50%;
width: 1920px;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-ms-transform: scale(1.2);
}
.zoomOut {
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-moz-transform: scale(1);
margin-left: 0 ;margin-top: 0;
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-ms-transform: scale(1);
}