We Keep Coding

CSS transition not responding

I'm new to using transitions and my transition is not responding. There must be something wrong with my code. I'm using cards on my site and I added a (mouseenter) to have the info on the card display when the mouse is hovered, it works but the transition is throwing an error there's probably something I'm not understanding, any help is appreciated!
<div class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
Link goes here
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>
.card{
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
background: lightgreen;
border: 2px solid black;
margin-left: 8px;
margin-bottom: 8px;
cursor: pointer;
}
.inner-card{
display: none;
}
.inner-card.active{
display: flex;
flex-direction: column;
justify-content: end;
background:rgba(255,165,0,0.5)
transition: all 400ms ease-in-out;
}
<script>
$(document).ready(function () {
$('.card').on('mouseenter', function () {
$(this).find(".inner-card").toggleClass('active');
});
$('.card').on('mouseleave', function () {
$(this).find(".inner-card").toggleClass('active');
});
});
</script>

As mentioned in my comment:
display
flex-direction
justify-content
are none-animatable CSS properties, as such transition and animation will have no effect, other animatable properties in the defintion are ignored.
This can be circumvented by transitioning between opacity: 0 and 1.
In the snippet, class .inner-card is defined as you normally would, but using opacity: 0 to 'hide' its content.
Selector .card:hover .inner-card {..} is introduced to control the transition to opacity: 1 without the need for JS.
To be complete, class .inner-card needs a transition for a smooth transition back to original when the cursor leaves the card.
.card{
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
background: lightgreen;
border: 2px solid black;
margin-left: 8px;
margin-bottom: 8px;
}
.inner-card{
display: flex;
flex-direction: column;
justify-content: end;
opacity: 0;
background-color: transparent;
transition: opacity 400ms ease-in-out, background-color 400ms ease-in-out;
}
.card:hover .inner-card {
cursor: pointer;
opacity: 1;
background-color:rgba(255,165,0,0.5);
transition: all 400ms ease-in-out;
}
<div class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
Link goes here
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>

If I understood correctly and you need the text to be presented during the review, then here it is.
.inner-card a{
color: inherit;
text-decoration: none;
text-decoration: underline;
}
.inner-card{
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
margin-left: 8px;
margin-top: 15px;
color: lightgreen;
background-color: lightgreen;
border: 2px solid black;
padding: 10px;
border-radius: 3px;
}
.inner-card:hover{
cursor: pointer;
color: black;
background: rgba(255,165,0,0.5);
}
<div class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
Link goes here
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>
This task can be done without js. Let me know if I misunderstood you.

Alignment of Image

