We Keep Coding

How to Limit Elements on a Screen?

I have 4 boxes, (which will later be 9), in which I want there to be a total of 3 on screen at all times, excluding mobile. The remainder who are not on screen will be moved to the right end of the box line, but be unseen. I have looked around for a method to accomplish this via HTML & CSS and have found none. Is there a way to do this with HTML, CSS, or JS?
.bioSlider {
position: relative;
display: flex;
justify-content: center;
overflow: hidden;
}
.box {
position: relative;
display: inline-block;
width: 390px;
padding: 10px;
}
.slideImage {
position: relative;
height: 300px;
}
.slideImage img {
object-fit: cover;
box-sizing: border-box;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #000000;
opacity: 0;
transition: 0.6s ease-in-out;
}
.quoteText {
position: absolute;
text-align: left;
font-style: italic;
word-break: break-all;
padding: 30px;
top: 30px;
color: #e5e5e5;
opacity: 0;
transition: 0.6s ease-in-out;
}
.detailBox {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 100%;
padding: 9px;
background-color: #e8e8e8;
}
.slideImage:hover .overlay {
opacity: 50%;
}
.slideImage:hover .quoteText {
opacity: 100%;
}
<div>
<!-- Cadet Slider -->
<ul class='bioSlider'>
<li class='cadetOne'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Red_Card.png' alt=''>
<div class='overlay'> </div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion CDR <br> LTC Chase Hinson</h3>
</div>
</div>
</div>
</li>
<li class='cadetTwo'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Yellow_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion XO <br> MAJ Grayson Akins</h3>
</div>
</div>
</div>
</li>
<li class='cadetThree'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Blue_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion NCO <br> CSM Janecia Bass</h3>
</div>
</div>
</div>
</li>
<li class='cadetFour'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Green_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion S1 <br> CPT Lauren Newton</h3>
</div>
</div>
</div>
</li>
</ul>
</div>

Menu-link only works on index.html and no other page

