Overlap issue in html card

Overlap issue in html card - javascript

In my website, there are three columns using bootstrap which hold images. Each image has button center of the image. I have added a dialog which I want to show when a user clicks on a button in an image. But the dialog window explores on the backside of columns that is images. I want to show dialog over my contents on the whole page. Please, any one help me to fix this.
Here I have attached my codes
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" type = "text/css" href = "hover.css">
<link rel = "stylesheet" type = "text/css" href = "dialogue.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin:43px;
height:70%
}
.img {
height:350px;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/7aam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
<span class="button fa fa-play fa-2x"></span>
<div>surya, shruti hasan</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/1000il.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Karthi, Andriya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/NK.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Arya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</br>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/bahu.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Prabas, Anushka</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/raam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Jeeva, Saranya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/sivaji.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Rajini, Shreya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</div> <!--container div-->
</body>
</html>
Dialogue.css
body {
font-family: Arial, sans-serif;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Hover.css
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
preview on Plunker

Your problem is z-index issue just increase it for .overlay like below:
.overlay {
z-index: 999;
}
Here is a working JSfiddle.

Related

Whitespace randomly appeared in site

I am building a website to showcase my future projects. But a whitespace randomly appeared on the site. When I inspect the site in chrome, the space does not seem to belong to any element. The space is between the banner and container-fluid from bootstrap. But when I add an extra div between the banner and container-fluid, the space seems to be on top of the container-fluid rather than below the banner.
Another problem I wanted to solve was, how can I make the text "Coming Soon" disappear when I hover over the images. I tried using "+" and "~" but it doesn't seem to work.
Any help or ideas would be very much appreciated! :)
Here is the code.
const navSlide = () => {
const burgerMenu = document.querySelector(".burger");
const nav = document.querySelector(".navbar-nav");
const navlinks = document.querySelectorAll(".navbar-nav li");
burgerMenu.addEventListener("click", function () {
// Toggle drop down menu
nav.classList.toggle("mobilenav-active");
// Increase links' opacity
navlinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `linkSlide 0.5s ease forwards ${
index / 7 + 0.5
}s`;
}
});
// Toggle burger to cross animation
burgerMenu.classList.toggle("toggle");
});
};
navSlide();
#import url("https://fonts.googleapis.com/css2?family=Oswald:wght#700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Montaga&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght#600&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Slab&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.site {
overflow-x: hidden;
/* Unnecessary IMHO, uncomment next line to force hidden behavior */
/* overflow-x: hidden !important; */
/* Additional tunning proposed by the community */
position: relative;
width: 100%;
}
button {
outline: none !important;
}
/*NAVIGATION BAR*/
header {
position: absolute;
z-index: 10;
width: 100%;
padding: 25px 5%;
}
.navbar-nav {
flex-direction: row;
}
.navbar-brand {
font-family: "Oswald", sans-serif;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.2px;
color: rgba(202, 210, 197, 1);
text-shadow: 1px 1px 3px black;
margin-right: 0;
}
.navbar-brand:hover {
color: rgba(202, 210, 197, 1);
}
.nav-item,
.nav-link {
font-size: 1.05em;
text-transform: uppercase;
font-weight: 800;
margin-right: 20px;
color: #cad2c5;
text-shadow: 1px 1px 5px black;
font-family: "Montaga", serif;
letter-spacing: 1px;
transition: all 0.5s;
}
.nav-link:hover {
background: #2f3e46;
color: #cad2c5;
}
#navbutton {
font-size: 1.05em;
text-transform: capitalize;
font-weight: 500;
font-family: "Montaga", serif;
letter-spacing: 1px;
padding: 9px 25px;
background: #cad2c5;
border: none;
border-radius: 50px;
transition: all 0.5s;
margin-left: 10px;
}
#navbutton:hover {
background: #2f3e46;
color: #cad2c5;
}
.burger div {
width: 25px;
height: 3px;
background: #cad2c5;
margin: 5px;
border-radius: 3px;
transition: all 0.3s ease;
}
.burger {
display: none;
}
/* Make from burger icon to X icon */
.toggle #line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle #line2 {
opacity: 0;
}
.toggle #line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
/* Animation for links */
#keyframes linkSlide {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*BANNER*/
.banner {
position: relative;
background: linear-gradient(rgba(24, 25, 26, 0.4), rgba(24, 25, 26, 0.4)),
url("../images/projects/banner-img.jpg") center/cover no-repeat fixed;
background-position: 50% 60%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#banner-text {
font-size: 6rem;
color: rgb(202, 210, 197);
letter-spacing: 2px;
text-shadow: 1px 1px 10px black;
font-family: "Dancing Script", cursive;
}
/* Mobile */
#media screen and (max-width: 992px) {
body {
overflow-x: hidden;
}
.navbar-nav {
position: absolute;
height: calc(95vh - 80px);
right: 0;
width: 100%;
top: 80px;
background: #354f52;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 100px 0px;
opacity: 0;
transform: translateX(100%);
transition: all 0.5s ease-in;
}
.nav-item,
.nav-link {
margin-right: 0;
text-shadow: none;
}
.navbar-nav li a:hover {
color: #354f52;
background: #edf0f1;
padding: 10px 20px;
text-shadow: none;
}
.nav-item {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
.navbar-nav.mobilenav-active {
transform: translateX(0%);
opacity: 0.96;
}
#navbutton {
margin-left: 0;
}
#banner-text {
font-size: 5rem;
}
}
.transition {
width: 100vw;
height: 50px;
background: #000;
}
/*IMAGE GALLERY*/
.container-fluid {
background: rgb(47,62,70);
background: radial-gradient(circle, rgba(47,62,70,1) 0%, rgba(132,169,140,1) 100%);
}
.item {
transition: all 0.5s ease-in-out;
position: relative;
text-align: center;
color: white;
}
.item img {
filter: brightness(50%);
transition: all 0.3s ease-in-out;
}
.item img:hover {
filter: brightness(100%);
}
.img-center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Oswald", sans-serif;
font-weight: 500;
font-size: 2.5rem;
color: #f5f5f5;
text-shadow: 1px 1px 2px black;
transition: all 0.3s ease-in-out;
}
/*FOOTER*/
footer {
display: flex;
flex-flow: row wrap;
padding: 60px 50px 20px 50px;
background: #2f3e46;
line-height: 1.5;
font-family: "Poppins", sans-serif;
}
.footer {
margin: auto;
position: relative;
}
.footer-container {
position: absolute;
margin: 0;
padding: 0;
top: 50%;
transform: translateY(-50%);
}
#logo {
margin: 0;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.2px;
color: rgba(202, 210, 197, 1);
}
.footer > * {
flex: 1 100%;
}
.footer-col-left {
margin-right: 1.25em;
margin-bottom: 2em;
}
.footer-col-right h4 {
font-size: 20px;
color: #cad2c5;
margin-bottom: 35px;
text-transform: capitalize;
font-family: "Poppins", sans-serif;
font-weight: 500;
position: relative;
}
.footer-col-right h4::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
background: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer ul {
list-style: none;
padding-left: 0;
}
.footer-col-right ul li:not(:last-child) {
margin-bottom: 10px;
}
.box li a,
.box li p {
font-size: 16px;
color: #f5f5f5;
text-decoration: none;
font-weight: 300;
display: block;
font-family: "Roboto Slab", serif;
transition: all 0.3s ease;
}
.footer-col-right ul li a:hover {
color: #cad2c5;
padding-left: 10px;
}
.footer a {
text-decoration: none;
}
.footer-col-right {
display: flex;
flex-flow: row wrap;
}
.footer-col-right > * {
flex: 1 50%;
margin-right: 1.25em;
}
.footer-row-bot {
text-align: center;
color: #cad2c5;
padding-top: 45px;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 14px;
}
.footer-col-left p {
padding-right: 20%;
}
.footer-col-left .socials a {
display: inline-block;
height: 40px;
width: 40px;
background: #52796f;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: rgba(202, 210, 197, 1);
transition: all 0.5s ease;
}
.socials {
padding-top: 5px;
}
.footer-col-left .socials a:hover {
background: rgba(202, 210, 197, 1);
color: #52796f;
}
#media screen and (max-width: 780px) {
footer {
padding: 60px 10px 20px 10px;
}
}
#media screen and (min-width: 700px) {
.footer-col-right > * {
flex: 1;
}
.footer-col-left {
flex: 1 0px;
}
.footer-col-right {
flex: 2 0px;
}
}
#media screen and (max-width: 700px) {
.footer {
padding: 15px;
}
.footer-container {
position: absolute;
margin-top: 30px;
padding: 0;
top: 0;
transform: translateY(0);
}
.footer-col-right {
margin-top: 75px;
}
.footer-col-right h4 {
margin-top: 50px;
}
}
<!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" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<link href="./css/project-style.css" rel="stylesheet" />
<link rel="shortcut icon" href="./images/fav.ico" type="image/x-icon" />
<title>Projects -BWS</title>
</head>
<body>
<div class="site">
<header>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand navbar-left" href="index.html">BrianWyann</a>
<ul class="navbar-nav navbar-light ml-lg-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.html"
>Home<span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./project.html">Projects</a>
</li>
</ul>
<div class="burger navbar-center">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
<a href="./contact.html" id="contact">
<button id="navbutton">Contacts</button>
</a>
</nav>
</header>
<section class="banner">
<h1 id="banner-text">My Creations</h1>
</section>
<div class="transition"></div>
<div class="container-fluid">
<div class="row mt-4">
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img1.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img1.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img2.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img2.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img3.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img3.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img4.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img4.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img5.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img5.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img6.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img6.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img7.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img7.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img8.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img8.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img9.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img9.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-col-left">
<div class="footer-container">
<a id="logobutton" href="index.html">
<h4 id="logo">BrianWyann</h4>
</a>
<div class="socials">
<a href="https://www.facebook.com/" target="blank"
><i class="fab fa-facebook-f"></i
></a>
<a href="https://twitter.com/" target="blank"
><i class="fab fa-twitter"></i
></a>
<a href="https://www.instagram.com/" target="blank"
><i class="fab fa-instagram"></i
></a>
<a href="https://www.linkedin.com/feed/" target="blank"
><i class="fab fa-linkedin-in"></i
></a>
</div>
</div>
</div>
<ul class="footer-col-right">
<li>
<h4>Myself</h4>
<ul class="box">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contacts</li>
</ul>
</li>
<li class="mooc">
<h4>MOOCs</h4>
<ul class="box">
<li>edX</li>
<li>
Coursera
</li>
<li>
<a href="https://www.futurelearn.com/" target="blank"
>FutureLearn</a
>
</li>
<li>
<a href="https://cognitiveclass.ai/" target="blank"
>CognitiveClass</a
>
</li>
</ul>
</li>
<li>
<h4>Address</h4>
<ul class="box">
<li>
<p>
C 29, Perumahan Sunter Mediterania, 14340, North Jakarta City,
Jakarta, Indonesia
</p>
</li>
</ul>
</li>
</ul>
<div class="footer-row-bot">
<p>All right reserved by ©wyannbrian 2020</p>
</div>
</footer>
<script src="./js/app.js"></script>
</div>
</body>
</html>

