I am working on giving style to my menu, I really am something new in this
What I try to do is that when my menu appears it will see a transition from left to right, when it is hidden from it will be hidden from the left
I am really learning how to work with style sheets, I search the web and I have not managed to make it work as I wish
#media (max-width: 828px) {
#menu-header.show {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
#menu-header {
display: block ;
position: fixed;
z-index: 1;
background-color: #FFF;
left: 0;
top: 100px;
height: -webkit-calc(100% - 50px);
height: -moz-calc(100% - 50px);
height: calc(100% - 50px);
width: 90%;
padding: 20px 20px;
max-width: 87.5%;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 350ms ease;
-moz-transition: all 350ms ease;
-ms-transition: all 350ms ease;
-o-transition: all 350ms ease;
transition: all 350ms ease;
}
Some example where you can help me to solve my problem, since my menu currently makes a transition from top to bottom, and what I am looking for is from left to right
var header = document.getElementById('menu-header');
var button = document.getElementById('button');
button.addEventListener('click', function(){
header.classList.toggle('show');
});
#media (max-width: 828px) {
#menu-header {
display: block;
position: fixed;
z-index: 1;
background-color: #FFF;
left: 0;
top: 0;
height: 100%;
width: 40%;
padding: 20px 20px;
transform: translateX(-100%);
transition: transform 350ms ease;
background: #c33;
}
#menu-header.show {
transform: translateX(0);
}
}
#button {
position: fixed;
right: 0;
top: 0;
}
<div id="menu-header">
MENU
</div>
<button id="button">
Click me
</button>
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 wanted to create a div which has a background image and a transparent background color over it with some text. When hover, the transparent background color should slide out towards the bottom of the div as shown in the image:
https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
Left block is default. Right block is hover state.
I modified this snippet: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I modified the provided style to:
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container .overlay {
opacity: 0.75;
}
.container:hover .overlay {
opacity: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
Edited:
My Problem
I tried to achieve a simple slideout animation on my as shown in the image I provided. See this: https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
I have tried something like this - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I edited the css they provided to the css I provided above.
Please see the image I provided. I wanted to achieve that.
Try this.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
transition: .5s ease;
height: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<img src="https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Hope this code may help you.
Hi hope this is what you are looking for
Try this fiddle
.container:hover .overlay {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
opacity: 1 !important;
}
hope this is what you are looking
.box {
width: 200px; height: 100px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;}
http://jsfiddle.net/jxgrtmvy
I'm creating a hamburger menu but I have some problems with an animation.
I created 2 divs, 1 for the 3 basic horizontal lines, and one for the " X ". I know how to hide and show them with jQuery ( like, one you click on the 3 lines, the 3 lines hides, and the " X " shows ) but I want to create an animation on that " X " like it's drawn both " \ " and " / " simultaneously. Like it stars from the top corner and it ends and the bottom. I don't really know how to explain this and my english is bad. here's what I did so far
<div class="x">
<div></div>
<div></div>
</div>
and the CSS
.x {
position: fixed;
top:47%;
left: 5%; }
.x div {
width: 40px;
height: 2px;
background-color: #000000; }
.x div:nth-child(1) {
transform: rotate(45deg); }
.x div:nth-child(2) {
transform: rotate(-45deg); }
I tried to create an animation on each line which starts from witdh:0 ( 0% ) and witdh:40px ( 100% ) but because I used the transform property it doesn't animate the way I want, it changes the positions and stuff.
Ty and I'm really sorry, but I don't know how to explain this.
I think you're looking for something like this:
document.addEventListener('DOMContentLoaded', function(){
var menus = document.querySelectorAll('.menu');
var onClick = function(){
this.classList.toggle('open');
}
menus.forEach(function(menu, index){
menu.addEventListener('click', onClick);
});
});
body {
margin: 20px;
}
.menu {
cursor: pointer;
height: 24px;
list-style: none;
margin: 0;
padding: 0;
width: 30px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.menu li {
background-color: #111;
border-radius: 4px;
display: block;
height: 4px;
left: 0;
margin: 0;
opacity: 1;
padding: 0;
position: absolute;
width: 100%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
.menu li:nth-child(1) {
top: 0;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.menu li:nth-child(2) {
top: 9px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.menu li:nth-child(3) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.menu.open li:nth-child(1) {
left: 4px;
top: -1px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.open li:nth-child(2) {
opacity: 0;
width: 0;
}
.menu.open li:nth-child(3) {
left: 4px;
top: 20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<ul class="menu">
<li></li>
<li></li>
<li></li>
</ul>
with jQuery
$(document).ready(function(){
$('.menu').click(function(){
$(this).toggleClass('open');
});
});
Bogdan. I made an example for you, if I correctly understood your question.
HTML:
<div id="hamburger" class="hamburger hamburger_active">
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
</div>
CSS:
.hamburger {
width: 40px;
height: 40px;
position: fixed;
top:50%;
left: 50%;
border: 1px solid red;
}
.hamburger.hamburger_active .hamburger__line {
width: 100%;
}
.hamburger__line {
width: 0;
height: 2px;
position: absolute;
transform-origin: 20px 0;
top: 50%;
left: 0;
background-color: #000000;
transition: width .3s ease;
}
.hamburger__line:nth-child(1) {
transform: rotate(45deg);
}
.hamburger__line:nth-child(2) {
transform: rotate(135deg);
}
jQuery:
var $menu = $("#hamburger");
$menu.click(function() {
$(this).toggleClass('hamburger_active');
});
I trying to change the brightess of a div (not only an image brightness). Generaly there is an image in a div, description and caption, the main div background color is white. I want to show ovarlay div onmouse hover. Idea is to cover main div with overlay div. But now I getting only the image brightness change , what I want to achieve is to cover the hole div and keep whithe fonts.
When I add a thumbnail brightness effect it also influence the fonts to became darker. how to do that keeping fonts white.
col-sm-6, caption, thumbnail classes are defined by bootstrap.
The code of:
<div class="hovereffect thumbnail Staffinview1 delay1s">
<img src="./images/photo.jpg">
<div class="overlay">
<?php echo Person_description; ?>
</div>
<div class="caption">
<h3>Name Surname</h3>
</div>
</div>
</div>
The css code:
.thumbnail:hover {
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.5);
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
position: absolute;
overflow: hidden;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
border-bottom: 1px solid #FFF;
border-top: 1px solid #FFF;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0,1);
-ms-transform: scale(0,1);
transform: scale(0,1);
color: #fff;
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.hovereffect:hover img{
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /> </feComponentTransfer></filter></svg>#filter');
filter: brightness(0.3);
-webkit-filter: brightness(0.3);
}
I believe You are trying to achieve a mask
You can use z-index property and postion:absolute for that overlay div
css rule
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
z-index: 0;
transition: all 0.5s;
}
.overlay:hover {
z-index: 1;
background: rgb(173, 173, 173);
opacity: 0.5;
}
Snippet below
.thumbnail:hover {
transition: all 0.5s ease - in -out;
- moz - transition: all 0.5s ease - in -out;
- webkit - transition: all 0.5s ease - in -out;
- o - transition: all 0.5s ease - in -out;
- ms - transition: all 0.5s ease - in -out;
box - shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.5);
}
.hovereffect {
width: 100 %;
height: 100 %;
float: left;
overflow: hidden;
position: relative;
text - align: center;
cursor: default;
}
.hovereffect.overlay {
position: absolute;
overflow: hidden;
width: 80 %;
height: 80 %;
left: 10 %;
top: 10 %;
border - bottom: 1px solid# FFF;
border - top: 1px solid# FFF;
- webkit - transition: opacity 0.35s, -webkit - transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
- webkit - transform: scale(0, 1);
- ms - transform: scale(0, 1);
transform: scale(0, 1);
color: #fff;
}
.hovereffect:hover.overlay {
opacity: 1;
filter: alpha(opacity=100);
- webkit - transform: scale(1);
- ms - transform: scale(1);
transform: scale(1);
}
.hovereffect img {
display: block;
position: relative;
- webkit - transition: all 0.35s;
transition: all 0.35s;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
z-index: 0;
transition: all 0.5s;
}
.overlay:hover {
z-index: 1;
background: rgb(173, 173, 173);
opacity: 0.5;
}
<div class="hovereffect thumbnail Staffinview1 delay1s">
<img src="./images/photo.jpg">
<div class="overlay">
<?php echo Person_description; ?>
</div>
<div class="caption">
<h3>Name Surname</h3>
</div>
</div>
I have titles that I want to add CSS3 animation to it
I want to transform
Title
to
[Title]
And I want the square brackets to animate from the center of the word to the borders of it with animation.
something like..
Ti[]tle
to
[Title]
with animation (ofcourse i'm using :before :after to add the brackets with opacity 0 to 1)
my p style:
p:before {
content: "[";
position: absolute;
left: 50%; /*to add the bracket to the center of the word*/
opacity: 0;
transition: all 0.7s ease;
}
Thank You !
p {
display: table;
position: relative;
}
p:before,
p:after{
position: absolute;
opacity: 0;
transition: all 0.7s ease;
}
p:before {
content: "[";
left: 50%;
}
p:after {
content: "]";
right: 50%;
}
p:hover:before {
left: -5px;
opacity: 1;
}
p:hover:after {
right: -5px;
opacity: 1;
}
<p>Title</p>
<p>A Longer Title</p>
Is this what you are looking for?
with this html:
<div>
TESTING
</div>
and these css's:
div{
padding: 18px 0 18px 0;
display: inline-block;
margin-right: 40px;
}
a {
color: #999;
display: inline-block;
text-align: center;
width: 200px;
text-decoration: none;
}
a:before, a:after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
a:before {
margin-right: 10px;
content: '[';
-webkit-transform: translate(20px, -1px);
-moz-transform: translate(20px, -1px);
transform: translate(20px, -1px);
vertical-align: top;
}
a:after {
margin-left: 10px;
content: ']';
-webkit-transform: translate(-20px, -1px);
-moz-transform: translate(-20px, -1px);
transform: translate(-20px, -1px);
}
a:hover:after {
opacity: 1;
-webkit-transform: translate(0px, -1px);
-moz-transform: translate(0px, -1px);
transform: translate(0px, -1px);
}
a:hover:before {
opacity: 1;
-webkit-transform: translate(0px, -1px);
-moz-transform: translate(0px, -1px);
transform: translate(0px, -1px);
}
You get this JSFIDDLE
You can achieve this using frame animations. This way you won't have to hover the element (or anything else) for the animation to start.
See: http://jsfiddle.net/Paf_Sebastien/j2cvagjf/
Set :before and :after like this :
h1:before {
content: "[";
position: absolute;
display: block;
top: 0;
-webkit-animation: bracketleft 1s 1 forwards;
animation: bracketleft 1s 1 forwards;
}
Then handle the animation :
#-webkit-keyframes bracketleft {
0% { opacity: 0; left: 50%; }
100% { opacity: 1; left:-10px; }
}
#-webkit-keyframes bracketright {
0% { opacity: 0; right: 50%; }
100% { opacity: 1; right: -10px; }
}