For some reason my menu link doesn't work on any other page except for the index page. I think its a problem within JavaScript but I'm not quite sure. The HTML navigation section of the page not working is the exact same as the code for index.html. Here is the CSS
.list-menu {
position: fixed;
visibility: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999999;
background: rgba(0, 0, 0, 0.9);
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
opacity: 0;
z-index: -1;
}
.list-menu.reveal-modal {
opacity: 1;
z-index: 999999;
visibility: visible;
}
.list-menu .ion-close-round {
font-size: 31px;
position: absolute;
top: 32px;
right: 32px;
color: #fff;
cursor: pointer;
}
.circle {
width: 45px;
height: 45px;
text-align: center;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -40px;
border-radius: 50%;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
cursor: pointer;
z-index:99 ;
padding: 0px 0 0;
}
.circle i {
font-size: 36px;
color: #111112;
}
.circle.dark {
border-color: #292929;
}
.circle.dark:before {
border-color: transparent transparent transparent #292929;
}
.circle.large {
height: 120px;
width: 120px;
margin-top: -60px;
margin-left: -60px;
}
.circle.large:before {
margin-top: -18px;
margin-left: -10px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 31.0px;
border-color: transparent transparent transparent #ffffff;
}
.circle.large.dark:before {
border-color: transparent transparent transparent #292929;
}
.circle.inline {
position: relative;
top: 0;
left: 0;
margin-top: 0;
margin-left: 0;
display: inline-block;
z-index: 0;
}
#media all and (max-width: 1000px) {
.circle.large {
width: 90px;
height: 90px;
margin-top: -45px
;
}
.circle.large:before {
margin-top: -14px;
margin-left: -8px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 25.0px;
border-color: transparent transparent transparent #fff;
}
}
and the JavaScript.
$(document).ready(function(){
"use strict";
$('.menu-container').each(function(index) {
$(this).find('.circle').attr('menu-link', index);
$(this).find('.list-menu').clone().appendTo('body').attr('menu-link', index);
});
$('.menu-container .circle').click(function() {
var linkedVideo = $('section').closest('body').find('.list-menu[menu-link="' + $(this).attr('menu-link') + '"]');
linkedVideo.toggleClass('reveal-modal');
});
$('section').closest('body').find('.close-iframe').click(function() {
$(this).closest('.list-menu').toggleClass('reveal-modal');
});
Here is what the popup is supposed to look like. https://imgur.com/a/pyq9zis
I've been trying to fix for a while but can't seem to find a fix.
Here is also the html for both index.html and hotelam.html
First index
<!-- Navigation section ()
================================================== -->
<div class="nav-container">
<nav class="nav-inner transparent">
<div class="navbar">
<div class="container">
<div class="row">
<div class="brand">
<a href="home.html">
<img src="images/Logo4.png" ></a>
</a>
</div>
<div class="navicon">
<div class="menu-container">
<div class="circle dark inline">
<i class="icon ion-navicon"></i>
</div>
<div class="list-menu">
<i class="icon ion-close-round close-iframe"></i>
<div class="intro-inner">
<ul id="nav-menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
Second Hotelam.html
<!-- Navigation section
================================================== -->
<div class="nav-container">
<nav class="nav-inner transparent">
<div class="navbar">
<div class="color9">
<div class="container">
<div class="row">
<div class="brand2">
<a href="home.html">
<img src="images/brandl.png" ></a>
</a>
</div>
<div class="navicon">
<div class="menu-container">
<div class="circle dark inline">
<i class="icon ion-navicon"></i>
</div>
<div class="list-menu">
<i class="icon ion-close-round close-iframe"></i>
<div class="intro-inner">
<ul id="nav-menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>

How Would I change the peeking effect from hover to scroll

I have implemented the peeking effect into my website.
Here it is http://jsfiddle.net/7yrWL/1/
Now this is working and peeks when ever I hover over the image, Now what I simply want is this effect work only if we scroll to this section. Means the container peeks out over scroll only but a click.
Any idea anyone?
Thank you
<div class="main square">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Test peek test peek<br/>Test peek</p>
<h3>MORE TESTING</h3>
</div>
</div>
</div>
</div>
<div class="main">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<h3>MORE<br/>Peek</h3>
</div>
</div>
</div>
</div>
<div class="main large">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
</div>
</div>
</div>
</div>
.main { padding: 10px; overflow: hidden; background-color: orange; color: white; height: 300px; width: 300px; display: inline-block; }
.main > div { position: relative; background-color: red; height: 100%; }
.main .content { position: absolute; bottom: 0; padding: 10px; right: 0; left: 0; }
.main .peek { max-height: 0; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; transition: max-height: 1s; background-color: green; overflow:hidden; }
.main:hover .peek { max-height: 300px; } /* any way to make this 100% so it can fit any size? */
.main.large { height: 600px; width: 600px; }

$(window).scroll(function() {
scrollEffect();
});
function scrollEffect() {
$('.main').each(function(i) {
if ($(this).position().top <= $(window).scrollTop()) {
$(this).addClass('effect');
}
});
}
.main { padding: 10px; overflow: hidden; background-color: orange; color: white; height: 300px; width: 300px; display: inline-block; }
.main > div { position: relative; background-color: red; height: 100%; }
.main .content { position: absolute; bottom: 0; padding: 10px; right: 0; left: 0; }
.main .peek { max-height: 0; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; transition: max-height: 1s; background-color: green; overflow:hidden; }
.main.effect .peek, .main:hover .peek { max-height: 300px; } /* any way to make this 100% so it can fit any size? */
.main.large { height: 600px; width: 600px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main square">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Test peek test peek<br/>Test peek</p>
<h3>MORE TESTING</h3>
</div>
</div>
</div>
</div>
<div class="main">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<h3>MORE<br/>Peek</h3>
</div>
</div>
</div>
</div>
<div class="main large">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
</div>
</div>
</div>
</div>
Add an .main.effect .peek class for main, which has the same effect as .main:hover .peek, and then add an effect class to each main div that enters the visible area in the scroll event.

Show div on hover on same position

I am trying to show div on mouseover, but it's flickering, how do I show/hide without any jerk and smooth with the transition?
I have tried the fade in/out using jquery as well but still blinking.
Here is the code
body {
margin: 0;
}
.row {
float: left;
width: 100%;
}
.col {
float: left;
width: 25%;
position: relative;
margin: 0 10px 0 0;
}
.front {
width: 100%;
height: 300px;
background-color: #999
}
.back {
position: absolute;
left: 0;
top: 0;
height: 300px;
opacity: 0;
visibility: hidden;
background-color: #ff0;
z-index: 2;
width: 100%;
}
.front:hover + .back {
opacity: 1;
visibility: visible;
}
<div class="row">
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
</div>

It flickers because every time .back becomes visible, hover on .front is no longer valid. To solve for this you can set visibility of .back as visible on .back:hover which can be done by using the same css style for .back:hover as for .front:hover + .back
body {
margin: 0;
}
.row {
float: left;
width: 100%;
}
.col {
float: left;
width: 25%;
position: relative;
margin: 0 10px 0 0;
}
.front {
width: 100%;
height: 300px;
background-color: #999
}
.back {
position: absolute;
left: 0;
top: 0;
height: 300px;
opacity: 0;
visibility: hidden;
background-color: #ff0;
z-index: 2;
width: 100%;
}
.front:hover + .back,
.back:hover {
opacity: 1;
visibility: visible;
}
<div class="row">
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
</div>

body {
margin: 0;
}
.row {
float: left;
width: 100%;
}
.col {
float: left;
width: 25%;
position: relative;
margin: 0 10px 0 0;
}
.front {
width: 100%;
height: 300px;
background-color: #999
}
.back {
position: absolute;
left: 0;
top: 0;
height: 300px;
opacity: 0;
visibility: hidden;
background-color: #ff0;
z-index: 2;
width: 100%;
}
.col:hover > .back {
opacity: 1;
visibility: visible;
}
<div class="row">
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
</div>
.col:hover > .back {
opacity: 1;
visibility: visible;
}
I have a simple solution.
Change .front:hover + .back => .col:hover > .back.

The problem is that when you hover .front div the .back div appears, so now you're hovering the .back div not the .front so it disappears again, and the loop continues.
To fix this, add the hover effect to the .back div too.
Add transition to .back for smooth effect.
body {
margin: 0;
}
.row {
float: left;
width: 100%;
}
.col {
float: left;
width: 25%;
position: relative;
margin: 0 10px 0 0;
}
.front {
width: 100%;
height: 300px;
background-color: #999
}
.back {
position: absolute;
left: 0;
top: 0;
height: 300px;
opacity: 0;
visibility: hidden;
background-color: #ff0;
z-index: 2;
width: 100%;
transition: 0.2s ease;
}
.front:hover + .back, .back:hover {
opacity: 1;
visibility: visible;
}
<div class="row">
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
<div class="col">
<div class="front">This is front div</div>
<div class="back">This is back div</div>
</div>
</div>

What if you put .back element inside .col element, move .front element styles to .col element and add transition to .col element? I think it's a better solution in view of browsers support.
body {
margin: 0;
}
.row {
float: left;
width: 100%;
}
.col {
float: left;
width: 25%;
position: relative;
margin: 0 10px 0 0;
height: 300px;
background-color: #999
}
.back {
position: absolute;
left: 0;
top: 0;
height: 300px;
opacity: 0;
visibility: hidden;
background-color: #ff0;
z-index: 2;
width: 100%;
transition: all 0.2s;
}
.col:hover .back {
opacity: 1;
visibility: visible;
}
<div class="row">
<div class="col">
This is front part
<div class="back">This is back part</div>
</div>
<div class="col">
This is front part
<div class="back">This is back part</div>
</div>
<div class="col">
This is front part
<div class="back">This is back part</div>
</div>
</div>

The main problem is that you have not been able to tell who really "shoots" the "animation".
Both front and back are at the same level, so it is not possible to do it from that level, but if you shoot it through the parent element, it should work.
The approach would be as follows:
.col:hover .back {
opacity: 1;
visibility: visible;
}

How to make fade in on hover?

I'm trying to make some text fade in over an image on hover over the div container. Just to give you a precise example here is what I'm looking for: http://outgrow.me/.
Here is my HTML as it stands:
<div class="project-boxes">
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
</div>
My CSS:
/**********************
*****PROJECT BOXES*****
**********************/
.project-boxes {
margin: 0 3%;
}
.box {
padding: 2.5%;
width: 20%;
height: 120px;
margin: 2% 3.9999999999999999999%;
float: left;
border: 1px solid #BABABA;
border-radius: 5px;
}
.box h3 {
color: #3F7250;
}
I don't have any javascript or jquery for this yet but would like to implement some in my project. Feel free to share this with me on a fiddle or something. Thanks.

You can use jQuery to target the hover event and fade in the description.
$('.box a').hover(function() {
$(this).find('.desc').fadeIn(500);
}, function() {
$(this).find('.desc').fadeOut(500);
});
.box {
position: relative;
}
.box .desc {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
background: rgba(255, 255, 255, 0.5);
}
<div class="box">
<a href="project1.html">
<img src="http://placehold.it/150x150" />
<div class="desc">
<h3>Project 1</h3>
<p>Description</p>
</div>
</a>
</div>
jsFiddle

Without JQuery:
<div class="box">
<a href="project1.html">
<div class='text'>
<h3>Project 1</h3>
<p>Description</p>
</div>
<img src="../img/project1.png">
</a>
</div>
CSS:
.box {
position: relative;
...
}
.box .text {
position: absolute;
z-index = 1;
}
.box img {
position: absolute;
z-index = 2;
opacity: 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.box img:hover {
opacity: 0.2;
transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
}

No need for JS. Use plain CSS and :hover
/* SIMPLY ADD THIS TO YOUR CSS */
.box img ~ *{
opacity:0;
transition:0.3s;
}
.box:hover img ~ *{
opacity:1;
}
.project-boxes {
margin: 0 3%;
}
.box {
padding: 2.5%;
width: 20%;
height: 120px;
margin: 2% 3.9999999999999999999%;
float: left;
border: 1px solid #BABABA;
border-radius: 5px;
}
.box h3 {
color: #3F7250;
}
.box img ~ *{ /* ADD THIS */
opacity:0;
transition:0.3s;
}
.box:hover img ~ *{ /* AND THIS */
opacity:1;
}
<div class="project-boxes">
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
</div>

Doing this on javascript would be more complicated that to do it with jquery or CSS.
but, still if you want javascript so badly here :
// fade out
function fadeOut(el) {
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .1) < 0) {
el.style.display = 'none';
el.classList.add('is-hidden');
} else {
requestAnimationFrame(fade);
}
})();
}
// fade in
function fadeIn(el, display) {
if (el.classList.contains('is-hidden')) {
el.classList.remove('is-hidden');
}
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
}
var btn = document.querySelector('.js-btn');
var el = document.querySelector('.js-fade');
btn.addEventListener('click', function(e) {
if (el.classList.contains('is-hidden')) {
fadeIn(el);
} else {
fadeOut(el);
}
});
.is-hidden {
display: none;
}
.btn {
background: #ccc;
border-radius: 3px;
display: inline-block;
padding: 5px;
}
body {
padding: 40px;
}
<span class="js-btn btn">Click me</span>
<div class='js-fade is-hidden'>You look amazing!</div>