'Need some help understading why I can't get my content to slide down and then slide up with CSS
I am trying to get the content inside the div with class="port" to slide down when I click on the item and then slide up when I click on the X button. Right now I can only figure out how to get the content to just show up (and then reposition to a certain spot on the page using JS). It is smooth when it shows up but doesn't slide down and I don't get any sliding when I close it by clicking on the X button.
I am trying to get this to work with CSS but maybe I need to use some JS or JQuery to make it work. I am just unsure! Thank you in advance!
// portfolio
$('.gallery .portfolio .portfolio-group a').click(function() {
var itemID = $(this).attr('href');
$('.gallery .portfolio').addClass('item_open');
$(itemID).addClass('item_open');
return false;
});
$('.close').click(function() {
$('.port, .gallery .portfolio').removeClass('item_open');
return false;
});
$(".gallery .portfolio .portfolio-group a").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#top").offset().top)
}, 400);
});* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
line-height: 1.5;
color: #333;
}
a {
color: #fff;
}
.row {
width: 100%;
max-width: 1170px;
margin: 0 auto;
padding: 0;
clear: both;
}
.row img {
max-width: 100%;
height: auto;
padding: 0;
margin: 0;
}
header {
background-color: #84b4b1;
color: #fff;
text-align: center;
padding: 30px 0 120px;
}
header h1 {
text-align: center;
text-transform: uppercase;
font-size: 65px;
font-weight: 400;
letter-spacing: 3px;
line-height: .8;
padding-top: 50px;
font-family: 'Montserrat', sans-serif;
}
header span {
text-transform: uppercase;
letter-spacing: 7px;
font-size: 25px;
line-height: 1;
}
header p {
padding-top: 30px;
}
.gallery {
padding: 40px 0 300px;
position: relative;
}
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
.gallery .portfolio {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
.gallery .portfolio .portfolio-group {
overflow: hidden;
}
.gallery .portfolio .portfolio-group a {
display: block;
position: relative;
width: 85%;
height: 100%;
margin: 0;
padding: 0;
line-height: 0;
}
@media (min-width: 40em) {
.gallery .portfolio .portfolio-group a {
width: 100%;
}
}
@media (min-width: 64em) {
.gallery .portfolio .portfolio-group a {
width: 100%;
}
}
.gallery .portfolio .portfolio-group a:before {
position: absolute;
width: 32px;
height: 32px;
top: 40%;
left: 50%;
margin: -14px 0 0 -16px;
background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asodipodi%3D%22http%3A//sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22%20xmlns%3Ainkscape%3D%22http%3A//www.inkscape.org/namespaces/inkscape%22%20inkscape%3Aversion%3D%220.48.4%20r9939%22%20sodipodi%3Adocname%3D%22icon-fullscreen.svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20960%20560%22%0A%09%20enable-background%3D%22new%200%200%20960%20560%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Csodipodi%3Anamedview%20%20borderopacity%3D%221%22%20pagecolor%3D%22%23ffffff%22%20bordercolor%3D%22%23666666%22%20objecttolerance%3D%2210%22%20gridtolerance%3D%2210%22%20guidetolerance%3D%2210%22%20showgrid%3D%22false%22%20fit-margin-top%3D%220%22%20fit-margin-left%3D%220%22%20inkscape%3Azoom%3D%227.375%22%20inkscape%3Acx%3D%22-5.1525424%22%20inkscape%3Acy%3D%2216%22%20id%3D%22namedview11%22%20inkscape%3Awindow-x%3D%22-8%22%20inkscape%3Awindow-y%3D%22-8%22%20fit-margin-right%3D%220%22%20inkscape%3Apageopacity%3D%220%22%20fit-margin-bottom%3D%220%22%20inkscape%3Awindow-width%3D%221366%22%20inkscape%3Awindow-height%3D%22706%22%20inkscape%3Awindow-maximized%3D%221%22%20inkscape%3Apageshadow%3D%222%22%20inkscape%3Acurrent-layer%3D%22svg2%22%3E%0A%09%3C/sodipodi%3Anamedview%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%22220%22%20y%3D%22260%22%20fill%3D%22%23FFFFFF%22%20width%3D%22536%22%20height%3D%2224%22/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%22476%22%20y%3D%224%22%20fill%3D%22%23FFFFFF%22%20width%3D%2224%22%20height%3D%22556%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A) no-repeat;
content: '';
opacity: 0;
z-index: 1;
-webkit-transition: all 0.3s, linear;
transition: all 0.3s, linear;
}
.gallery .portfolio .portfolio-group a:hover:before {
top: 50%;
opacity: 1;
}
.gallery .portfolio .portfolio-group a:after {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
content: '';
opacity: 0;
-webkit-transition: all 0.3s, linear;
transition: all 0.3s, linear;
}
.gallery .portfolio .portfolio-group a:hover:after {
opacity: 1;
}
.gallery .portfolio-item-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 5px;
}
@media (min-width: 64em) {
.gallery .portfolio-item-container {
grid-template-columns: repeat(2, 1fr);
}
}
.port {
position: absolute;
width: 100%;
top: 0;
left: 0;
padding-top: 100px;
background: #ffffff;
background-color: #fafafa;
z-index: 103;
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
border-bottom: 1px solid #d0d0d0;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94) 0s;
}
.port img {
width: 100%;
}
.port h1 {
font-size: 35px;
line-height: 1;
padding: 0;
}
.port h1 > * {
opacity: 0;
transition: all 0.5s, linear;
}
.port.item_open {
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
transition: all 2s, ease-in-out;
}
.port .item_open > * {
opacity: 1;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.close {
width: 21px;
height: 21px;
background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2021%2021%22%0A%09%20enable-background%3D%22new%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22layer1%22%20transform%3D%22translate%280%2C-1031.3622%29%22%3E%0A%09%3Cpath%20id%3D%22path2987%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M0%2C1031.4l21%2C21%22/%3E%0A%09%3Cpath%20id%3D%22path2989%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M21%2C1031.4l-21%2C21%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A%0A) no-repeat;
position: absolute;
right: 50px;
margin-top: 50px;
opacity: 0;
z-index: 1004;
transition: all 1s, ease-in-out;
}
.item_open .close {
opacity: 1;
top: 0px;
transition: all 2s, ease-in-out;
}
/*# sourceMappingURL=styles.css.map */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesAlt.css">
<title>Document</title>
</head>
<body translate="no" data-new-gr-c-s-check-loaded="8.896.0" data-gr-ext-installed="">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<header>
<h1>Portfolio Gallery</h1>
</header>
<div id="top"></div>
<!-- Projects -->
<section class="gallery clearfix">
<div class="row">
<div class="portfolio">
<a class="close" href="#"></a>
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3981307/lorena2.png" alt="">
</a>
</div> <!-- / div #1 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3892302/contact.png" alt="">
</a>
</div> <!-- / div #2 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4154721/dive--001.png" alt="">
</a>
</div> <!-- / div #3 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3695553/news.png" alt="">
</a>
</div> <!-- / div #4 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3695553/news.png" alt="">
</a>
</div> <!-- / div #5 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4360101/liberosis_--_12.png" alt="">
</a>
</div > <!-- / div #6 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3148799/technical-book.jpg" alt="">
</a>
</div> <!-- / div #7 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/2883479/cover.jpg" alt="">
</a>
</div> <!-- / div #8 -->
</div> <!-- / .portfolio -->
</div> <!-- / .row -->
<!-- Item 01-->
<div id="item01" class="port">
<div class="row">
<div class="description">
<h2>Item 01</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.
</div> <!-- / .description -->
<img src="https://cdn.dribbble.com/users/545884/screenshots/3981307/lorena2.png" alt="">
</div> <!-- / .row -->
</div> <!-- / #item01-->
<!-- Item 02-->
<div id="item02" class="port">
<div class="row">
<div class="portfolio-item-container">
<div class="description">
<h2>Item 02</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.
</div> <!-- / .description -->
<div class="portfolio-item">
<img src="dist/image/CAHQ-About-Us.jpg" alt="">
</div>
<div class="portfolio-item">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3981307/lorena2.png" alt="">
</div>
<div class="portfolio-item">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4360101/liberosis_--_12.png" alt="">
</div>
<div class="portfolio-item">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4360101/liberosis_--_12.png" alt="">
</div>
<div class="portfolio-item">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3981307/lorena2.png" alt="">
</div>
</div> <!-- / .portfolio-item-container -->
</div> <!-- / .row -->
</div> <!-- / #item02-->
</section>
<!-- / Projects -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="scriptAlt.js"></script>
</body>
</html>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|