below is my code:
html:
<div id="wrapper" style="background-color:red">
<div id="sidebar-wrapper" style="background-color:yellow">sidebar
<div id="result"></div>
</div>
<div id="header" class="container-fluid">
<div class="navbar">
<a href="#menu-toggle" id="menu-toggle" >Press</a>
<div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span></div>
</div>
</div>
css:
#wrapper {
width: 100vw;
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-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y:auto;
background: #5F657C;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
js:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
The jsfiddle is below:
JSFIDDLE
My problem is for the left side yellow div, the content inside will kinda squeeze together when the sidebar slide to the left.
I want to make it just hide underneath and don't want the content to be squeezed. Do you guys have any idea?
You could do it like this:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
#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-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: -250px;
width: 250px;
height: 100%;
overflow-y: auto;
background: #050545;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper" style="background-color:red">
<div id="sidebar-wrapper" style="background-color:yellow">sidebar content show here
<div id="result"></div>
</div>
<div id="header" class="container-fluid">
<div class="navbar">
Press
<div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span>
</div>
</div>
</div>
</div>
The width is set default to 250px. In my snippet I'm playing with the offset left to hide/show the sidebar. Study my code and you'll see how it works.
Related
I've done some research and it doesn't seem that I can find exactly what I'm looking for. My goal is to have a navigation bar on the bottom of my JS-app and when a user clicks a certain button, it would start an animation where the navbar travels from the bottom of the app to the top of the app. Here's some edits I made to illustrate what I mean:
default position
after user presses "profile" button, for example
Not sure what JS library would help me with this or if there is a code-sample. The key here is that I dont want it to shift on any button clicked, only certain ones. For example, if the user clicks on "Library" from my example above, I want it to stay on the bottom.
Might anyone know how I can accomplish this?
EDIT: so the reason im doing this is because this is an electron app that i want some content to be local, and some content to be remote. This is why when the users presses "Library" i would want the navbar to remain stationary. However if the user presses "Profile" it would shift to the top and the "content" window would act sort of like a web-browser in that it would load a page on a remote webserver. I hope that helps. And thanks for all the info!
EDIT 2: A little off-topic, but i get this weird padding that im not sure where is coming from:
weird space
EDIT 3:
Heres the HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="renderer.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="styles.css">
<body>
<script>
function toggleNavLocation() {
//alert('clciiikkkked');
$('nav').toggleClass('top');
}
</script>
<nav>
<div id="logo_container"><img id="logo"
src="./assets/images/poscon_nav.jpg" width="100px" height="55px" /></div>
<div id="navitems">
<ul>
<li id="dashboard">DASHBOARD</li>
<li id="pilotclient">PILOT CLIENT</li>
<li id="livemap">LIVE MAP</li>
<li id="community">COMMUNITY</li>
<li id="profile" onclick="toggleNavLocation()">PROFILE</li>
<li id="training">TRAINING</li>
<li id="support">SUPPORT</li>
<li id="library">LIBRARY</li>
</ul>
</div>
</nav>
<div id="right_content">
<div id="user_pane">
<span id="username"></span>
</div>
</div>
<div id="center_content">
</div>
<div id="left_content">
</div>
</body>
</html>
CSS:
body {
font-family: "Arial", Serif;
background-color: rgb(27, 27, 27);
overflow-x: hidden;
overflow-y: hidden;
}
nav {
position: absolute;
bottom: 0;
left: 0;
width:850;
height:75px;
background: rgb(27, 27, 80);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#dashboard, #pilotclient, #livemap, #community, #profile, #training,
#support, #library, #search_img {
font-size: 11px;
color: rgb(81, 81, 81);
padding-top: 22px;
display: inline-block;
width: 75px;
height:75px;
background:rgb(27, 27, 27);
text-align:center;
}
#dashboard:hover, #pilotclient:hover, #livemap:hover, #community:hover,
#profile:hover, #training:hover, #support:hover, #library:hover {
background: #252525;
}
#logo_container {
display: inline-block;
position: absolute;
left: 10px;
bottom: 2px;
}
#navitems {
display: inline-block;
margin-left: 150px;
height: 100px;
}
#right_content {
width: 250px;
height: 575px;
position: absolute;
top: 0px;
right: 0px;
background-color: red;
}
#center_content {
width: 500px;
height: 575px;
position:absolute;
top: 0px;
right: 250px;
background-color: blue;
}
#left_content {
width: 250px;
height: 575px;
position:absolute;
top: 0px;
left: 0px;
background-color: green;
}
#user_pane {
width: 250px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background-color: green;
}
#username {
width: 200px;
height: 25px;
position: absolute;
top: 175px;
left: 20px;
text-align: center;
background-color: white;
}
You can use some JS to add a class to your nav bar to do the animation, and you can add this class when clicking on a button with specific IDs.
Below is a snippet that demonstrates this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
If you don't want it to animate, but just jump to top or bottom, then you can remove all of these lines:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
Here is a snippet demonstrating this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
These examples us some JQuery, but if you want pure JS, you should be able to port it over to Vanilla with a bit of thought put into the code I have supplied.
It seems pretty straight forward but we need to know which property did you use to position the navbar at the bottom?. Best solution would be to create two css Properties of different properties in flexbox behavior then just use JavaScript to change the nav id corresponding the properties when the profile is clicked.
You can animate the navbar to slide between 2 vertical positions with css as such:-
#keyframes animatebottom {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
Modify the "bottom" property to suit your page height and other requirements.
ive been trying to recreate the hover dual effect that is on https://andreas-demo.myportfolio.com/
However i cant seem to get both to align correctly and then i cannot get the affect that hovers over the entire section but that changes BOTH: 1- Darkening the image, 2 -inversing the colors.
I want to be able to get both affects to happen while hovering over the entire block, just like on the site above^.
Here's my code;
img {
display: block;
width: 60%;
height: 450px;
background-color: #f2f2f2;
!important;
-webkit-filter: brightness(100%);
}
a img:hover {
-webkit-filter: brightness(60%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.media {
background-color: #f2f2f2;
!important;
text-align: center;
}
p {
display: inline-block;
vertical-align: middle;
}
<div class="container">
<a href="">
<div class="media">
<img src="img/pexels-photo-733438.jpeg" class="img-fluid" alt="Responsive image">
<p>PROJECT 1</p>
<p>2017</p>
</div>
</a>
</div>
On container:hover, set your container'background-color as black (default to white) and set the image opacity as 0.5.
Move the :hover pseudo-class to one of the 3 parent (wrapper) elements -
.container, .container > a, or .media element. This will have the effect of adding the overlay to both elements on :hover.
Like this:
.container {
font-family: Arial;
}
.container:hover {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.container__link {
display: flex;
text-decoration: none;
}
.media {
flex: 6;
background-color: #222222;
}
img {
display: block;
width: 100%;
height: 450px;
opacity: 1;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.container:hover .media img {
opacity: 0.3;
}
.description {
flex: 4;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
background-color: #ffffff;
color: #222222;
}
.container:hover .description {
background-color: #222222;
color: #ffffff;
}
p {
padding: 0;
margin: 0;
}
<div class="container">
<a href="" class="container__link">
<div class="media">
<img src="http://via.placeholder.com/350x150" class="img-fluid" alt="Responsive image">
</div>
<div class="description">
<p>PROJECT 1</p>
<p>2017</p>
</div>
</a>
</div>
I have element with some of the animations made with CSS3. There is a link inside the block which opens modal window, but when the modal window is closed the animation element is left as in "hover" state.
Example in jsfiddle :
<style>
.item-wrap {
position: relative;
height: 200px;
width: 200px;
background-color: black;
overflow: hidden;
}
.item-wrap p {
color: #fff;
text-align: center;
}
.item-wrap::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
opacity: 0.5;
-webkit-transition: width 0s ease, background-color 0.5s ease;
-moz-transition: width 0s ease, background-color 0.5s ease;
-o-transition: width 0s ease, background-color 0.5s ease;
transition: width 0s ease, background-color 0.5s ease;
}
.item-wrap::after {
content: ' ';
position: absolute;
right: 0;
top: 0;
width: 0;
height: 100%;
opacity: 0.5;
background-color: #fff;
transition: width 0.5s ease;
-webkit-transition: width 0.5s ease;
-moz-transition: width 0.5s ease;
-ms-transition: width 0.5s ease;
-o-transition: width 0.5s ease;
}
.item-wrap:hover::before {
width: 100%;
background-color: #fff;
transition: width 0.5s ease;
-webkit-transition: width 0.5s ease;
-moz-transition: width 0.5s ease;
-ms-transition: width 0.5s ease;
-o-transition: width 0.5s ease;
}
.item-wrap:hover::after {
width: 100%;
background-color: transparent;
transition: all 0s ease;
-webkit-transition: all 0s ease;
-moz-transition: all 0s ease;
-ms-transition: all 0s ease;
-o-transition: all 0s ease;
}
.item-wrap:hover .cover {
bottom: 0;
}
.cover a {
color: #fff;
}
.link1 {
position: absolute;
left: 20px;
top: 50%;
right: 20px;
}
.link2 {
position: absolute;
top: 50%;
right: 20px;
}
.item-wrap .cover {
position: absolute;
right: 0;
left: 0;
bottom: -100%;
width: 100%;
height: 100%;
transition: bottom 0.3s linear;
-webkit-transition: bottom 0.3s linear;
-moz-transition: bottom 0.3s linear;
-ms-transition: bottom 0.3s linear;
-o-transition: bottom 0.3s linear;
z-index: 10;
}
</style>
<div class="item">
<div class="item-wrap">
<p>Main content blah blah</p>
<div class="cover">
Link1
Link2
</div><!-- /.cover -->
</div><!-- /.item-wrap -->
</div><!-- /.item -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Example ins jsfiddle : https://jsfiddle.net/9objpv9x/
Try to hover to see animation and modal links and then click the "Link1" and close modal to see what happens next.
I just don't know where to start digging.
Actually the "link1" is left at "focus" state and the outline is displayed due to default bootstrap css property:
a:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
To override it, Modify it in your css.
a#id:focus {
outline: 0px;
}
To remove the focus state after the modal close,
We need to trigger modal in jquery instead of having "data-target" in HTML.
Check out this jsfiddle link.
Updated Code Fix
I have following setup:
$('.home-cat-wrapper a').hover(function() {
var this_left = parseFloat($(this).find('.product-sticker-image').data('left'));
var this_right = parseFloat($(this).find('.product-sticker-image').data('right'));
var left = 0;
var right = 0;
if (this_left > 21) {
left = 2 * (this_left - 21);
} else {
left = 10;
}
if (this_right > 21) {
right = 2 * (this_right - 21);
} else {
right = 10;
}
$(this).find('.product-sticker-image').css({
'top': '0',
'left': left + '%',
'right': right + '%'
});
$(this).find('.home-page-category-hover').stop(true, false).fadeIn(200);
}, function() {
var this_top = $(this).find('.product-sticker-image').data('top');
var this_left = $(this).find('.product-sticker-image').data('left');
var this_right = $(this).find('.product-sticker-image').data('right');
$(this).find('.product-sticker-image').css({
'top': this_top,
'left': this_left,
'right': this_right
});
$(this).find('.home-page-category-hover').stop(true, false).fadeOut(200);
});
.col-xs-12 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.home-page-category-box {
padding: 0 20px;
text-align: center;
margin-bottom: 51px;
}
.home-cat-wrapper {
background-color: #f0f0f0;
}
.home-page-category-heading {
color: #ffffff;
font-size: 13.1px;
font-weight: 600;
background: #000000;
padding: 13px 0 10px;
}
.home-page-image-wrapper {
position: relative;
}
.home-page-category-hover {
position: absolute;
bottom: 0;
right: 0;
left: 0;
display: none;
}
.home-page-category-hover span {
color: #ffffff;
font-size: 12.44px;
background: url("../images/footer-background.jpg");
font-weight: 600;
padding: 13px 0;
display: inline-block;
width: 100%;
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.category-image-wrapper {
width: 100%;
background: #f0f0f0;
padding: 45px 0 65px;
position: relative;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.category-sticker-container {
position: relative;
}
.product-sticker-image {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
position: absolute;
}
.category-sticker-container > img {
width: 100%;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.product-sticker-image img {
padding: 0;
width: 100%;
}
.home-cat-wrapper a:hover .category-image-wrapper {
background: #ffffff;
}
.home-cat-wrapper a:hover .category-image-wrapper .category-sticker-container > img {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 home-page-right-container">
<div class="col-sm-3 col-xs-6 home-page-category-box" style="height: 450px;">
<div class="home-cat-wrapper col-xs-12 category-3">
<a href="http://weadmire.dx3webs.com/film.html">
<div class="col-xs-12 home-page-category-heading" style="height: 41px;">Film</div>
<div class="col-xs-12 home-page-image-wrapper">
<div class="col-xs-12 category-image-wrapper">
<div class="col-xs-12 category-sticker-container">
<div class="product-sticker-image" data-top="17%" data-left="21%" data-right="21%" style="top: 17%; left: 21%; right: 21%;">
<img src="http://weadmire.dx3webs.com/pub/media/catalog/product/a/l/alfred-hitchcock.png" alt="Film-artwork">
</div>
<img src="http://weadmire.dx3webs.com/pub/media/catalog/product/cache/1/image/400x/925f46717e92fbc24a8e2d03b22927e1/n/a/natural-white.png" alt="Film">
</div>
</div>
</div>
<div class="home-page-category-hover" style="display: block; opacity: 1;"><span>63 DESIGNS | SEE THEM</span>
</div>
</a>
</div>
</div>
<div class="col-sm-3 col-xs-6 home-page-category-box" style="height: 450px;">
<div class="home-cat-wrapper col-xs-12 category-4">
<a href="http://weadmire.dx3webs.com/design-architecture.html">
<div class="col-xs-12 home-page-category-heading" style="height: 41px;">Design & Architecture</div>
<div class="col-xs-12 home-page-image-wrapper">
<div class="col-xs-12 category-image-wrapper">
<div class="col-xs-12 category-sticker-container">
<div class="product-sticker-image" data-top="17%" data-left="21%" data-right="21%" style="top: 17%; left: 21%; right: 21%;">
<img src="http://weadmire.dx3webs.com/pub/media/catalog/product/a/d/admire-rio.png" alt="Design & Architecture-artwork">
</div>
<img src="http://weadmire.dx3webs.com/pub/media/catalog/product/cache/1/image/400x/925f46717e92fbc24a8e2d03b22927e1/n/a/natural-white.png" alt="Design & Architecture">
</div>
</div>
</div>
<div class="home-page-category-hover" style="display: none; opacity: 1;"><span>17 DESIGNS | SEE THEM</span>
</div>
</a>
</div>
</div>
</div>
When you hover the box you can see there is slight flicker, a blink appears in the t-shirt logo and after that same happens when hover out. I tried with back face visibility and other transform properties but no luck. How can I get rid of this flicker? Thanks.
fiddle
Just add z-index to .product-sticker-image class.
Check the demo
You should use transition: width 0.2s ease; on .category-sticker-container > img in this situation:
.category-sticker-container > img {
width: 100%;
-webkit-transition: width 0.2s ease;
-moz-transition: width 0.2s ease;
-ms-transition: width 0.2s ease;
-o-transition: width 0.2s ease;
transition: width 0.2s ease;
}
JSfiddle here
Is there any possible way to use media queries on content loaded by AJAX? I'm using .load() to load a html snippet into the web page. It is a light box I created using CSS. The problem is that media queries don't seem to have any effect on it.
Once the movie has been clicked, a html snippet is loaded into the div "lightbox-target" and a lightbox appears up on the screen. The lightbox is styled using ".detail".
<div class="template actionmovies">
<h1 class="name">Batman: The Dark Knight</h1>
<h2 class="imdb">9/10</h2>
<h3 class="rotten">94%</h3>
<a class="lightbox" href="#The_Dark_Knight" name="The_Dark_Knight">
<img src="images/darkknight.jpg" />
</a>
</div>
<!-- the HTML snippets load inside this div -->
<div class="lightbox-target">
</div>
CSS
.lightbox-target {
position: fixed;
background: rgba(0,0,0,0.85);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
z-index: 1000;
}
.detail {
position: absolute;
top: 100px;
height: 525px;
width: 65vw;
left: 50%;
margin-left: -34vw;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.9);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
background-color: #3D3D3D;
z-index: 1001;
padding: 0 10px 0 20px;
border-radius: 10px;
}
a.lightbox-close {
display: block;
color: white;
position: absolute;
padding: 15px 20px 0 0;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
i:hover {
opacity: 0.65;
}
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
#media all and (max-width: 1405px){
.detail {
position: absolute;
top: 100px;
height: 500px;
width: 60vw;
left: 50%;
margin-left: -34vw;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.9);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
background-color: #3D3D3D;
z-index: 1001;
padding: 0 10px 0 20px;
border-radius: 10px;
}
}