There is a setting with !important for margin-top buried in an SCSS file.
.mt-4, .my-4 {
margin-top: 1.5rem!important;
}
To override it for just this one instance (so as not to disturb its usage anywhere else if used) introduce this inline style:
<div class="transition"></div>
<div class="container-fluid">
<div class="row mt-4" style="margin-top: 0 !important;">

Solution for whitespace: Remove margin-top styling applied to the div class="row mt-4" inside div class="container-fluid".
.mt-4 {
margin-top: 1.5rem!important; /*remove this*/
}

Search bar seems to be acting as if its position is sticky but I have it set to fixed yet it still moves down when I scroll

NOTE: TO VIEW SEARCH BAR BE SURE TO OPEN THE SNIPPET IN FULL SCREEN
Can someone help me fix this search button so that it doesnt move down the screen when I scroll.
I have it set to position: fixed but for some reason its still scrolling down.
Here is my website so far and I have the search bar on the far right corner. See snippet below (also please view it in full screen to see the search bar properly):
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allerta&display=swap" rel="stylesheet">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
}
.third-level-menu {
position: absolute;
top: 0;
right: -190px;
width: 190px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 45px;
background-color: #6640C1;
background: #6640C1;
}
.third-level-menu>li:hover {
background-color: gold;
}
.second-level-menu {
position: absolute;
top: 45px;
left: 0;
width: 100%;
/* width: 273.2px; */
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu>li {
position: relative;
height: 45px;
background-color: #6640C1;
background: #6640C1;
width: 100%;
}
.second-level-menu>li:hover {
background-color: gold;
}
.top-level-menu {
display: flex;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100px;
z-index: 1;
justify-content: space-between;
}
.top-level-menu>li {
position: relative;
height: 30px;
/* width: 273.2px; */
background: #6640C1;
z-index: 2;
text-align: center;
flex: 1;
}
.top-level-menu>li:hover {
background-color: gold !important;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font-family: 'Fjalla One', sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
background: #6640C1;
/* Make the link cover the entire list item-container */
display: block;
line-height: 45px;
}
.top-level-menu a:hover {
color: #000000;
background-color: gold;
}
.container1 {
max-width: 1200px;
margin: auto;
background-color: white;
overflow: auto;
}
.gallery {
margin: 5px;
border: 5px solid black;
border-radius: 5%;
float: left;
width: 390px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 5%;
}
.gallery:hover {
transform: scale(1.03);
}
.desc {
padding: 15px;
text-align: center;
font-family: 'Fjalla One', sans-serif;
;
}
#main-title {
font-family: 'Alfa Slab One', cursive;
color: black;
font-size: 60px;
margin: 20px;
padding: 30px;
position: relative;
bottom: -20px;
background-color: transparent;
display: inline-block;
text-align: center;
}
.footer {
background-color: black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 100%;
color: white;
height: 300px;
}
.footer a {
text-decoration: none;
color: white;
}
.container2 {
max-width: 1500px;
margin: auto;
overflow: auto;
}
.container-top {
position: fixed;
background-color: gold;
top: 0;
width: 100%;
height: 10%;
z-index: 1;
text-align: center;
}
.top {
display: inline-block;
font-family: 'Permanent Marker', cursive;
font-size: 30px;
width: 100%;
margin: -20px;
z-index: 1;
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
object-fit: cover;
width: 100%;
}
.moving-images {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: auto;
position: relative;
margin-top: -4%;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 2px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
.arrow {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
align-items: center;
}
.arrow i:hover {
color: black;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.title-block {
position: relative;
background-color: white;
font-family: 'Alfa Slab One', cursive;
width: 100%;
color: black;
margin: 50px 0 0 0px;
height: 20px;
text-decoration: none;
}
:root {
--line-thickness: 0.1em;
--glass-size: 50%;
--icon-height: 2.5rem;
--transition-speed: 0.15s;
--timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
--icon-color: black;
}
/* this is already done */
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
background-repeat: no-repeat;
background-attachment: fixed;
}
.search-icon {
box-sizing: border-box;
width: 30px;
height: 30px;
max-width: 20em;
transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
position: fixed;
top: 0;
right: 0;
bottom: 400px;
left: 0;
margin: auto;
border: solid var(--line-thickness);
border-color: rgba(255, 255, 255, 0);
border-radius: 100px;
padding: 0.25em;
}
.search-icon__wrapper {
width: var(--icon-height);
height: var(--icon-height);
position: absolute;
border-radius: 100px;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
transform: rotate(-45deg);
transition: all 0 linear;
}
.search-icon__wrapper:hover {
cursor: pointer;
}
.search-icon__input {
background: none;
text-align: center;
outline: none;
display: block;
border: none;
background: rgba(255, 255, 255, 0);
width: calc(90% - (var(--icon-height) / 2 + 1rem));
margin-right: 6rem;
height: 100%;
border-radius: 100px;
transition: all var(--transition-speed) linear;
font-size: 20px;
padding: 0 0.5em;
color: black;
}
.search-icon__input::placeholder {
color: grey;
}
.search-icon__glass {
width: var(--glass-size);
height: var(--glass-size);
border: solid var(--line-thickness);
border-color: var(--icon-color);
border-radius: 100px;
margin: 0 auto;
position: relative;
transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
}
.search-icon__handle {
height: calc(100% - var(--glass-size));
width: var(--line-thickness);
margin: 0 auto;
background: var(--icon-color);
position: absolute;
border-radius: 0 0 100px 100px;
left: 0;
right: 0;
bottom: 0;
transition: all var(--transition-speed) var(--timing-function);
transition-delay: var(--transition-speed);
}
.search-icon__handle::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--icon-color);
transform: rotate(0deg);
transition: all var(--transition-speed) var(--timing-function);
transition-delay: 0s;
}
.search-icon.open {
width: 200px;
border-color: var(--icon-color);
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__input {
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__glass {
width: 45%;
height: 45%;
transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
border-color: rgba(0, 0, 0, 0);
}
.search-icon.open .search-icon__handle {
bottom: calc(50% - (100% - var(--glass-size)) / 2);
border-radius: 100px;
transition-delay: 0s;
}
.search-icon.open .search-icon__handle::after {
transition-delay: var(--transition-speed);
transform: rotate(90deg);
}
</style>
<title>TheLeague.com</title>
</head>
<body>
<main>
<div class="container-top">
<div class="top">
<p>Shop 20% Off All Jerseys Now!</p>
</div>
</div>
<div class="title-block">
<div style="float:right; margin: 0 auto;">
<div class=" search-icon" style="margin-right: 50px; position: fixed;">
<input class="search-icon__input" placeholder="search ...">
<div class="search-icon__wrapper">
<div class="search-icon__glass"></div>
<div class="search-icon__handle"></div>
</div>
</div>
</div>
</div>
<div style="margin:0 auto; width:300px; padding: 1px 0 50px 0; font-size: 25px;">
<a style="text-decoration: none;" href="#">
<h1 style="color: black;">The<u>League</u></h1>
</a>
</div>
</div>
<!-- <div>
<div style="text-align: center;">
<a style="text-decoration: none;" href="#">
<h1 id="main-title">The<u>League</u></h1>
</a>
</div>
</div> -->
<ul class="top-level-menu">
<li><i class="fa fa-home" style="font-size: 20px;"></i> Home</li>
<li>
<i class="fa fa-tag" style="font-size: 20px"></i> Shop All ▼
<ul class="second-level-menu">
<li>Jerseys</li>
<li>Hats</li>
<li>Gym Shorts</li>
</ul>
</li>
<li><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</li>
<li>
<i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams ▼
<ul class="second-level-menu">
<li>
Soccer
<ul class="third-level-menu">
<li>Barcelona</li>
<li>PSG</li>
<li>Real Madrid</li>
</ul>
</li>
<li>
Basketball
<ul class="third-level-menu">
<li>Golden State Warriors</li>
<li>Celtics</li>
<li>Chicago Bulls</li>
</ul>
</li>
<li>
Football
<ul class="third-level-menu">
<li>New England Patriots</li>
<li>Ravens</li>
<li>Atlanta Falcons</li>
</ul>
</li>
</ul>
<li><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us
</li>
</li>
</ul>
<div class="slideshow-container moving-images">
<div class="mySlides">
<img src="https://images.daznservices.com/di/library/sporting_news/a/fe/kobe-bryant-041315-getty-ftrjpg_hnmwtxmeqtvu1fyv5fnzn6abh.jpg?t=926331162&quality=100"
alt="kobe holding shirt" style="width:100%">
</div>
<div class="mySlides">
<img src="https://images.hdqwalls.com/download/lionel-messi-fc-art-1m-1366x768.jpg" style="width:100%">
<!-- <div class="text">Caption Two</div> -->
</div>
<div class="mySlides">
<img src="https://images.wallpapersden.com/image/download/tom-brady-new-england-patriots-football_21828_1366x768.jpg"
style="width:100%;">
<!-- <div class="text">Caption Three</div> -->
</div>
<div style="text-align: center;">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)"><strong>❮ Prev</strong>
</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)"><strong>Next ❯</strong>
</button>
</div>
</div>
<div style="text-align:center; margin: 10px;">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!-- JavaScript -->
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
const searchIcon = document.querySelector(".search-icon__wrapper");
searchIcon.addEventListener("click", e => searchIcon.parentElement.classList.toggle("open"))
</script>
<!-- End of JavaScript -->
<div style="margin: 30px;">
<hr>
</hr>
</div>
<br><br>
<h3 style="text-align: center;font-size: 30px; color: black;font-family:'Fjalla One', sans-serif; ;">Featured
Jerseys</h3><br><br><br>
<div class="container1">
<div class="gallery">
<img src="https://www.teamzo.com/images/re-2019-2020-barcelona-home-nike-shirt-kids-messi-10-1559836177.png"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Barcelona 2019: Messi Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_1768000/altimages/FF_1768829ALT1_full.jpg&w=900"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Golden State Warriors 2019: StephCurry Jersey </div>
</div>
<div class="gallery">
<img src="https://images.footballfanatics.com/FFImage/thumb.aspx?i=/productimages/_3775000/altimages/ff_3775300-29e956db2213fbdbcf67alt1_full.jpg&w=325"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Canucks 2019: Customizable Jersey </div>
</div>
<div class="gallery">
<img src="https://contestimg.wish.com/api/webimage/5e86c1d100c605394a614f9c-large.jpg?cache_buster=71f3e987b756bb4df19be721d299a68b"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Patriots 2019: Tom Brady Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_3609000/altimages/ff_3609123-ef2947d2ef78011fbfc1alt3_full.jpg&w=600"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> PSG 2019: Neymar Jersey </div>
</div>
<div class="gallery">
<img src="https://cdn.shopify.com/s/files/1/0271/0975/2920/products/thumb.jpg?v=1580412625"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Lakers 2019: Kobe Bryant Jersey </div>
</div>
</div>
<div style="margin: 30px;">
<hr>
</hr>
</div>
<div class="footer">
<div style="float: left; margin: 0 auto; padding: 0 0 0 40px;">
<p><strong>Find a Store</strong></p>
<p><strong>Sign Up For Email</strong></p>
<p><strong>Become A Member</strong></p>
<p><strong>Site Feedback</strong></p>
</div>
<div style="float:right; margin: 0 auto; width: 300px;">
<p>Get Help</p>
<p>Order Status</p>
<p>Shipping and Delivery</p>
<p>Returns</p>
<p>Payment Options</p>
<p>Contact Us</p>
</div>
<div style="margin:0 auto; width:200px; padding:4px 0 0 0;">
<strong>
<p>About The League</p>
</strong>
<p>News</p>
<p>Careers</p>
<p>Investors</p>
<p>Sustainability</p>
</div>
<div style="margin: 30px; color: white;"><br>
<hr>
</hr>
</div>
</div>
</main>
</body>
</html>

