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;
}
Related
I really want to use this +/- toggle button I found on a codepen https://codepen.io/Inlesco/pen/XXRRmY/
Only issue is that the CSS processor it uses is SCSS, and when I change it there to CSS it stops working
The website I'm coding is in CSS and when I paste the CSS from that codepen in my VS Code editor lights up with errors. Is there any way for me to use this with my normal CSS?
.closed {
.vertical {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
}
.horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
opacity: 1;
}
}
.opened {
opacity: 1;
.vertical {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
}
.horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
opacity: 0;
}
}
.circle-plus {
height: 4em;
width: 4em;
font-size: 1em;
opacity: .7;
}
.circle-plus .circle {
position: relative;
width: 2.55em;
height: 2.5em;
border-radius: 100%;
border: solid .5em #DFDAD7;
}
.circle-plus .circle .horizontal {
position: absolute;
background-color: red;
width: 30px;
height: 5px;
left: 50%;
margin-left: -15px;
top: 50%;
margin-top: -2.5px;
}
.circle-plus .circle .vertical {
position: absolute;
background-color: red;
width: 5px;
height: 30px;
left: 50%;
margin-left: -2.5px;
top: 50%;
margin-top: -15px;
}
Thanks!
You can manually convert sass into css, or use an online compiler like I did
Result
.closed .vertical {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
}
.closed .horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
opacity: 1;
}
.opened {
opacity: 1;
}
.opened .vertical {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
}
.opened .horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
opacity: 0;
}
.circle-plus {
height: 4em;
width: 4em;
font-size: 1em;
opacity: 0.7;
}
.circle-plus .circle {
position: relative;
width: 2.55em;
height: 2.5em;
border-radius: 100%;
border: solid 0.5em #DFDAD7;
}
.circle-plus .circle .horizontal {
position: absolute;
background-color: red;
width: 30px;
height: 5px;
left: 50%;
margin-left: -15px;
top: 50%;
margin-top: -2.5px;
}
.circle-plus .circle .vertical {
position: absolute;
background-color: red;
width: 5px;
height: 30px;
left: 50%;
margin-left: -2.5px;
top: 50%;
margin-top: -15px;
}
You can also setup a preprocessor that compiles scss to css using bundlers, but that's only if your website gets bigger and you feel the need to organize your styles.
Like in the answer from Min Lee, you can simply convert SCSS to CSS. However, it's worth understanding the difference because it's not very significant and simple to do yourself.
All you need to do is remove the nested rules that aren't supported by CSS.
Change this SCSS:
.closed {
.vertical {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
}
.horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
opacity: 1;
}
}
.opened {
opacity: 1;
.vertical {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
}
.horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
opacity: 0;
}
}
To this CSS:
.closed .vertical {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
}
.closed .horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
opacity: 1;
}
.opened {
opacity: 1;
}
.opened .vertical {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
}
.opened .horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
opacity: 0;
}
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'm working on an app that seems to be using CSS overlays. I have a basic understanding of CSS but not an expert.
In the style.css I see two classes:
.modal-wrapper {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 15000;
opacity: 1;
visibility: visible;
transition: All 0.2s ease-in-out;
-webkit-transition: All 0.2s ease-in-out;
-moz-transition: All 0.2s ease-in-out;
-o-transition: All 0.2s ease-in-out; }
.modal-wrapper.hide {
opacity: 0;
visibility: hidden; }
I'm using this in a React app and I need help with closing the overlay.
I simply render a component and set its isShown property to true and I'm able to open up the overlay.
However, I'm not sure about how to close it. Even if I set the isShown value to false in my redux store, the overlay still sits there.
I'd appreciate some help with closing the overlay. Thanks.
hope it helps!
.modal-wrapper.hide {
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
}
I suggest setting your z-index to -1 or something lower, as the overlay will sit-on-top of other elements.
.modal-wrapper.hide {
opacity: 0;
visibility: hidden;
z-index: -1;
}
Please try this code
HTML
<div class="modal-wrapper"></div>
<div class="modal-wrapper hide"></div>
CSS
.modal-wrapper {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 15000;
opacity: 1;
visibility: visible;
transition: All 0.2s ease-in-out;
-webkit-transition: All 0.2s ease-in-out;
-moz-transition: All 0.2s ease-in-out;
-o-transition: All 0.2s ease-in-out; }
.modal-wrapper.hide {
opacity: 1;
visibility: visible;
width: 20px;
cursor:pointer;
background-color: transparent;
margin: 10px 20px;
height: 20px;
}
.modal-wrapper.hide:after, .modal-wrapper.hide:before {
content: "";
width: 2px;
height: 20px;
background: #fff;
display: inline-block;
transform: translatex(-1px) rotate(45deg);
}
.modal-wrapper.hide:before{
transform: translatex(0) rotate(-45deg);
}
Jsfiddle
I'm trying to make a two column responsive layout using bootstrap.
In the left column I want to place my content with the width of 100%/2, and in the right, a fixed sidebar with the width of 100%/3.
this is the css I used to my sidebar but in the fiddle I attached the sidebar is in left side and I want it to be in right side.
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Fiddle :
https://jsfiddle.net/une5nhf4/
How can I modify this to correspond to my needs ?
I modified your CSS:
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-right: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
right: 250px;
width: 0;
height: 100%;
margin-right: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-right: 250px;
}
#wrapper.toggled {
padding-right: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
DEMO