When i hover once, transition is proper, but on second time, transition becomes wierd, as if the perspective: 800px starts working after transition has taken place.
Please also tell how can i set rotation about an edge except center.
I know about transform-origin but nothing such as transform-axis.
I want that when i hover over the , these images should open like a window.
var left=document.getElementById("left");
var right=document.getElementById("right");
function curtain() {
left.style.transform="rotateY(70deg)";
right.style.transform="rotateY(-70deg)";
}
function back() {
left.style.transform="rotateY(0deg)";
right.style.transform="rotateY(0deg)";
}
#animate{
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position:absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
}
<html>
<head>
<link href="style/style.css" rel="stylesheet">
</head>
<body>
<div id="animate" onmouseover="curtain()" onmouseout="back()">
<div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div>
<div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div>
</div>
<script src="script/script.js"></script>
</body>
</html>
There seems to be an issue with perspective and the onmouseout. back() (in onmouseout) and curtain() (in onmouseover) are called quite inconsistently. onmouseout is called whenever the mouse moves outside the element (#animate in this case) or its children (the images). The children are animated - they move - and the onmouseout is thereby called multiple times.
I wouldn't recommend onmouseover / onmouseout for this - instead I would use CSS :hover.
That aside, transform-origin defines the center of rotation.
#animate:hover #left {
transform: rotateY(70deg);
}
#animate:hover #right {
transform: rotateY(-70deg);
}
#animate {
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position: absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform-origin: left;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform-origin: right;
}
<div id = 'animate'>
<div id = 'left'><img src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG'></div>
<div id = 'right'><img src = 'http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png'></div>
</div>
I don't know the origin of the problem, but it works ok if you are using CSS hover instead of JS hover.
And the transform origin is the way to go, it does what your wanted transform-axis would do.
#animate{
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position:absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform: rotateY(0deg);
transform-origin: left center;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform: rotateY(0deg);
transform-origin: right center;
}
#animate:hover #left {
transform: rotateY(70deg);
}
#animate:hover #right {
transform: rotateY(-70deg);
}
<div id="animate" onmouseover="curtain()" onmouseout="back()">
<div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div>
<div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div>
</div>
Related
I am making a meet our team page where the card flips back when hovered over, shows the baby photo of a team member. The card flips back, except when I hover it over,
(mockup photo by the way) It goes from here
to here. as you can see, both card-front and the card back is visible. here are my css and react js. How can I fix it? thank you
JS
<div className="team-member">
<div className="card">
<div className="card-front">...</div>
<div className="card-back">...</div>
</div>
</div>
CSS
.team-member {
max-width: 20%;
perspective: 1000px;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
padding: 0 15px;
margin-bottom: 2.25rem;
}
.card {
position: relative;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.card-back, .card-front {
width: 100%;
display: block;
backface-visibility: hidden;
}
.team-member__image {
padding-top: 100%;
position: relative;
margin-bottom: 1.25rem;
}
.team-member:hover .card {
transform: rotateY(180deg);
width: 100%;
display: block;
}
.team-member__image .img-holder {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.team-member__image .img-holder img {
display: block;
width: 100vw;
height: 100vh;
-o-object-fit: cover;
object-fit: cover;
max-width: 100%;
max-height: 100%;
}
img {
border-style: none;
}
.card-back {
transform: rotateY(180deg);
}
I think that your problems is caused by "flipping" those images at the same time.
You don't use separate id's or classes to apply your hover effect, so both of them are considered "flipped" when you try to hover over.
i want to position items dynamically using javascript but i really don't know how to do this i am still learning javascript , i want to add for example 4 icons 1 in the top and 1 in the bottom and 1 in the left and right but using css when you need to add more items you have to add more css code and position statically , here is the code :
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background: white;
}
.container-circle {
text-align: center;
position: relative;
height: 250px;
width: 250px;
border-radius: 50%;
transition: all 1s ease;
}
.container-circle .container-circle-img {
height: 250px;
width: 250px;
border-radius: 50%;
object-fit: cover;
}
.container-circle::before {
content: '';
position: absolute;
top: -3;
left: -3;
right: -3;
bottom: -3;
border-radius: 50%;
z-index: -1;
background-image: linear-gradient(180deg, red, blue, yellow, green);
animation: rotate 3s linear infinite;
}
.container-circle-icons {
text-align: center;
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
border-radius: 60%;
animation: rotate 10s linear infinite;
padding: 0;
margin: 0;
}
.container-circle-icons .ico {
width: 50px;
height: 50px;
}
.container-circle-icons .ico1 {
content: '';
position: absolute;
top: -20%;
left: 35%;
}
.container-circle-icons .ico2 {
content: '';
position: absolute;
top: 50%;
right: -30%;
}
.container-circle-icons .ico3 {
content: '';
position: absolute;
left: 35%;
bottom: -30%;
}
.container-circle-icons .ico4 {
content: '';
position: absolute;
top: 50%;
left: -60%;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="container-circle">
<img class="container-circle-img" src="picture.jpg" alt="pic1">
<div class="container-circle-icons">
<img src="icon1.png" class="ico ico1" alt="">
<img src="icon2.png" class="ico ico2" alt="">
<img src="icon3.png" class="ico ico3" alt="">
<img src="icon4.png" class="ico ico4" alt="">
</div>
</div>
The position of the elements will end up being dictated by the CSS, but if you want to add the elements dynamically and move them around, you can set that CSS using javascript.
Lets say you insert a new element with id='test'
You can dynamically change its position by doing this:
const newElement = document.getElementById('test');
element.style.left = '150%' // whatever value you want
element.style.top= '75px' // make sure you include units
I cant close my overlay modal Box.I try when the x is clicked than remove the class list,than the modal-box should be closed,but it is not recognized by js and css.First i have one ovarlay where should be showed the name and the position of the coas,after that when the user clicks on the arrow the modal box pop up in full width and height and that'sworks correct and after that i have one X span #times where when i click on the X i want the mdoal box to be disapered.I tried with addevent listener and everything itdoesnt work.
JS CODE
const makingTheInstructorSection = (arrInst) => {
for(let coach of arrInst) {
$('.instructorBoxes').append
(`
<div class="infoPerInstructor">
<img src="ImageGalleryPictures/instructor.jpg"/>
<div class="firstOverlay">
<p class="arrowPointerInstructor">→</p>
<div class="text">
<p class="arrowPointerInstructor">→</p>
<h3>${coach.name}</h3>
<p>${coach.position}</p>
</div>
</div>
<div class="secondOverlayOnClick">
<span class="closeTheInstructorBox">×</span>
<h5>Why you coach:</h5>
<p>${coach.WhyYouCoach}</p>
<h5>Favorite Movement:</h5>
<p>${coach.favoriteMovement}</p>
<h5>Favorite Quote:</h5>
<p>${coach.favoriteQuote}</p>
</div>
</div>
`)
}
}
// the code that i am trygin first,i am nto removing here
// because even here i dont get the span "x" in the console
// when i click that x in the browser
for(let item of closing) {
item.addEventListener("click" , (e) => {
console.log(e.target);
})
}
THE CSS CODE
.instructorBoxes {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
grid-gap: 8px;
}
.instructorBoxes > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.instructorBoxes div {
width: 100%;
height: 100%;
}
.infoPerInstructor {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.firstOverlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* background-color: #008CBA; */
background-color: #570194;
overflow: hidden;
width: 100%;
height: 100%;
transform: scale(0);
transition: .3s ease;
cursor: pointer;
z-index:1;
}
.infoPerInstructor:hover .firstOverlay {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.arrowPointerInstructor {
float: right;
font-size: 50px;
color: white;
}
.secondOverlayOnClick {
display: none;
}
.activeteTheSecondOverlayOnClick {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
display: block;
}
/* .DEactiveteTheSecondOverlayOnClick {
display: none;
} */
.activeteTheSecondOverlayOnClick p , h1 {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.closeTheInstructorBox {
font-size: 30px;
color: red;
cursor: pointer;
float: right;
right: 0;
z-index: 100;
}
I found an answer.Because it is overlay it does not work,the best way to do is to make add event listener on body,and then check
if some event target contains that specific class list,then it will be found,and throught that event can you search the "modal box" depending on the structure on your html and remove some class list etc...
body.addEventListener("click" , (e) => {
if(e.target.classList.contains("closeTheInstructorBox")) {
console.log("x e ");
console.log(e.target.parentElement)
e.target.parentElement.remove("activeteTheSecondOverlayOnClick")
}
I'm creating a tab interface whereby the active tab has a rotate transformation which allows a preview of the next tab to be visible. Clicking on a button in the preview area will open the next tab.
This is working fine in all browsers apart from IE11. See snippet below.
$(document).ready(function() {
$('button').click(function() {
alert('Button was clicked');
});
})
* {
margin: 0;
padding: 0
}
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.container .tab {
position: absolute;
top: 0;
left: 0;
width: 185%;
height: 140%;
transform: translateX(-50%) rotate(-25deg);
transform-origin: 50% 0;
overflow: hidden;
}
.container .tab .content {
transform: rotate(25deg);
transform-origin: 0 0;
margin-left: 50%;
position: relative;
height: 75%;
width: 55%;
}
.container .tab-1 {
z-index: 2;
}
.container .tab-1 .content {
background-color: red;
}
.container .tab-2 {
z-index: 1;
height: 200%;
}
.container .tab-2 .content {
background-color: green;
}
.container .tab-2 button {
position: absolute;
bottom: 37%;
right: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="tab tab-1">
<div class="content"></div>
</div>
<div class="tab tab-2">
<div class="content">
<button type="button">
Click me
</button>
</div>
</div>
</div>
I think the problem is that although IE visibly performs the rotation, the original bounding area itself is not rotated, thus the click doesn't get applied on the background element.
Anybody got any ideas how I can fix this? jsfiddle here: https://jsfiddle.net/bmq2e2ae/1/
For this to work in IE you can add pointer-events: none for .tab .content and bring back pointer-events to initial state for children of .tab .content.
Demo:
$(document).ready(function() {
$('button').click(function() {
alert('Button was clicked');
});
})
* {
margin: 0;
padding: 0
}
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.container .tab {
position: absolute;
top: 0;
left: 0;
width: 185%;
height: 140%;
transform: translateX(-50%) rotate(-25deg);
transform-origin: 50% 0;
overflow: hidden;
}
.container .tab .content {
transform: rotate(25deg);
transform-origin: 0 0;
margin-left: 50%;
position: relative;
height: 75%;
width: 55%;
}
.container .tab-1 {
z-index: 2;
}
.container .tab-1 .content {
background-color: red;
}
.container .tab-2 {
z-index: 1;
height: 200%;
}
.container .tab-2 .content {
background-color: green;
}
.container .tab-2 button {
position: absolute;
bottom: 37%;
right: 20px;
}
/* IE Hack: disable pointer-events */
.container .tab .content {
pointer-events: none;
}
/* IE Hack: enable pointer-events for descendants */
.container .tab .content > * {
pointer-events: initial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="tab tab-1">
<div class="content"></div>
</div>
<div class="tab tab-2">
<div class="content">
<button type="button">
Click me
</button>
</div>
</div>
</div>
Also you wrap this hack in media query browser hack to be evaluated only in IE
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE Hack: disable pointer-events */
.container .tab .content {
pointer-events: none;
}
/* IE Hack: enable pointer-events for descendants */
.container .tab .content > * {
pointer-events: initial;
}
}
When you use CSS3 TRANSFORMS you need to use different tags for diffeent browser.
You need to use like mentioned below.
-webkit-transform: rotate(-25deg) translateX(-50%);
-webkit-transform-origin: 50% 0%;
-moz-transform: rotate(-25deg) translateX(-50%);
-moz-transform-origin: 50% 0%;
-o-transform: rotate(-25deg) translateX(-50%);
-o-transform-origin: 50% 0%;
-ms-transform: rotate(-25deg) translateX(-50%);
-ms-transform-origin: 50% 0%;
transform: rotate(-25deg) translateX(-50%);
transform-origin: 50% 0%;
This will work and supported in below mentioned browser versions.
Chrome : 4.0+
Firefox : 3.5+
Safari : 3.1+
IE : 9.0+
Opera : 10.5+
1st Example from requirement : Instead of rotating both the div you can rotate only second div and it will work. Please check below solution.
$(document).ready(function() {
$('button').click(function() {
alert('Button was clicked');
});
});
* {
margin: 0;
padding: 0
}
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.container .tab {
width: 185%;
height: 140%;
overflow: hidden;
}
.container .tab .content {
position: relative;
height: 100%;
width: 100%;
}
.container .tab-1 {
z-index: 2;
width: 100%;
}
.container .tab-1 .content {
background-color: red;
}
.container .tab-2 {
z-index: 3;
transform: translateX(-40%) rotate(-25deg);
transform-origin: 50% 0;
}
.container .tab-2 .content {
background-color: green;
}
.container .tab-2 button {
position: absolute;
right: 60px;
top:20px;
transform: translateX(50%) rotate(25deg);
transform-origin: 50% 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="tab tab-1">
<div class="content">
</div>
</div>
<div class="tab tab-2">
<div class="content">
<button type="button">
Click me
</button>
</div>
</div>
</div>
2nd Example from requirement.: Within one div you can achieve this. Please check below.
$(document).ready(function() {
$('button').click(function() {
alert('Button was clicked');
});
});
* {
margin: 0;
padding: 0
}
.container {
position: relative;
overflow: hidden;
}
.container .tab{
z-index: 2;
margin-bottom:10px;
position: relative;
display: block;
width: 400px;
height: 200px;
background-color: red;
overflow: hidden;
}
.container .content {
z-index: 62;
width: 200px;
height: 120px;
background-color: green;
position: absolute;
bottom: -72px;
right: -35px;
transform: rotate(-25deg) ;
-webkit-transform: rotate(-25deg) ;
-moz-transform: rotate(-25deg) ;
-o-transform: rotate(-25deg) ;
-ms-transform: rotate(-25deg) ;
}
.container button{
border:1px solid #eee;
}
.container a {
color:#FFF;
}
.container button,
.container a {
position: absolute;
display: block;
margin-right: 30px;
right: 15px;
bottom: 80px;
transform: rotate(25deg);
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-o-transform: rotate(25deg);
-ms-transform: rotate(25deg);
cursor: pointer;
}
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="tab tab-1">
Tab With Link
<div class="content">
Link
</div>
</div>
<div class="tab tab-2">
Tab With Button
<div class="content">
<button id="check_btn" type="button">Click me</button>
</div>
</div>
<div class="tab tab-3">
Tab Without Link or Button
<div class="content">
</div>
</div>
<div class="tab tab-4">
Only Tab with no Green Area
</div>
</div>
</body>
</html>
This will help you. Let me know if it not works for you.
The parent element .tab-2 of the button has a lower z-index set then the other .tab-1. So in IE .tab-1 is covering everything, when trying to click even though not visibility.
Take the button element out of the .tab-2 .content elements and place after both inside the container. Then set position:absolute and a higher z-index then both the .container .tab-2 and .container .tab-1. The re-position.
Note: You have to scroll in example below to see button due to elements height.
JSFiddle Demo
$(document).ready(function() {
$('button').click(function() {
alert('Button was clicked');
});
})
* {
margin: 0;
padding: 0
}
.container {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
.container .tab {
position: absolute;
top: 0;
left: 0;
width: 185%;
height: 140%;
transform: translateX(-50%) rotate(-25deg);
transform-origin: 50% 0;
overflow: hidden;
}
.container .tab .content {
transform: rotate(25deg);
transform-origin: 0 0;
margin-left: 50%;
position: relative;
height: 75%;
width: 55%;
}
.container .tab-1 {
z-index: 2;
}
.container .tab-1 .content {
background-color: red;
}
.container .tab-2 {
z-index: 1;
height: 200%;
}
.container .tab-2 .content {
background-color: green;
}
.container button {
position: absolute;
bottom: 5%;
right: 10px;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="container">
<div class="tab tab-1">
<div class="content">Tab 1</div>
</div>
<div class="tab tab-2">
<div class="content">Tab 2</div>
</div>
<button type="button">Click me</button>
</div>
Instead of rotating the first tab, you could rotate the second one (the one with the button). It would allow to keep that second tab on top of the first one. You can see the result in this jsfiddle.
$(document).ready(function() {
$('button').click(function(e) {
e.stopPropagation();
alert('Button was clicked');
});
$('.tab-1').click(function() {
alert('Tab1 was clicked');
});
$('.tab-2').click(function() {
alert('Tab2 was clicked');
});
})
* {
margin: 0;
padding: 0
}
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.container .tab {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container .tab .content {
position: relative;
height: 100%;
background-color: red;
}
.container .tab-2 {
transform: translateX(63%) translateY(100%) rotate(-25deg);
transform-origin: 0% 0%;
overflow: hidden;
}
.container .tab-2 .content {
background-color: green;
transform: rotate(25deg) translateX(-63%) translateY(-100%);
transform-origin: 0% 0%;
}
.container .tab-2 button {
position: absolute;
bottom: 4%;
right: 3%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="tab tab-1">
<div class="content">
Tab 1
</div>
</div>
<div class="tab tab-2">
<div class="content">
Tab 2
<button type="button">
Click me
</button>
</div>
</div>
</div>
I am working with a navigation bar that has slides a menu from right to left.
With my code, when the user picture is being clicked, it will show the menu.
So when it is loaded, menu is hidden and when it is clicked will be showed. I used to add class hidden and show to toggle to menu.
$(document).ready(function(){
$(".img-profile").click(function(){
$(".menu-wrapper").addClass("show");
});
$(".menu-bg").click(function(){
$(".menu-wrapper").removeClass("show");
});
});
CSS
.show{
display: inline-block !important;
}
.hidden{
display: none;
}
The problem is it's not animating even if I added the transition: all 0.2s linear 0s and the transform from 250px to 0
.menu-wrapper > .login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
right: 0;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
transform: translateX(250px);
}
Also, I want to animate it on menu-close from right to left.
My full code is at JSFIDDLE
Changing the display CSS attribute does not trigger animations. Use the visibility attribute instead. This one triggers animations.
If you have good reason to use display (which is completely possible), you'll need to set the display attribute first to show the element, but keep the visibility on hidden. Set the visibility: visible attribute right after and the animation will be triggered.
Edit: I had a look at your fiddle. Don't use the .hidden class, because bootstrap sets display:none on .hidden elements. Just use the .show class alone, putting visibility:visible in the show class, and setting visibility:hidden on the .menu-wrapper element. Remove all the display:none lines in your CSS and you'll be fine.
Try to do it with this trick.
<header class="header">
<div class="container">
<a class="logo" href="/"></a>
<div class="login">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<div class="login-menu">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<p>Mark Zuckerberg</p>
<button type="button" class="btn btn-danger btn-block">Logout</button>
</div>
<div class="menu-bg"></div>
</div>
</div>
.header{
width: 100%;
height: 50px;
background: #fff;
border-bottom: 2px solid #ececec;
}
.header > .container{
height: 100%;
position: relative;
}
.logo {
background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
display: inline-block;
width: 23rem;
height: 100%;
}
.select-lang {
display: inline-block;
position: absolute;
top: 15px;
}
.login{
position: absolute;
right: 0;
top: 0;
}
.img-profile{
background: no-repeat scroll center center / contain;
position: relative;
top: 3px;
border-radius: 40px;
width: 40px;
height: 40px;
display: block;
margin: auto;
}
.login > .menu-wrapper{
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
height: 100%;
width: 100%;
}
.login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
top: 40px;
right: -250px;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
}
.show{
right: 0;
}
.hidden{
right: -250px;
}
.login-menu > .img-profile {
border-radius: 70px;
height: 70px;
width: 70px;
}
.login-menu > p {
font-weight: bold;
margin: 10px 0 20px;
}
.menu-wrapper > .menu-bg{
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
$(document).ready(function(){
$(".img-profile").click(function(){
$(".login-menu").addClass("show");
});
$(".img-profile").click(function(){
$("body").removeClass("show");
});
});
Take a look here https://jsfiddle.net/SkiWether/KFmLv/
this is working for me
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});