The problem seems to be the positioning of your container-top.
The position:Fixed effects the element in such a way that it follows the user's viewport. the position Absolute, on the other hand, takes the actual document into consideration.
Have a look at w3schools description here: https://www.w3schools.com/css/css_positioning.asp

You should define the position to absolute. Fixed means that it is always fixed to the same position on the screen, while absolute will force it to stay where it is in the element.

Aligning Carousel Items with Jquery

I want to achieve this layout with the items of the carousel:
But this is what I've been able to accomplish:
Here is my code and a fiddle http://jsfiddle.net/xvac9usr/8/:
HTML:
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Card Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
</head>
<body>
<div class="carousel">
<button class="carousel__icon carousel__prev">
Prev
</button>
<ul class="carousel__list">
<li class="carousel__item">
<div class="card card__small">
<div class="card__image card__image--1">
<h1 class="heading-primary">Wild</h1>
<h2 class="heading-secondary">Nevada</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Rocky</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card">
<div class="card__image card__image--2">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card card__active">
<div class="card__image card__image--3">
<h1 class="heading-primary">Refreshing</h1>
<h2 class="heading-secondary">Amazonas</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Rainy</div>
<div class="card__tag">Dangerous</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card">
<div class="card__image card__image--4">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card card__small">
<div class="card__image card__image--5">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
</ul>
<button class="carousel__icon carousel__next">
Next
</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
JS:
$(document).ready(() => {
var carousel = $(".carousel__list"),
carouselItems = $(".carousel__item"),
clickCount = (centerItemIndex = Math.ceil(carouselItems.length / 2)),
itemWidth =
carouselItems.width() +
parseInt(carouselItems.first().css("marginRight"));
const refreshChildPosition = () => {
for(let i = 0; i < carouselItems.length; ++i){
$(carouselItems[i]).css("left", itemWidth * i);
}
};
refreshChildPosition();
//carousel.width(itemWidth * carouselItems.length);
$(".carousel__next").click(e => {
e.preventDefault();
});
$(".carousel__prev").click(e => {
e.preventDefault();
moveRight();
});
});
CSS:
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit; }
html {
box-sizing: border-box;
font-size: 62.5%; }
body {
font-family: "Open Sans", sans-serif; }
.card {
overflow: hidden;
width: 50rem;
height: 60vh;
border-radius: 0.8rem;
box-shadow: 0px 122px 264px -115px black;
transition: all 0.3s ease-out; }
.card:hover {
transform: translateY(-1rem);
box-shadow: 0px 122px 264px -115px rgba(0, 0, 0, 0.7); }
.card:not(:last-child) {
margin-right: 9rem; }
.card__image {
width: 100%;
height: 100%;
border-radius: inherit;
padding: 3rem 0;
z-index: 1;
position: relative;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
cursor: pointer;
transition: all 0.2s ease-in-out; }
.card__image--1 {
background-image: url("https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea034e0fa9d41f2687c143ab9ab7a30f&auto=format&fit=crop&w=645&q=80");
}
.card__image--2 {
background-image: url("https://images.unsplash.com/photo-1485237254814-0003b25e5672?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9ee4c294ead6d83c34334b2f19508fe&auto=format&fit=crop&w=2089&q=80");
}
.card__image--3 {
background-image: url("https://images.unsplash.com/photo-1517174637803-6929e01b6e63?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=24a8fc94192aa7a08c7a3575c7190980&auto=format&fit=crop&w=634&q=80");
}
.card__image--4 {
background-image: url("https://images.unsplash.com/photo-1534990874943-dceb856eff5b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f9c8dbe969d60257bef71ac433ba7575&auto=format&fit=crop&w=634&q=80");
}
.card__image--5 {
background-image: url("https://images.unsplash.com/photo-1535089894977-83d4c8854f62?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0e70b451b32ef8730ad0620338ff4e49&auto=format&fit=crop&w=754&q=80");
}
.card__image:hover {
transform: scale(1.03); }
.card__tag-box {
position: absolute;
left: 0;
bottom: 0;
padding: 2rem 3rem;
display: flex;
flex-wrap: wrap; }
.card__tag {
border: solid 1px white;
padding: 3px 5px;
border-radius: 3px;
transition: transform 0.2s, background-position 0.3s ease-out;
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #9e9e9e 50%);
background-size: 225%;
display: inline-block;
margin: 0.2rem 0; }
.card__tag:hover {
background-position: 100%;
transform: translateY(-0.2rem); }
.card__tag:not(:last-child) {
margin-right: 1rem; }
.card__active {
transform: translateY(-0.5rem) scale(1.1); }
.card__active:hover {
transform: translateY(-2rem) scale(1.1); }
.card__small {
transform: scale(0.9); }
.card__small:hover {
transform: translateY(-1rem) scale(0.9); }
.carousel {
height: 100vh;
position: relative; }
.carousel__list {
position: relative;
height: 100%;
width: 100%;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
list-style-type: none; }
.carousel__item {
position: absolute; }
.carousel__item:not(:last-child) {
margin-right: 4%; }
.carousel__icon {
cursor: pointer;
position: absolute;
width: 5rem;
height: 5rem; }
.carousel__prev {
left: 0;
top: 50%;
z-index: 100; }
.carousel__next {
right: 0;
top: 50%;
z-index: 100; }
body {
font-family: "Open Sans", sans-serif;
font-size: 1.4rem; }
.heading-primary {
font-weight: 300;
letter-spacing: 1px;
font-size: 2em; }
.heading-secondary {
font-size: 1.7rem;
font-weight: 300;
letter-spacing: 1px; }
By subtracting the position by 440 I can seem to get a similar result but it is a hard coded solution and not responsive.

