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;
}
Related
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;
}
The task is to make a hover effect on some list element. When mouse-over - gradient fills list element with some color from top to bottom; but when mouse-leave - gradient should continue its moving from top to bottom. With simple hover effect it always moves backways.
I use Vue and Nuxt, I want to make it on pure CSS but it seems to me its not possible. How to do it?
https://codepen.io/nosdmitry/pen/zYZgNQp
.test {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
.test::before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: blue;
transform: translateY(-100%);
transition: transform .3s ease;
}
.test:hover::before {
-webkit-transition: border-radius 2s;
cursor: pointer;
transform: translateY(0);
transition: transform .3s ease;
}
My code with gradient:
.test {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
.test::before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: blue;
transition: all .3s ease;
background: linear-gradient(to bottom, blue 50%, transparent 50%);
background-size: 100% 200%;
background-position: bottom;
}
.test:hover::before {
background-position: top;
}
Do it like below:
.box {
width:200px;
height:200px;
border:1px solid;
background: linear-gradient(blue 0 0) top/100% 0 no-repeat;
transition:0.5s, background-position 0s 0.5s;
}
.box:hover {
background-size:100% 100%;
background-position:bottom;
}
<div class="box">
</div>
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);
}
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>
I would like both to behave like webkit, but for some reason in webkit works as I expected but -moz- does the animation when mouseout the .porftolio item,
Any idea why?
CSS:
.portfolio-item {
float: left;
width: 300px;
height: 300px;
margin: 0.5%;
position: relative;
text-align: center;
background: orange;
overflow: hidden;
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
transition: 0.4s all ease;
}
.portfolio-item a:hover:after {
content: " ";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.4), transparent 100%);
}
.portfolio-item h4, .portfolio-item img {
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
transition: 0.4s all ease;
}
.portfolio-item img {
width: 100%;
hegight: 100%;
position: absolute;
top: 0;
left: 0;
}
.portfolio-item:before {
content: '';
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
height: 100%;
vertical-align: middle;
}
.portfolio-item h4 {
opacity: 0;
color: white;
font-size: 30px;
vertical-align: middle;
/*#include transform(scale(.5));*/
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
/* sino en safari no va */
width: 200px;
font-weight: bold;
text-transform: uppercase;
-webkit-transform: translateX(-2px);
-moz-transform: translateX(-2px);
-ms-transform: translateX(-2px);
transform: translateX(-2px);
}
.portfolio-item:hover {
z-index: 9;
}
.portfolio-item:hover img {
opacity: 0;
-webkit-transform: scale(1.07);
-moz-transform: scale(1.07);
-ms-transform: scale(1.07);
transform: scale(1.07);
}
.portfolio-item:hover h4 {
-webkit-transform: translateX(3px);
-moz-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
/*-webkit-animation-duration: 0.4s;
-webkit-transform-origin:50% 50%;
-webkit-animation-timing-function: linear;
-moz-animation-duration: 0.4s;
-moz-transform-origin:50% 50%;
-moz-animation-timing-function: linear;
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;*/
opacity: 1;
}
HTML:
<ul><li class="portfolio-item" style="background-color: #6220E5;">
<a href="#">
<img src="http://dummyimage.com/300x300/dddddd/cccccc" alt="camper" />
<h4>Text goes here</h4>
</a>
</li></ul>
Test:
http://jsfiddle.net/kuX39/
-EDIT-
Funny thing is that I noticed that if instead of applying it to :hover i apply it to .hover and toggle the class then the animations works the same... :S
The problem comes from this rule:
.portfolio-item a:hover:after {
content: " ";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.4), transparent 100%);
}
where you define all the after pseudoelement only in the hover state. If the a element is not hovered, the pseudo element is undefined, and can take whatever value the browser decides.
If you set the same on the un-hovered element, it works fine.
.portfolio-item a:after {
content: " ";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.4), transparent 100%);
}
updated demo
By the way, my firefox version is using transition and not moz-transition