I have the following code:
// Projects Script
document.addEventListener("DOMContentLoaded", function (event) {
// Select all the read more buttons and hidden contents
const readMoreButtons = document.querySelectorAll(".read-more"); const hiddenContents = document.querySelectorAll(".hidden");
// Now loop over the read more buttons
readMoreButtons.forEach((readMoreButton, index) => {
// Add onclick event listeners to all of them
readMoreButton.addEventListener("click", () => {
// Change content of read more button to read less based on the textContent
if (readMoreButton.textContent === "Read More") { readMoreButton.textContent = "Read Less"; }
else { readMoreButton.textContent = "Read More"; }
// Toggle class based on index
hiddenContents[index].classList.toggle("hidden");
})
})
})
#import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
color: white;
}
figure.snip1311 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
float: left;
overflow-y: auto;
overflow-x: hidden;
margin: 10px 1%;
min-width: 230px;
max-width: 360px;
max-height: 256px;
width: 500rem;
color: #ffffff;
text-align: left;
background-color: #07090c;
font-size: 16px;
-webkit-perspective: 50em;
perspective: 50em;
border: 3px solid #555;
}
figure.snip1311 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
figure.snip1311 img {
max-width: 110%;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
backface-visibility: hidden;
height: 258px;
}
figure.snip1311 figcaption {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: rotateX(90deg) translate(0%, -50%);
transform: rotateX(90deg) translate(0%, -50%);
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
z-index: 1;
opacity: 0;
padding: 0 30px;
}
figure.snip1311 h3,
figure.snip1311 p {
line-height: 1.5em;
}
figure.snip1311 h3 {
margin: 0;
font-weight: 800;
text-transform: uppercase;
}
figure.snip1311 p {
font-size: 0.8em;
font-weight: 500;
margin: 0 0 15px;
}
figure.snip1311 .read-more {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311 .read-more1 {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more1:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311:hover img,
figure.snip1311.hover img {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
opacity: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
}
figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
-webkit-transform: rotateX(0deg) translate(0, -50%);
transform: rotateX(0deg) translate(0, -50%);
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.hidden{
display:none;
}
.read-more{
cursor:pointer;
}
/* ScrollBar */
::-webkit-scrollbar {
width: 5px;
height: auto;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 3px transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwcNCA0NCA0HBwgIBw0HBwcHBw8ICQcNFREWFhUREx8YHSggGBoxJxMVITEhJSkrLi46Fx8zODMsNygtLisBCgoKDQ0NDw0NDisZFRkrKy0rKysrLTcrKystLTctLSsrKysrKysrKysrLS0rKysrNy0rLSstLSsrKysrKysrK//AABEIALwBDAMBIgACEQEDEQH/xAAaAAEBAQEBAQEAAAAAAAAAAAACAQMABwYF/8QAFhABAQEAAAAAAAAAAAAAAAAAAQAR/8QAGQEBAQEBAQEAAAAAAAAAAAAAAgABAwYF/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oADAMBAAIRAxEAPwD8HLsll2X23xNDLsllMpujlMnlMpuhlMnlEpuhlEnlEpugkUtMolFKzyiTSiWlrNKJNKZRSs0ilokUopQaJJKNFKCRSaUS0pWaRS0SKUUCLNi0cBik0i2lKCRSaRaOAxSbFooDGbTKOPs8pk8uy5vO6GUyeUym6GUy0ymU3WeXZPI5a3QyiTymUWhkW0SKU2UEok0ilFKDRJpG0pQSLaJFopWbFLRIpRygxSaRbSlBilokWilZsW0SLRygxZsUooDFmxbTjNozYtHAYzY0Ur7XLsnlMubzmhl2TymU3QymTymU3QymTymU3WaUSeUSi0IpNKWlKCRy0SKUUBIpNKJRSs0ok0i2lKCRZpFKKUEik0i0coRZtGijNi2iRS05WbGbFo4DFJsW0oCRZsWjgMUmxo4+4y7J5TLm81oZTJ5TKWhlMmlEotDKJPKJTZWaUSeUSilBIpNKJRSs0ok0jaUoJFtEilHGaUSaRSilBizYpacBik2LRQGLNItHAYs2LaUBizYtHGbFm0aOM2LNi2nAYzY0cfd5TJ5dlyeX0Mpk0plrdDIpaZRKLWeUSeUSi1nlEmlEopWaUSaRSilBIpNo0UrNItokW04zSjNi0UBg2jFo4DBtGLaUZsWbFo4DFJsWjgMWbFtOM2LNi0cBizYtpQGM2NHH32UyeXZcnltZ5TLRKJRazSmTSiU3WaUSaUbSlZsUtEilFKDFJpRKOVmkUtGCUUBIpaMGjgJFm0bTjNIs2LRQGLNItpwGDaMGjgMWbFo4DFmxbTjNizYtHAYs2LRQGE2Npx6FlMnlMuTymhlMnlEotZ5RJpRKbKzSKWiRSjlDIpNi2lKDFJpFo4CRSbFooDFmxaOM2LaMG04DFmxaOAxZsWjgMG0YNpwGLNg0cBizYtpQGLNi06RmxZsWigMWbG049EyiWmUS4vJazSiTSiUUrNIpaMW0pQSKTYtFKCRZpFo4CRZsW04zSLNi0cBizYtHAYNowaOAxZxbTgMWTFo4DFmxbTgMGbFo4DFkxaOAxZsW04DGTFo4DGbBtKPScok0olxeQ1mlEmkUopQSLNi0coJFmxbTgJBLRg0UBik2LRxmxZsW10gMWbBo4DFmxaOM2jJi2nAYs2DRwGLNi2nAYM2LRwGLJi0cFgzYtpwGDNi0cBjNjRx6WkUtEilxeOlBizYtpSgxZsWjjNizYtpwGDNi0cBg2jBo4DFmwbXSAxZsWjgMGbFo4DFkxbTgMWbBo4LBmxbTgMGbFo4DBmxaOCwZsG04LBmwadILGTGij09ik2LcXjYzYs2LRwGLJi2nAYM2LRwGLJi2nAYs2DTpAYs2DacBizYNHBYM2DTpBYM2DacFiyYtHAYsmLRwWDNg2nBYM2DRwWDNi2nAYsmLRwIsmLRx6iwZsG4vGQWDNg0cFgzYNrpBYM2DRwWDNg2nBYM2DTpBYM2DacFgzYNHBYM2DRwWDNg2nBYsmLTpBYM2DRwWDNg2nBYM2DRwWLJi2nAYsmLRwGLJi0cf/9k=);
border-radius: 10px;
}
<div class="project-container">
<figure class="snip1311"><img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94"/>
<figcaption>
<h3>Sample Text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu.</p>
<div class="read-more">Read More</div>
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu. Quisque vehicula porttitor ultrices. Curabitur urna velit, auctor eget dignissim nec, commodo congue metus. Pellentesque leo ante, ullamcorper sit amet ornare eleifend, fringilla a ligula. Phasellus congue magna vitae purus pretium dapibus. Etiam in erat magna.</p>
</figcaption>
</figure>
When you run the above code, see how the scrollbar is there on the box? I would like that to be hidden, but only appear after the user clicks the read more button. So, the expected output should be the scrollbar hidden on the box, but I would like the y-axis scrollbar to only appear after the user clicks read more button.
The way to accomplish that would be to remove the unnecessary space on the box. For example, I set the height of the image to 258 px because the whole box height is that, and so I wanted to remove the extra space so that the scrollbar does not appear. It should only appear after the user clicks read more button. Any suggestions?

Just make overflow-y hidden by default, and auto when toggled.
Get the scrolled-container of the button by closest* method, then toggle its class the same way you toggled the hiddenContents.
* closest nethod has 95.3% support rate as of today, so you may need an alternative, depends on your clients nature.
// Projects Script
document.addEventListener("DOMContentLoaded", function(event) {
// Select all the read more buttons and hidden contents
const readMoreButtons = document.querySelectorAll(".read-more");
const hiddenContents = document.querySelectorAll(".hidden");
// Now loop over the read more buttons
readMoreButtons.forEach((readMoreButton, index) => {
// Add onclick event listeners to all of them
readMoreButton.addEventListener("click", () => {
// Change content of read more button to read less based on the textContent
if (readMoreButton.textContent === "Read More") {
readMoreButton.textContent = "Read Less";
} else {
readMoreButton.textContent = "Read More";
}
// Toggle class based on index
hiddenContents[index].classList.toggle("hidden");
readMoreButton.closest(".snip1311").classList.toggle("reading");
})
})
})
#import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
color: white;
}
figure.snip1311.reading {
overflow-y: auto;
}
figure.snip1311 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
float: left;
overflow-x: hidden;
overflow-y: hidden;
margin: 10px 1%;
min-width: 230px;
max-width: 360px;
max-height: 256px;
width: 500rem;
color: #ffffff;
text-align: left;
background-color: #07090c;
font-size: 16px;
-webkit-perspective: 50em;
perspective: 50em;
border: 3px solid #555;
}
figure.snip1311 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
figure.snip1311 img {
max-width: 110%;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
backface-visibility: hidden;
height: 258px;
}
figure.snip1311 figcaption {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: rotateX(90deg) translate(0%, -50%);
transform: rotateX(90deg) translate(0%, -50%);
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
z-index: 1;
opacity: 0;
padding: 0 30px;
}
figure.snip1311 h3,
figure.snip1311 p {
line-height: 1.5em;
}
figure.snip1311 h3 {
margin: 0;
font-weight: 800;
text-transform: uppercase;
}
figure.snip1311 p {
font-size: 0.8em;
font-weight: 500;
margin: 0 0 15px;
}
figure.snip1311 .read-more {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311 .read-more1 {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more1:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311:hover img,
figure.snip1311.hover img {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
opacity: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
}
figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
-webkit-transform: rotateX(0deg) translate(0, -50%);
transform: rotateX(0deg) translate(0, -50%);
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.hidden {
display: none;
}
.read-more {
cursor: pointer;
}
/* ScrollBar */
::-webkit-scrollbar {
width: 5px;
height: auto;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 3px transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwcNCA0NCA0HBwgIBw0HBwcHBw8ICQcNFREWFhUREx8YHSggGBoxJxMVITEhJSkrLi46Fx8zODMsNygtLisBCgoKDQ0NDw0NDisZFRkrKy0rKysrLTcrKystLTctLSsrKysrKysrKysrLS0rKysrNy0rLSstLSsrKysrKysrK//AABEIALwBDAMBIgACEQEDEQH/xAAaAAEBAQEBAQEAAAAAAAAAAAACAQMABwYF/8QAFhABAQEAAAAAAAAAAAAAAAAAAQAR/8QAGQEBAQEBAQEAAAAAAAAAAAAAAgABAwYF/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oADAMBAAIRAxEAPwD8HLsll2X23xNDLsllMpujlMnlMpuhlMnlEpuhlEnlEpugkUtMolFKzyiTSiWlrNKJNKZRSs0ilokUopQaJJKNFKCRSaUS0pWaRS0SKUUCLNi0cBik0i2lKCRSaRaOAxSbFooDGbTKOPs8pk8uy5vO6GUyeUym6GUy0ymU3WeXZPI5a3QyiTymUWhkW0SKU2UEok0ilFKDRJpG0pQSLaJFopWbFLRIpRygxSaRbSlBilokWilZsW0SLRygxZsUooDFmxbTjNozYtHAYzY0Ur7XLsnlMubzmhl2TymU3QymTymU3QymTymU3WaUSeUSi0IpNKWlKCRy0SKUUBIpNKJRSs0ok0i2lKCRZpFKKUEik0i0coRZtGijNi2iRS05WbGbFo4DFJsW0oCRZsWjgMUmxo4+4y7J5TLm81oZTJ5TKWhlMmlEotDKJPKJTZWaUSeUSilBIpNKJRSs0ok0jaUoJFtEilHGaUSaRSilBizYpacBik2LRQGLNItHAYs2LaUBizYtHGbFm0aOM2LNi2nAYzY0cfd5TJ5dlyeX0Mpk0plrdDIpaZRKLWeUSeUSi1nlEmlEopWaUSaRSilBIpNo0UrNItokW04zSjNi0UBg2jFo4DBtGLaUZsWbFo4DFJsWjgMWbFtOM2LNi0cBizYtpQGM2NHH32UyeXZcnltZ5TLRKJRazSmTSiU3WaUSaUbSlZsUtEilFKDFJpRKOVmkUtGCUUBIpaMGjgJFm0bTjNIs2LRQGLNItpwGDaMGjgMWbFo4DFmxbTjNizYtHAYs2LRQGE2Npx6FlMnlMuTymhlMnlEotZ5RJpRKbKzSKWiRSjlDIpNi2lKDFJpFo4CRSbFooDFmxaOM2LaMG04DFmxaOAxZsWjgMG0YNpwGLNg0cBizYtpQGLNi06RmxZsWigMWbG049EyiWmUS4vJazSiTSiUUrNIpaMW0pQSKTYtFKCRZpFo4CRZsW04zSLNi0cBizYtHAYNowaOAxZxbTgMWTFo4DFmxbTgMGbFo4DFkxaOAxZsW04DGTFo4DGbBtKPScok0olxeQ1mlEmkUopQSLNi0coJFmxbTgJBLRg0UBik2LRxmxZsW10gMWbBo4DFmxaOM2jJi2nAYs2DRwGLNi2nAYM2LRwGLJi0cFgzYtpwGDNi0cBjNjRx6WkUtEilxeOlBizYtpSgxZsWjjNizYtpwGDNi0cBg2jBo4DFmwbXSAxZsWjgMGbFo4DFkxbTgMWbBo4LBmxbTgMGbFo4DBmxaOCwZsG04LBmwadILGTGij09ik2LcXjYzYs2LRwGLJi2nAYM2LRwGLJi2nAYs2DTpAYs2DacBizYNHBYM2DTpBYM2DacFiyYtHAYsmLRwWDNg2nBYM2DRwWDNi2nAYsmLRwIsmLRx6iwZsG4vGQWDNg0cFgzYNrpBYM2DRwWDNg2nBYM2DTpBYM2DacFgzYNHBYM2DRwWDNg2nBYsmLTpBYM2DRwWDNg2nBYM2DRwWLJi2nAYsmLRwGLJi0cf/9k=);
border-radius: 10px;
}
<div class="project-container">
<figure class="snip1311"><img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94" />
<figcaption>
<h3>Sample Text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu.</p>
<div class="read-more">Read More</div>
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu. Quisque vehicula porttitor ultrices. Curabitur
urna velit, auctor eget dignissim nec, commodo congue metus. Pellentesque leo ante, ullamcorper sit amet ornare eleifend, fringilla a ligula. Phasellus congue magna vitae purus pretium dapibus. Etiam in erat magna.</p>
</figcaption>
</figure>

Simple toggle of fade in/out not working with transitions, opacity and visibility

I'm trying, without using more javascript and CSS only, to figure out why clicking on one of the list items doesn't show the expanded text by fading it in and out rather than it just appearing immediately. The code uses a transition duration and then makes the expanded element visible.
I know you can't have a transition duration from hidden to visible, but you can on opacity - but it still doesn't transition.
Can someone explain what's going on here, and come up with preferably a non-javascript solution?
Thanks for any help here - find the code and codepen below:
let moduleDescriptions = document.querySelectorAll('.course-lesson');
for (let description of moduleDescriptions) {
description.addEventListener("click", function(){
description.classList.toggle("open");
description.querySelector('.expanded-description').classList.toggle("open");
});
}
.course-lesson {
flex-basis: 100%;
text-align: left;
padding: .5em;
margin: 2px 5px 0 5px;
background: #fff;
position: relative;
font-weight: 300;
transition-duration: 0.3s;
transition: 0.3s ease all;
}
course-lesson * {
transition-duration: 0.3s;
transition: 0.3s ease all;
}
.expanded-description.open {
display: block;
visibility: visible;
transition-duration: 0.3s;
opacity: 1;
transition: visibility 0.3s linear,opacity 0.3s linear;
}
/* Relevant code above */
.course-section {
list-style-type: none;
padding: 0;
background: #15a669;
display: flex;
flex-flow: row wrap;
}
.course-section:not(:first-of-type) {
margin-top: 25px;
}
.course-section h3 {
padding: .5em;
text-align: left;
font-size: 18px;
font-weight: 400;
flex-basis: 100%;
background: #15a669;
margin: 5px 5px 0 5px;
color: #fff;
}
.course-lesson:hover {
background: #f2f2f2;
cursor: pointer;
}
.course-lesson:first-of-type {
margin-top: 0;
}
.course-lesson:last-of-type {
margin-bottom: 5px;
}
.course-lesson.type-video:before {
content: '\f144';
font-family: FontAwesome;
margin-right: .5em;
}
.course-lesson.type-file:before {
content: '\f15c';
font-family: FontAwesome;
margin-right: .5em;
}
.course-lesson:after {
content: '\f0d7';
position: absolute;
right: .5em;
top: 50%;
transform: translate(-50%, -50%);
font-family: FontAwesome;
}
.course-lesson.open:after {
content: '\f0d8';
}
.expanded-description {
padding: .5em 1em 0 0;
display: none;
}
<ul class="course-section">
<h3>title</h3>
<li class="course-lesson type-video">Intro
<div class="expanded-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
<li class="course-lesson type-video">more info here
<div class="expanded-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
</ul>
Codepen: https://codepen.io/anon/pen/dxVzyX
Update: any ideas, anyone?

you are changing the display from none to block and transition will not work on it.
true code is :
`
.course-lesson {
flex-basis: 100%;
text-align: left;
padding: .5em;
margin: 2px 5px 0 5px;
background: #fff;
position: relative;
font-weight: 300;
transition-duration: 0.3s;
transition: 0.3s ease all;
height: 20px;
}
.expanded-description {
padding: .5em 1em 0 0;
opacity: 0;
visibility: hidden;
}
.course-lesson.open {
height: 70px;
}
`

Mouse-wheel & K/board Up/Down bullet navigation based on data-attribute using jQuery

I've a WordPress page that have a slider with pagination and a footer div.
Now, the pagination only contain class pagination & active, and each pagination options have unique data-page value.
May I know how can I make the mouse-wheel, kboard up/down & page-up/down button to navigate through the pagination without any external plugin. Also, when the pagination finish, if the user press down one more time, it will reveal the footer and no active class for the pagination.
Example like this https://causeeffect.asia/services/
Anyway, I can't replicate 100% because the slider is from WordPress plugin, but the codes below are basically what it looks like.
window.slide = new SlideNav();
body, html {
margin: 0;
padding: 0;
}
.section {
min-height: 800px;
position: relative;
text-align: center;
font-family: sans-serif, arial;
margin: 0;
}
h1, p {
margin: 0;
font-family: sans-serif, arial;
font-weight: bold;
}
.text-wr {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#section1 {
background: #5c53aa;
color: #8d86c3;
}
#section2 {
background: #4bbfc3;
color: #81d2d5;
}
#section3 {
background: #283044;
color: #686e7c;
}
#section4 {
background: #ebf5ee;
color: #aeb9b9;
}
h1 {
font-size: 50px;
margin-bottom: 25px;
}
.title-top {
font-size: 60px;
padding-bottom: 30px;
}
.title-bottom {
font-size: 30px;
}
.title-tx {
font-size: 20px;
opacity: 0.8;
}
.nav {
position: fixed; /*left: 50%;*/
width: 100%;
top: 20px;
z-index: 9;
padding-left: 10px;
}
.nav a {
padding: 7px 20px;
border-radius: 7px;
margin-right: 10px;
background: rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
text-decoration: none;
color: black;
font-family: sans-serif, arial;
font-weight: 100;
}
.nav a.active {
background: rgba(0, 0, 0, 0.5);
color: white;
}
.nav a:hover {
background: rgba(255, 255, 255, 0.7);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://qmixi.github.io/slide-nav/dist/slideNav.js"></script>
<div class="nav">
<nav>
Link to section 1
Link to section 2
Link to section 3
Link to section 4
</nav>
</div>
<div id="section1" class="section">
<div class="text-wr">
<h1 class="title">
<div class="title-top">Slide Nav Example</div>
<div class="title-tx">Created by Piotr Kumorek</div>
</h1>
</div>
</div>
<div id="section2" class="section">
<div class="text-wr">
<h1 class="title">Section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div id="section3" class="section">
<div class="text-wr">
<h1 class="title">Section 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div id="section4" class="section">
<div class="text-wr">
<h1 class="title">Section 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
<footer id="footer" class="section">
<div class="text-wr">
<h1 class="title">Footer Area</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</footer>

You can use jQuery keydown event for up/down/pageup/pagedown event and also can use mouse scroll as well. Check below code for keyboard keys like:
document.onkeydown = function(e) {
if (e.keyCode == 38 || e.keyCode == 33 ) {
//do your code here for slide next
} else if(e.keyCode == 40 || e.keyCode == 34) {
//do your code for slide pervious
}
}
And for mouse scroll, you can use below code referenced from: How can I determine the direction of a jQuery scroll event?
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});
Hope it helps you.

