I am using 'translate3d' with 'transition' on hover to move a div into view.
This is working correctly upon hover, but on exit, I would like it to transition back to out of view. Currently, it just disappears.
Everything I have tried isn't working, so I was hoping someone may be able to point out the glaring mistake I am making?
See my pen:
https://codepen.io/anon/pen/KeMxoB
And here is the CSS:
a.box-item {
position: relative;
display: block;
overflow: hidden;
}
a.box-item img {
opacity: 1;
transition: opacity 0.35s;
}
a.box-item .text {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
margin: 0;
opacity: 0;
transition: transform 0.35s;
transform: translate3d(0,100%,0);
}
a.box-item .text h2 {
color: #FFF;
font-weight: 100;
opacity: 0;
transition: opacity 0.35s;
transition-delay: 0.05s;
}
a.box-item:hover {
background: #000;
}
a.box-item:hover img {
opacity: 0.8;
}
a.box-item:hover .text {
opacity: 1;
transform: translate3d(0,0,0);
}
a.box-item:hover .text h2 {
opacity: 1;
}
Use "transition: all 0.35s;" instead of "transition: transform 0.35s;" on
a.box-item .text {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
margin: 0;
opacity: 0;
transition: all 0.35s;
transform: translate3d(0,100%,0);
}
this will help you.
Use transition: transform 2s, opacity 1s 1s; on .text element
transition: transform 2s, opacity 1s 1s;
a.box-item .text {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
margin: 0;
opacity: 0;
transition: transform 2s, opacity 1s 1s;
transform: translate3d(0,100%,0);
}
Use "transition: all 0.35s;" instead of "transition: transform 0.35s;". it will work.
a.box-item .text {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
margin: 0;
opacity: 0;
transition: all 0.35s;
transform: translate3d(0,100%,0);
}
Related
Hi I was wondering if I could get any advice on how to do a animation such as this in react native: https://codepen.io/gayane-gasparyan/pen/jOmaBQK
It uses a mixture of keyframes, linear gradients but is a CSS based animation.
I have react-native-reanimated and native-base and can also leverage these modules if necessary.
Main CSS code:
.card {
background: #191c29;
width: var(--card-width);
height: var(--card-height);
padding: 3px;
position: relative;
border-radius: 6px;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
font-size: 1.5em;
color: rgb(88 199 250 / 0%);
cursor: pointer;
font-family: cursive;
}
.card:hover {
color: rgb(88 199 250 / 100%);
transition: color 1s;
}
.card:hover:before, .card:hover:after {
animation: none;
opacity: 0;
}
.card::before {
content: "";
width: 104%;
height: 102%;
border-radius: 8px;
background-image: linear-gradient(
var(--rotate)
, #5ddcff, #3c67e3 43%, #4e00c2);
position: absolute;
z-index: -1;
top: -1%;
left: -2%;
animation: spin 2.5s linear infinite;
}
.card::after {
position: absolute;
content: "";
top: calc(var(--card-height) / 6);
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
margin: 0 auto;
transform: scale(0.8);
filter: blur(calc(var(--card-height) / 6));
background-image: linear-gradient(
var(--rotate)
, #5ddcff, #3c67e3 43%, #4e00c2);
opacity: 1;
transition: opacity .5s;
animation: spin 2.5s linear infinite;
}
#keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
a {
color: #212534;
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
margin-top: 2rem;
}
Can you please assist I need to set footer in the below image behind my scrollbar to show all the contents in the scrollbar.
Image:: enter image description here
I edited below css to remove the z-index and the footer is now behind the scrollbar records but now am facing an issue with the menu button all the menu pages are inactive as per the image below.
Image 2: enter image description here
CSS code::
.page-footer {
position: fixed;
z-index: 10; // I removed this
bottom: 0;
height: $footer-height;
min-width: 100vw;
.page-footer__background {
clip-path: polygon(0 64%, 100% 0, 100% 100%, 0% 100%);
background-image: url('../resources/images/picture-2.jpg');
background-size: cover;
background-position: center;
position: absolute;
width: 100%;
height: 100%;
}
.page-footer_background-svg {
width: 100%;
height: 100%;
fill: white;
}
.floating-action-button {
width: 57px;
height: 57px;
position: absolute;
top: -22px;
right: 20px;
border-radius: 100%;
border: 5px solid white;
background: white;
box-shadow: 4px 1px 10px rgba(0, 0, 0, 0.2);
.floating-action-button-inner {
width: $floating-action-button-size;
height: $floating-action-button-size;
background: white;
position: absolute;
border-radius: 100%;
top: -1px;
left: -1px;
cursor: pointer;
border: 1px solid $color-daimler-petrol-d2;
text-align: center;
}
.floating-action-button-sub-buttons {
margin: 0;
padding: 0;
position: absolute;
left: ($floating-action-button-size - $floating-action-sub-button-size) * 0.5;
top: -5px;
}
.floating-action-button-sub-buttons.fab-hidden {
height: 0;
overflow: hidden;
}
.floating-action-button-sub-button {
background: white;
width: $floating-action-sub-button-size;
height: $floating-action-sub-button-size;
border-radius: 100%;
margin: 0 0 $floating-action-sub-button-margin 0;
padding: 0;
list-style: none;
position: absolute;
text-align: center;
line-height: $floating-action-sub-button-size;
color: $color-daimler-petrol-d2;
cursor: pointer;
opacity: 0;
transform: translate3d(0, 30px, 0);
//z-index: 500 !important;
span:nth-child(1) {
transition: ease opacity 0.3s 0.1s;
opacity: 0;
position: absolute;
text-align: right;
right: $floating-action-sub-button-size;
width: 200px;
padding-right: 10px;
color: #FFFFFF;
}
span:nth-child(2) .icon {
font-size: 18px;
}
}
.floating-action-button-sub-buttons.fab-visible .floating-action-button-sub-button {
opacity: 1;
transform: translate3d(0, 0, 0);
span:nth-child(1) {
opacity: 1;
transition: ease opacity 0.3s 0.6s;
}
}
}
#for $i from 1 through 10 {
.floating-action-button-sub-button:nth-child(#{$i}) {
transition: all ease-out 0.4s #{0.1 * $i}s;
top: #{(strip-unit($floating-action-sub-button-size) + strip-unit($floating-action-sub-button-margin)) * $i * -1}px;
}
.floating-action-button-sub-buttons.fab-hidden .floating-action-button-sub-button:nth-last-child(#{$i}) {
transition: all ease-out 0.1s #{0.03 * $i}s;
}
}
.floating-action-button-burger {
position: relative;
transform: rotate(0deg);
transition: 0.2s ease-in-out;
cursor: pointer;
top: 18px;
left: 14px;
span {
display: block;
position: absolute;
height: 1px;
width: $floating-action-button-burger-width;
background: $color-daimler-petrol-d2;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: ease transform 0.2s, ease opacity 0.3s 0.2s, ease top 0.3s 0.2s;
}
}
.floating-action-button-inner {
span:nth-child(1) {
top: 0;
}
span:nth-child(2), span:nth-child(3) {
top: $floating-action-button-burger-margin;
}
span:nth-child(4) {
top: $floating-action-button-burger-margin * 2;
}
}
.floating-action-btn-active .floating-action-button-inner {
span {
transition: ease transform 0.2s 0.3s, ease opacity 0.3s, ease top 0.3s;
}
span:nth-child(1) {
top: $floating-action-button-burger-margin;
opacity: 0;
}
span:nth-child(2) {
transform: rotate(45deg);
}
span:nth-child(3) {
transform: rotate(-45deg);
}
span:nth-child(4) {
top: $floating-action-button-burger-margin;
opacity: 0;
}
}
.floating-action-button-pill {
position: absolute;
left: -29px;
top: 42px;
padding: 2px;
border: 1px solid $brand-primary;
background: white;
border-radius: 100%;
}
.floating-action-button-pill-inner {
padding: 5px 7px;
background: $brand-primary;
border-radius: 100%;
text-align: center;
line-height: 20px;
min-width: 30px;
min-height: 30px;
}
I have a problem with my image which is inside a div.
This div with swiper__content class gives kind of bottom padding to the image and I can't see what cause this effect. I have a 100% height with no padding or margin so it might fit in the div
.no-padding{
padding: 0px 0px !important;
}
.swiper {
margin: 0 auto 50px;
width: 40%;
text-align: center;
padding: 10px 20px;
font-size: 10vw;
line-height: 1;
position: relative;
overflow: hidden;
text-transform: uppercase;
font-family: "Impact";
cursor: pointer;
}
.swiper__content {
color: transparent;
display: block;
}
.swiper .swiper__content img{
opacity: 0;
width: 100%;
height: 100%;
transition: opacity 0s ease-in 0.5s;
-moz-transition: opacity 0s ease-in 0.5s;
-webkit-transition: opacity 0s ease-in 0.5s;
-o-transition: opacity 0s ease-in 0.5s;
}
.swiper__bar, .swiper__bar--right {
width: 100%;
height: 100%;
background: orange;
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 1s ease-in-out;
}
.swiper__bar--right {
transform: translateX(100%);
}
.swiper.revealed .swiper__content {
animation-name: kf-font-reveal;
animation-duration: 1s;
color: orange;
}
.swiper.revealed .swiper__content img{
opacity: 1;
}
<div class="swiper no-padding revealed">
<div class="swiper__content">
<img src="http://lorempicsum.com/futurama/350/200/1">
</div>
<span class="swiper__bar--right"></span>
</div>
Is there a way to remove that ?
Set line-height: 0 for your swiper class.
.no-padding{
padding: 0px 0px !important;
}
.swiper {
margin: 0 auto 50px;
width: 40%;
text-align: center;
padding: 10px 20px;
font-size: 10vw;
line-height: 0;
position: relative;
overflow: hidden;
text-transform: uppercase;
font-family: "Impact";
cursor: pointer;
}
.swiper__content {
color: transparent;
display: block;
}
.swiper .swiper__content img{
opacity: 0;
width: 100%;
height: 100%;
transition: opacity 0s ease-in 0.5s;
-moz-transition: opacity 0s ease-in 0.5s;
-webkit-transition: opacity 0s ease-in 0.5s;
-o-transition: opacity 0s ease-in 0.5s;
}
.swiper__bar, .swiper__bar--right {
width: 100%;
height: 100%;
background: orange;
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 1s ease-in-out;
}
.swiper__bar--right {
transform: translateX(100%);
}
.swiper.revealed .swiper__content {
animation-name: kf-font-reveal;
animation-duration: 1s;
color: orange;
}
.swiper.revealed .swiper__content img{
opacity: 1;
}
<div class="swiper no-padding revealed">
<div class="swiper__content">
<img src="http://lorempicsum.com/futurama/350/200/1">
</div>
<span class="swiper__bar--right"></span>
</div>
Hi I'm working on simple hover with only css. I'm curious if it's possible to apply one hover to multiple html elements. Here is my example:
.work-cart{
z-index: 4;
position: absolute;
width: 250px;
height: 300px;
left: 200px;
opacity: 0;
background: #fff;
padding-right: 45px;
padding-left: 45px;
padding-bottom: 30px;
padding-top: 150px;
text-align: right;
bottom: 0;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all: 0.8s ease;
transitions: all 0.8s ease;
}
.f:hover > .work-cart{
left: 220px;
opacity: 1;
}
.g:hover > .work-cart{
left: 220px;
opacity: 1;
}
.h:hover > .work-cart{
left: 220px;
opacity: 1;
}
Is there any option to asign the hover for .f .g and .h at once ?
You can try
.f:hover > .work-cart, .g:hover > .work-cart, .h:hover > .work-cart{
left: 220px;
opacity: 1;
}
I was wondering how can I get this menu here http://toall.org to fade out the background images, so basically switch on roll over from Transparent Icon to Transparent Text? Please no jQuery. Is this possible in plane CSS3?
Is it possible to set a active link to the icon, but 50% opacity?
Could anyone help me on this? Thanks!
CSS
.home {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 170px;
height: 112px;
background: url(../images/qui_menu.png) no-repeat;
background-position: 0px 0px;
}
.home span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(../images/qui_menu.png) no-repeat;
background-position: 0px -112px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.home:hover span {
opacity: 1;
}
.services {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 170px;
height: 112px;
background: url(../images/qui_menu.png) no-repeat;
background-position: -170px 0px;
}
.services span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(../images/qui_menu.png) no-repeat;
background-position: -170px -112px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.services:hover span {
opacity: 1;
}
.portfolio {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 170px;
height: 112px;
background: url(../images/qui_menu.png) no-repeat;
background-position: -340px 0px;
}
.portfolio span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(../images/qui_menu.png) no-repeat;
background-position: -340px -112px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.portfolio:hover span {
opacity: 1;
}
.contacts {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 170px;
height: 112px;
background: url(../images/qui_menu.png) no-repeat;
background-position: -510px 0px;
}
.contacts span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(../images/qui_menu.png) no-repeat;
background-position: -510px -112px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.contacts:hover span {
opacity: 1;
}