Try removing/comment this piece of css code and test your application
.carousel__item {
position: absolute; }

How can I have my search check for objects on other pages but display on the current page

Currently I have a javascript search bar on my site to search images based on a div classed text which acts as their name.
However I plan on having several hundred images which would not be suitable for one page, which is why I added pages to my site, which brings me to my question.
How would I allow for a user regardless of what page they are on to use the search bar to search images from other pages and have that data displayed on their current page
I would like to try and do this without setting up a back end database which is where I feel this is headed, if anyone has any solutions please shoot them my way.
Below will be the html and css of my index as the second page is identical to the first other than the images. All my images are locally hosted, so if you want a running example on codepen, just comment and I will set that up.
<script>
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
</script>
/* Website Title */
h1 {
color: red;
}
/* Website desciption */
h2 {
color:red;
}
/* Text */
p {
font-family: Arial;
}
/* Website body */
body {
background-color: grey;
}
/*Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
}
li {
float: left;
border-right: 1px solid white;
padding: 10px;
}
li a {
display: block;
color: white;
text-align: center;
padding-right: 10px;
padding-bottom: 5px;
text-decoration: none;
text-transform: upercase;
font-size: 30px;
}
li:last-child {
border-right: none;
}
ul li:hover:not(.active) {
background-color: #555;
color: white;
}
.active {
background-color: red;
}
/* Search Bar */
input[type=text] {
width: 200px;
height: 50px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
font-size: 30px;
}
/* Cool code but not needed atm
input[type=text]:focus {
width: 100%;
float: left;
}
*/
/* Keeps images inline */
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
/*Puts overlay on images */
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.dl {
margin-top: 400px;
}
/* For links for the pages */
.pagination a {
color: black;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
/* Styling current page buttons */
.pagination a.active {
background-color: #4CAF50;
color: white;
}
/* Styling on mouse-over background color for page buttons */
.pagination a:hover:not(.active) {background-color: #ddd;}
/*Forcing footer to the bottom*/
html, body, #wrap { height: 100%; }
body > #wrap { height: auto; min-height: 100%;}
#main { padding-bottom: 10px; } /* Must equal the height of the footer */
#footer {
position: relative;
margin-top: -10px; /*Must equal negative value of the footer height */
height: 10px;
clear: both;
padding-top: 20px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* End of forcing footer to the bottom*/
<html>
<title>Cryptos Explained</title>
<head>
<!-- Links to my CSS document -->
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- My main heading -->
<h1 align=center>Cryptos Explained</h1>
<!-- My Sub-heading -->
<h2 align=center>Explainations, Prices, WhitePapers and more</h2>
<!-- Allows me to have jquery code at the bottom of the page -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Kind of makes it mobile friendly -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<!-- Navigation bar -->
<ul>
<li class="active">Home</li>
<li>Vocabulary</li>
<input type="text" id="myinput" name="search" placeholder="Search..." style="border-radius: 4px;">
</ul>
</header><br>
<body>
<!--Lots of Div classes so I can seperate the main and the footer -->
<div id="wrap">
<div id="main" class="clearfix">
<!-- All my images -->
<div class="image123">
<div class="imgContainer">
<img src="img/btc.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="img/ripple.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
</div>
<!-- Pages -->
<div id="footer">
<div class="pagination" align="center">
«
<a class="active" href="#">1</a>
2
3
4
»
</div>
</div>
</div>
</body>
</html>

to make a div inside a div always in middle of the page

I am making a responsive gallery page but got stuck. All i want is to make my .gallery-container in middle in any width. There's a gap in right side which is not equal to left side. Is there any way to maintain the gap between left and right side equal so that the gallery div will be always in middle of the page in any width?
If there is, it will help me alot
heres my code
It's complicated because i have given width to image and without giving width i cant display bigger image while going to a link a. So, all i need is to make the half of the space of right side to left side also. I now figure out that's the work of js. If you can then do help me.
.sj-main-content-inner {
max-width: 100%;
display: block;
overflow: hidden;
min-height: 300px;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
.gallery-container {
margin: 0;
}
ul {
list-style: square outside;
/* margin: 0 0 20px 20px; */
}
.gallery-list {
list-style: none;
float: left;
position: relative;
margin-right: 25px;
width: 360px;
border: 0;
}
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title {
background: rgba(255,255,255,1);
}
.gallery-title {
position: absolute;
left: 50%;
bottom: 30px;
width: 302px;
margin-left: -151px;
text-align: center;
background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
border: 1px solid #fff;
padding: 20px 10px;
}
.gallery-title h3 {
font-size: 18px;
text-transform: none;
margin-bottom:20px;
}
.sj-read-more {
color: #000;
text-decoration: none;
text-transform: uppercase;
padding-bottom: 16px;
position: relative;
}
.sj-read-more:after {
content: '';
width: 60px;
height: 1px;
background: #a4a4a5;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 0;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active {
color: #e45f4d;
text-decoration: none;
}
.sj-read-more:hover:after {
width: 100%;
left: 0;
margin-left: 0;
bottom: 15px;
color: #e45f4d;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
<script src="https://code.jquery.com/jquery-2.2.3.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" type="text/css" rel="stylesheet">
<div class="sj-main-container">
<div class="sj-main-content">
<div class="sj-main-content-inner">
<h1>Foto Gallery</h1>
<ul class="gallery-container">
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="http://upper.dev/swiss-japon/suissejapon110216/?gallery=fotos">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>

Use this code:
.sj-main-content-inner {
width: 100%;
margin: auto;
display: block;
overflow: hidden;
min-height: 300px;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
.gallery-container {
max-width: 800px;
height:100%;
background: #000;
margin:auto;
}
ul {
list-style: square outside;
/* margin: 0 0 20px 20px; */
}
.gallery-list {
list-style: none;
position: relative;
width: 360px;
margin:auto;
border: 0;
}
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title {
background: rgba(255,255,255,1);
}
.gallery-title {
position: absolute;
left: 50%;
bottom: 30px;
width: 302px;
margin-left: -151px;
text-align: center;
background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
border: 1px solid #fff;
padding: 20px 10px;
}
.gallery-title h3 {
font-size: 18px;
text-transform: none;
margin-bottom:20px;
}
.sj-read-more {
color: #000;
text-decoration: none;
text-transform: uppercase;
padding-bottom: 16px;
position: relative;
}
.sj-read-more:after {
content: '';
width: 60px;
height: 1px;
background: #a4a4a5;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 0;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active {
color: #e45f4d;
text-decoration: none;
}
.sj-read-more:hover:after {
width: 100%;
left: 0;
margin-left: 0;
bottom: 15px;
color: #e45f4d;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
Now for making it responsive play with the values in his code and add it just where your CSS ends. For reference use this link
#media only screen and (max-width: 700px) {
.gallery-container{
width:500px;
margin:auto;
}
}
Whenever you have to position a body to the centre use this as a trick:
<selector>{
width:<x>px;
margin:auto;
}
You can specify the top and bottom margin using margin-top and margin-bottom below margin:auto; but once you use this you can not set margin-left or margin-right.(But then you won't be requiring margin let/right because you are positioning the div in centre).

Problem solved by using jquery
$(function() {
function updateDivPosition() {
var myWidth = $( '.gallery-title' ).width(), myHeight = $( '.gallery-title' ).height();
$( '.gallery-title' ).css( {
marginLeft: -( parseInt( myWidth, 10 ) / 2 ) + 'px',
marginTop: -( parseInt( myHeight, 10 ) / 2 ) + 'px'
});
}
updateDivPosition(); // first time set correct position on onload
$( window ).resize( updateDivPosition ); // update on window resize
});

Develop Reference

JavaScript is the programming language of the Web.

Overlap issue in html card - javascript

Your problem is z-index issue just increase it for .overlay like below: .overlay { z-index: 999; } Here is a working JSfiddle.

Related

Whitespace randomly appeared in site

Search bar seems to be acting as if its position is sticky but I have it set to fixed yet it still moves down when I scroll

Aligning Carousel Items with Jquery

How can I have my search check for objects on other pages but display on the current page

to make a div inside a div always in middle of the page

Categories

Resources