CSS3 arrow box like branch.com

I really like the arrowboxes on branch.com, example: http://tinyurl.com/lw5zlhu
How does one create arrowboxes with a timeline like branch.com?
I have done this so fare: http://jsfiddle.net/uFPEf/6/
HTML
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur adipiscing dignissim purus at adipiscing.
</p>
</div>
<div class="timeline">
<div class="line"></div>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur adipiscing dignissim purus at adipiscing.
</p>
</div>
<div class="timeline">
<div class="line"></div>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur adipiscing dignissim purus at adipiscing.
</p>
</div>
CSS
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif;
font-weight: 300;
padding:20px;
}
.item{
border-radius:3px;
padding:10px;
border: solid 1px #EEEEEE;
}
.item p {
color:#333333;
padding:20px;
}
.timeline {
width: 100%;
}
.line {
background: #EEEEEE;
height: 50px;
margin: 0 auto;
width: 2px;
}

You can use CSS' before and after elements. If you target directly where you want with absolute positioning, and give a white background, you can emulate it.
.item:before {
position: absolute;
top: -11px;
left: 50px;
-webkit-transform: rotate(45deg);
height: 20px;
width: 20px;
background: #fff;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
content: '';
}
.item:after {
position: absolute;
bottom: -11px;
left: 50px;
-webkit-transform: rotate(45deg);
height: 20px;
width: 20px;
background: #fff;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
content: '';
}
http://jsfiddle.net/uFPEf/7/

Here is a pure CSS solution
it may be better to use a image though.
HTML:
<div id="box"></div>
CSS:
#box{
width:200px;
height:200px;
background:#EEE;
box-shadow: 0px 0px 2px #999;
margin:50px;
position:relative; /* This makes sure the ::after is absolute to this element */
}
#box:after{
content:''; /* Content is required on all ::before & ::after */
width:22px;
height:22px;
background:#FFF;
border-top: 1px solid #C2C1C1; /* 3D'ish effect */
border-left:1px solid #C2C1C1;
position:absolute;
bottom:-12px; /* Half the height of the square */
left:15px;
-webkit-transform: rotate(45deg); /* rotate 45deg to fake a triangle */
}
Demo