We Keep Coding

Image slides that fades when navbar is hit

I'm trying to make a replica of the slider on top of this google page: https://www.google.com/doodles
If someone could make a replica of the image slider with the bars, that would be great! I've tried to on my own but can't figure it out. Here's my try if it's helpful!
JAVASCRIPT:
<script>
var imgArray = [
'images/img1.gif',
'images/img2.gif',
'images/img3.jpg',
'images/img4.jpg'],
curIndex = 0;
imgDuration = 3000;
function slideShow() {
document.getElementById('slider').className += "fadeOut";
setTimeout(function () {
document.getElementById('slider').src = imgArray[curIndex];
document.getElementById('slider').className = "";
}, 500);
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
}
</script>
HTML:
<img class="slidershow" id="slider" src="images/img1.gif" onmouseover="slideShow()">
<div id="navigation">
<label for="r1" class="bar" id="bar1"></label>
<label for="r2" class="bar" id="bar2"></label>
<label for="r3" class="bar" id="bar3"></label>
<label for="r4" class="bar" id="bar4"></label>
</div>
</div>
CSS: --> Honestly, I wrote so much CSS that I don't know which ones relate, so I might have left a few out. Need to clean that up - Apologize in advance
.nav_links {
list-style: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
color: #009cdc;
transition: all 0.3s ease 0s;
}
.nav_links li:hover a {
color: #2772ff;
}
#top-content {
display: block;
}
latest-nav li#latest-nav-1 {
background-color: #fa4842;
}
#latest-nav li.off {
border-top: 15px solid #fff;
}
#latest-nav li.off {
height: 5px;
opacity: 0.35;
}
#latest-nav li {
cursor: pointer;
float: left;
height: 5px;
transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
-moz-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
-webkit-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
width: 16.6%;
}
.slidershow {
height: 400px;
overflow: hidden;
}
.middle {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%,-50%);
}
#navigation {
position: absolute;
bottom: 35px;
left: 60%;
transform: translateX(-50%);
display: flex;
}
.bar {
border-top: 15px solid #fff;
width: 200px;
opacity: 0.35;
height: 5px;
cursor: pointer;
transition: 0.4s;
}
.slides {
width: 500%;
height: 100%;
display: flex;
margin-top: 30px;
}
.slide {
width: 20%;
transition: 0.6s;
}
.slide img {
display: block;
margin: auto;
max-height: 250px;
max-width: 600px;
width: auto;
}
latest .container img {
display: block;
margin: auto;
max-height: 250px;
max-width: 600px;
}
#bar1 {
background-color: #3875fc;
}
#bar2 {
background-color: #ff8809;
}
#bar3 {
background-color: #19be29;
}
#bar4 {
background-color: #fa4842;
}
Thanks so much!

I'm always happy to see newcomers devoting time to study. First of all, good job! Unfortunately I'm not a very good teacher, but I put together a little example of this slider you're working on. You can check it clicking here.
Basically what is going on is:
The HTML is divided into two sections: the slider & the navbar.
I hide all slides by default applying a display: none to them. They're only visible when I add an additional class.
Detect the hover method via javascript. Whenever the navbar item is hovered on, you will detect its position (I added a data attribute called data-position to find out which position it is) and show the correspondent slider.
So, if the navbar has the data-position of 2, I know that I must show the second slide. To do that, I use .slider .slider-item:nth-child(2).
As I mentioned I'm not the best at explaining, but I hope this helps you out a little bit. Keep studying and don't give up!
HTML:
<div class="wrapper">
<div class="slider">
<div class="slider-item slider-item--visible">
hello item 1
</div>
<div class="slider-item">
hello item 2
</div>
<div class="slider-item">
hello item 3
</div>
</div>
<nav class="navbar">
<span class="navbar-item navbar-item--selected" data-position="1"></span>
<span class="navbar-item" data-position="2"></span>
<span class="navbar-item" data-position="3"></span>
</nav>
</div>
CSS
.wrapper{
max-width: 1000px;
width: 100%;
margin: 0 auto;
display: block;
}
/* Slider */
.slider{
max-width: 100%;
width: 100%;
}
.slider-item{
display: none;
}
.slider-item--visible{
display: block;
}
/* Navbar */
.navbar{
max-width: 100%;
display: flex;
align-items: flex-end;
height: 8px;
}
.navbar-item{
max-width: 33.3%;
width: 100%;
display: block;
height: 5px;
cursor: pointer;
opacity: .5;
transition: all .32s ease;
}
.navbar-item--selected{
height: 8px;
opacity: 1;
}
/* Meaningless styles (colors) */
.navbar-item:nth-child(1){
background: salmon;
}
.navbar-item:nth-child(2){
background: lightblue;
}
.navbar-item:nth-child(3){
background: #19be29;
}
Javascript
const $navbars = document.querySelectorAll(`.navbar-item`);
function removeSelected(){
const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);
if (!$selected){
return;
}
for (let each of $selected){
each.classList.remove("navbar-item--selected");
each.classList.remove("slider-item--visible");
}
}
for (let each of $navbars){
each.addEventListener("mouseover", function(){
removeSelected();
const position = each.getAttribute("data-position");
const $item = document.querySelector(`.slider .slider-item:nth-child(${position})`)
each.classList.add("navbar-item--selected")
$item.classList.add("slider-item--visible");
});
}

Why the last section covers the above sections

I am trying to create the full-page parallax scroll in the one-page website. There are 5 sections in the page. When I add the code of parallax scrolling, the last section covers the above sections. I am not sure where is the mistake.
And, I guess the js/jQuery code in my work does not work since the effects do not come out on the menu.
Any help is appreciated. Thank you so much.
$(document).ready(function() {
let hamburgerClicked = fales;
$('#toggle').on("click", function() {
if (hamburgerClicked == false) {
$(".top").css('transform', 'translate (11px) translateX(0) rotate(45deg)');
$(".bottom").css('transform', 'translateY(-11px) translateX(0) rotate(-45deg)');
hamburgerClicked = true;
} else {
$(".top").css('transform', 'translate (0px) translateX(0) rotate(0deg)');
$(".bottom").css('transform', 'translateY (0px) translateX(0) rotate(0deg)');
hamburgerClicked = false;
}
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
html {
height: 100%;
}
body {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
font-size: 15px;
color: #fff;
background-image: url(../img/background/background.png);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#meteor-shower {
position: absolute;
top: 0;
left: 0;
}
.background {
overflow: hidden;
will-change: transform;
backface-visibility: hidden;
height: 100vh 30vh;
position: fixed;
width: 100%;
transform: translateY(30vh);
transition-timing-function: .2s all, cubic-bezier(0.22, 0.44, 0, 1);
}
.background:first-child {
transform: translateY(-30vh / 2);
}
.content-wrapper {
transform: translateY(30vh /2);
}
section {
width: 100%;
transform: translateY(40vh);
will-change: transform;
backface-visibility: hidden;
transition-timing-function: 1.2s +.5, all, cubic-bezier(0.22, 0.44, 0.1);
text-decoration: none;
scroll-behavior: smooth;
}
/*-------------------------------background-animation---------------------------------------*/
.twinkling {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 95%;
display: block;
}
.twinkling {
position: absolute;
background: transparent url(../img/background/2446101-03.png) repeat top center;
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
-webkit-animation: move-twink-back 16s infinite;
animation: move-twink-back 16s infinite;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#-webkit-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
/*----------------------------------------navbar---------------------------------------------*/
/*-------------header-container-------------*/
header {
height: 3em;
position: fixed;
}
.header-container {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.header-container h1 {
font-family: 'Gabriela', serif;
font-size: 1.5em;
float: left;
padding-top: 5px;
padding-left: 20px;
display: block;
}
/*-------------------menu-------------------*/
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: .7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: #fff;
border: none;
height: 4px;
width: 32px;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
border-radius: 3px;
}
.middle {
top: 10px;
}
.bottom {
top: 20px;
}
.overlay {
z-index: 500;
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
/*---------------------------------------section-1-------------------------------------------*/
#section1 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section1 {
:nth-child(1) {
padding-top: 0px;
display: flex;
}
}
/*------------crystal-animation-------------*/
#crstal-animation {
overflow: hidden;
display: block;
}
.crystal {
width: 23%;
position: absolute;
top: 18%;
left: 40%;
margin: 0;
margin-right: -50%;
transform-style: preserve-3d;
-webkit-animation: rotation 8s infinite linear;
animation: rotation 8s infinite linear;
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
35% {
-webkit-transform: rotate(38deg) rotateX(5deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
65% {
-webkit-transform: rotate(-38deg) rotateX(2deg);
filter: drop-shadow(16px 0px 10px rgb(255, 255, 255, 0.8));
}
86% {
-webkit-transform: rotateX(-20deg) rotateY(1deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
100% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
}
/*---------------------------------------section-2-------------------------------------------*/
#section2 {
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.content {
width: 59%;
background: rgba(0, 0, 0, 0.6);
position: relative;
padding-bottom: 30px;
padding-left: 30px;
display: block;
}
.content p {
width: 88%;
margin: 15px;
text-align: left;
}
.content h2 {
text-align: center;
padding-top: 30px;
}
.crystal-animation {
width: 68%;
float: right;
margin-top: -56%;
margin-right: -80%;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
aside {
display: block;
}
/*---------------------------------------section-3-------------------------------------------*/
#section3 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section3:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
}
/*--------constellation-cards----------*/
.gallery {
list-style: none outside none;
flex-direction: row;
display: flex;
align-content: center;
flex-flow: row wrap;
justify-content: center;
}
h2,
p {
text-align: center;
}
.heading {
text-align: center;
}
.gallery li {
margin: 10px;
}
.gallery li:hover {
transform: scale(1.1)
}
.svg {
width: 75%;
filter: drop-shadow(10px)rgba(0, 0, 0, 0.6);
-moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
}
/*---------------------------------------section-3-content---------------------------------*/
/*------------card-content-------------*/
#section3-content {
flex: 90%;
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.intro h3 {
font-family: 'Gabriela', serif;
}
.content-text {
background: rgba(0, 0, 0, 0.7);
position: relative;
padding-bottom: 30px;
padding-left: 20px;
}
.constellation-img {
opacity: .35;
width: 50%;
float: left;
top: 20%;
position: relative;
}
.constellation-star {
width: 56%;
opacity: 1;
float: left;
left: 1%;
margin-top: 20px;
position: absolute;
}
.intro {
float: right;
width: 50%;
top: 40%;
padding-top: 50px;
padding-right: 100px;
}
.constellation-pattern {
width: 11%;
opacity: .9;
margin-left: -10px;
margin-bottom: -15px;
}
.intro p {
text-align: left;
font-size: 1em;
margin-bottom: 10px;
}
.button {
margin: 0;
padding: 0;
}
.constellation-icon li {
list-style: none;
float: left;
}
.constellation-button {
width: 13%;
/*--------border: 2px solid opacity .3 #fff;
background: opacity .3 #fff;
border-radius: 10px;-----------*/
}
/*----------44--------------------------section-4------------------------------------------*/
#section4 {
height: 100vh;
display: block;
align-content: center;
background: rgba(0, 0, 0, 0.8);
position: relative;
padding: 0;
margin: 0;
}
.s3 {
text-align: left;
}
.s3-content {
width: 74%;
padding-top: 16%;
padding-left: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="twinkling"></div>
<header>
<div class="header-container">
<h1>Constellations</h1>
</div>
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<section id="section1" class="background">
<div id="crystal-animation">
<figure>
<img src="img/crystal.svg" alt="" class="crystal">
</figure>
</div>
</section>
<section id="section2" class="background">
<article class="content">
<h2>What is Constellations?</h2>
<p>Constellations are patterns in the night sky often formed by the most prominent stars to the naked eye. </p>
<p>Constellations often carry names and take the shape of gods, hunters, princesses, objects and mythical beasts associated with Greek mythology – however, at times, it requires quite an imagination to draw out what some constellations are supposed
to represent! </p>
<aside><img src="img/crystal-animation.svg" alt="" class="crystal-animation"></aside>
</article>
</section>
<!-- section-3---->
<section id="section3" class="background">
<h2>12 Constellations</h2>
<p>Click the constellation cards and understand more.</p>
<div class="card">
<ul class="gallery">
<li>
<figcaption>
<img src="img/12-constellation-cards/1.svg" alt="" class="svg">
</figcaption>
</li>
<li>
<img src="img/12-constellation-cards/4.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/7.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/10.svg" alt="" class="svg">
</li>
</ul>
<ul class="gallery">
<li>
<img src="img/12-constellation-cards/2.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/5.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/8.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/11.svg" alt="" class="svg">
</li>
</ul>
<ul class="gallery">
<li>
<img src="img/12-constellation-cards/3.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/6.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/9.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/12.svg" alt="" class="svg">
</li>
</ul>
</div>
</section>
<section id="section3-content" class="background">
<div class="content-text">
<img src="img/12-constellation-pattern/Aries-img.svg" alt="" class="constellation-img"><img src="img/12-constellation-pattern/Aries-star.svg" alt="" class="constellation-star">
<article class="intro">
<img src="img/12-constellation-pattern/Aries-pattern.svg" alt="" class="constellation-pattern">
<h3>Aries</h3>
<p>While one of the biggest, most famous, and oldest named constellations, Aquarius is faint and often hard to find/see. In Greek mythology, Aquarius represented Ganymede, a very handsome young man. Zeus recognized the lad’s good looks, and invited
Ganymede to Mt. Olympus to be the cupbearer of the gods. For his service he was granted eternal youth, as well as a place in the night sky.
</p>
<p>Despite its prominent position and large size, you can see that Aquarius doesn’t really have defining features, nor does it contain any bright stars. The protruding line to the right is Aquarius’s right arm, with the large downward shape being
a combination of the water flowing down out of the vase and his right leg. While not the entire constellation, what’s drawn above is what you’re most likely to see in the night sky. You won’t see this one in the city; you’ll need a dark sky
to find the cupbearer.
</p>
</article>
<div class="button">
<ul class="constellation-icon">
<li>
<img src="img/12-constellation-pattern/Aries-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Leo-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Sagittarius-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Taurus-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Virgo-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Capricorn-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Gemini-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Libra-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Aquarius-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Cancer-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Pisces-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Scorpio-pattern.svg" alt="" class="constellation-button">
</li>
</ul>
</div>
</div>
</section>
<!-- section-4---->
<section id="section4" class="background">
<div class="s3-content">
<h2>How to Find Constellations in the Night Sky?</h2>
<p class="s3">Using a star map will be your best bet for assisting in finding where to look for constellations, depending on your location and time of year. It’s different depending on where you live and on the seasons. You can also need the additional app to
help find the constellations, that lets you enter your location and gives you a customized star map. </p>
<p class="s3">All you need is a dark sky, so as far away from cities as possible, and for extra visual aide, a pair of binoculars or a telescope. With binoculars or a telescope, you’ll see fainter stars and other features like nebulae and star clusters. When
you’re out observing, you’ll want to generally orient yourself towards the North Star.</p>
</div>
</section>

Function toggle won't show div's inside the "toggled" div

I'm "required" to make a webpage:
In a page I want a side menu and when clicking each option it shows in the right some content, but without "loading" another page (this would be the easier way, just making a page for each "option" and then just clicking in each button would lead me to that page with the content in the right).
I found this:
<script type="text/javascript">
function toggle(IDS) {
var sel = document.getElementById('pg').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
if (sel[i].id != IDS) { sel[i].style.display = 'none'; }
}
var status = document.getElementById(IDS).style.display;
if (status == 'block') { document.getElementById(IDS).style.display = 'none'; }
else { document.getElementById(IDS).style.display = 'block'; }
return false;
}
</script>
I just added it to the side menu and when each part is clicked it shows what I want :
<div id="sidebar2">
<div>
<h2 class="title">TEXT</h2>
<ul>
<li>TEXT</li>
<li>TEXT2</li>
</ul>
</div>
<div>
And in the content of each "option":
<div id="pg">
<div id="pg0" class="pg">
<h2 class="title">TEXT</h2>
<p><img src="images/test.png" alt=""/></p>
</div>
<div id="pg1" class="pg">
<h2 class="title">TEXT2</h2>
<p><img src="images/test2.png" alt=""/>HERE GOES THE DIV POPUP BUTTON</p>
</div>
I want a button to open a pop up image. It appears toggle() sets everything inside each div to display:none; and when I click only changes to block the outer part. But if I have a div inside, it remains hidden.
I've tried these two codes for the popup:
<div id="test">
<a href="#" class="JesterBox">
<div id="image1"><img src="bg.jpg"></div>
</a>
Image 1
With the corresponding JesterBox definition in CSS:
.JesterBox div {
visibility: hidden;
position: fixed;
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
z-index: 75;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.JesterBox div:before {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 74;
background-color: rgba(0, 0, 0, 0);
transition: all 0.5s ease-out;
}
.JesterBox div img {
position: relative;
z-index: 77;
max-width: 100%;
max-height: 100%;
margin-left: -9999px;
opacity: 0;
transition-property: all, opacity;
transition-duration: 0.5s, 0.2s;
transition-timing-function: ease-in-out, ease-out;
}
.JesterBox div:target { visibility: visible; }
.JesterBox div:target:before { background-color: rgba(0, 0, 0, 0.7); }
.JesterBox div:target img {
margin-left: 0px;
opacity: 1;
}
And this other:
<div class="box">
<a class="button" href="#popup1">TEXT</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
TEXT TEXT
</div>
</div>
</div>
With its corresponding CSS:
.box {
width: 20%;
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: absolute;
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%;
}
}
I can't make it work. How could I make, for example, the 2nd option (the div class="box") work inside the div?
<div id="pg1" class="pg">
<h2 class="title">TEXT2</h2>
<p>
<div class="box">
<a class="button" href="#popup1">TEXT</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
TEXT TEXT
</div>
</div>
</div>

how can I add a caption on hover with a img-circle image in bootstrap

I have a grid of responsive ing-circle link images in bootstrap which I would like to have caption appear on hover.
I cannot figure out a way to do this without distorting the shape of the circular image, or have it appear outside the circle.
My CSS:
.pic{
-webkit-filter: saturate(50%) opacity(80% ) sepia(15%) grayscale(15%);
}
.pic img{
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.pic:hover img{
-webkit-filter: opacity(00% )brightness(120%);
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}
.circular img {
margin: 0 auto;
border: 6px solid #a9c3b1;
box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
}
img {
display: inline-block;
height: auto;
max-width: 100%;
}
#hatch {
background-image: url("../img/hatch.png");
opacity: 1;
}
#nakashima {
background-image: url("../img/carat.png");
opacity: 1;
}
#areel {
background-image: url("../img/animation.png");
opacity: 1;
}
I have tried variations on this:
.figcaption {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
padding: 50% 0;
overflow: hidden;
color: black
opacity: 1;
z-index: 10
}
here is my HTML:
div class="row ">
<div class="col-sm-3 col-sm-offset-1">
<div class="circular pic img-circle" id='hatch'>
<h3 class="figcaption">hatch</h3>
<a href="hatch.html"><img src="img/hatch.png" class="img-responsive img-circle" alt="" >
</a>
</div>
</div>
<div class="col-sm-3">
<div class="circular pic img-circle" id='nakashima'>
<a href="hatch.html"><img src="img/carat.png" class="img-responsive img-circle" alt="" >
</a>
</div>
</div>
<div class="col-sm-3">
<div class="circular pic img-circle" id='areel'>
<a href="reel.html"><img src="img/animation.png" class="img-responsive img-circle" alt="">
</a>
</div>
</div>
</div>
ETA: I have made a jsfiddle for demo: https://jsfiddle.net/4btssg6y/
compare the results of the first circle where text has been added with that of the second with no text.

Well I think I figured it out. But I'd love to hear if there is a nicer way to do this.
HTML:
<section id="design">
<div class="row">
<div class="col-sm-3 col-sm-offset-1">
<div class="circular pic img-circle" id='hatchBkgd'>
<h3>Hatch</h3>
<p>Typography, Print Design</p>
<a href="hatch.html"><img src="http://i.imgur.com/IlW9pin.png" class="img-responsive img-circle fig">
</a>
</div>
</div>
<div class="col-sm-3">
<div class="circular pic img-circle" id='nakashimaBkgd'>
<h3>Nakashima</h3>
<p>Paralax Scrolling Site with SVG animation</p>
<a href="hatch.html"><img src="http://i.imgur.com/Xxg1WaU.png" class="img-responsive img-circle fig" >
</a>
</div>
</div>
<div class="col-sm-3">
<div class="circular pic img-circle" id='areelBkgd'>
<h3>Animation</h3>
<p>Lightwave 3D character design and visual effects</p>
<a href="reel.html"><img src="http://i.imgur.com/bnYtfkB.png" class="img-responsive img-circle fig" alt="">
</a>
</div>
</div>
</div>
</section>
CSS:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.pic {
-webkit-filter: saturate(50%) opacity(80%) sepia(15%) grayscale(15%);
}
.pic img {
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.pic:hover img {
-webkit-filter: opacity(00%)brightness(120%);
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}
.circular img {
margin: 0 auto;
border: 6px solid #a9c3b1;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
}
img {
display: inline-block;
height: auto;
max-width: 100%;
}
.fig {
position: relative;
z-index: 100;
}
#hatchBkgd {
background-image: url("http://i.imgur.com/I2mQA0o.png");
opacity: 1;
position: relative;
z-index: 1;
}
#nakashimaBkgd {
background-image: url("http://i.imgur.com/UbID6dY.png");
opacity: 1;
position: relative;
z-index: 1;
}
#areelBkgd {
background-image: url("http://i.imgur.com/b2M3GBX.png");
opacity: 1;
position: relative;
z-index: 1;
}
#design h3{
position: absolute;
z-index: 2;
-webkit-filter: saturate(50%) opacity(80% ) sepia(15%) grayscale(15%);
margin: 0;
margin-top:12vh;
margin-left: 2vw;
color: #fff;
letter-spacing: .1em;
font-weight: 100;
}
#design p{
position: absolute;
z-index: 2;
-webkit-filter: saturate(50%) opacity(80% ) sepia(15%) grayscale(15%);
margin: 0;
margin-top: 17.25vh;
margin-left: 2vw;
color: #fff;
letter-spacing: .1em;
font-weight: 100;
display: block;
border-top: 1px solid white;
padding-right: 3vw;
padding-bottom: 1vw;
}
My updated jsfiddle: https://jsfiddle.net/4btssg6y/1/

Trouble positioning divs side by side with CSS

Having read a few posts on stackoverflow, I've tried a few things to get my divs positioned side by side but nothing has been successful. I have never used CSS in any significant way before so I'm struggling.
I have a slideout that I want to slide in from the right edge of a page. The slider should have a div on its left edge that allows the slider to be dismissed (called clickme in the code below), and the right side of the slider is to contain a div (called image_carousel in the code below) that contains a carouFredSel.
I have two problems:
The slider does not come out smoothly. I've tried everything I can find in the #slideout's transition CSS property, but the slider still just appears rather than sliding from the right.
The div containing the carousel (#image_carousel) is not positioned to the right of the #clickme. I want to have #slideout with the left 10% taken up with #clickme and the right 90% taken up with #image_carousel. The #clickme does take up the left 10%, but the #image_carousel is positioned, well, kinda over the top of the clickme and not taking up the right 90% either. If I have position = relative for image_carousel then it looks a little better but is still not right.
Here is the code. The carouFredSel stuff I have copied from examples on their web site.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jquery.carouFredSel-6.2.1.js"></script>
<style type="text/css">
#slideout {
position: absolute;
top: 37%;
right: -360px;
width: 400px;
min-height: 25%;
/* tried transform instead of width but no difference */
transition: width 0.3s ease;
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-ms-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
overflow: auto;
background: #34cbcb;
-webkit-box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
-moz-box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
}
.slide-away {
transform: translate(-360px, 0);
-webkit-transform: translate(-360px, 0);
-moz-transform: translate(-360px, 0);
-ms-transform: translate(-360px, 0);
-o-transform: translate(-360px, 0);
}
#clickme {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 10%;
float: left;
background: #870C7E;
}
</style>
<style type="text/css">
.image_carousel {
/* padding: 15px 0 15px 40px; */
position: relative;
margin-left: 10%;
}
.image_carousel img {
border: 1px solid #ccc;
background-color: white;
padding: 9px;
margin: 7px;
display: block;
float: left;
}
a.prev, a.next {
background: url(http://caroufredsel.dev7studios.com/images/miscellaneous_sprite.png) no-repeat transparent;
width: 45px;
height: 50px;
display: block;
position: absolute;
top: 85px;
}
a.prev { left: -22px;
background-position: 0 0; }
a.prev:hover { background-position: 0 -50px; }
a.prev.disabled { background-position: 0 -100px !important; }
a.next { right: -22px;
background-position: -50px 0; }
a.next:hover { background-position: -50px -50px; }
a.next.disabled { background-position: -50px -100px !important; }
a.prev.disabled, a.next.disabled {
cursor: default;
}
a.prev span, a.next span {
display: none;
}
.pagination {
text-align: center;
}
.pagination a {
background: url(http://caroufredsel.dev7studios.com/images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
width: 15px;
height: 15px;
margin: 0 5px 0 0;
display: inline-block;
}
.pagination a.selected {
background-position: -25px -300px;
cursor: default;
}
.pagination a span {
display: none;
}
.clearfix {
float: none;
clear: both;
}
</style>
<script>
$('#clickme').click(function() {
$('#slideout').toggleClass('slide-away');
});
</script>
<div id="slideout">
<div id="clickme">
<img id="direction" class="chevron" src="left.PNG"/>
</div>
<div class="image_carousel">
<div id="foo2">
<img src="image1.bmp" alt="" width="60" height="60" />
<img src="image2.bmp" alt="" width="60" height="60" />
<img src="image3.bmp" alt="" width="60" height="60" />
<img src="image4.bmp" alt="" width="60" height="60" />
<img src="image5.jpg" alt="" width="60" height="60" />
<img src="image6.jpg" alt="" width="60" height="60" />
</div>
<div class="clearfix"></div>
<a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
<a class="next" id="foo2_next" href="#"><span>next</span></a>
<div class="pagination" id="foo2_pag"></div>
</div>
</div>
<script>
$("#foo2").carouFredSel({
circular: false,
infinite: false,
auto : false,
prev : {
button : "#foo2_prev",
key : "left"
},
next : {
button : "#foo2_next",
key : "right"
},
pagination : "#foo2_pag"
});
$(function () {
$("#slideout").hide();
setTimeout(function(){
$("#slideout").show();
$("#direction").attr("src","right.PNG");
$('#slideout').toggleClass('slide-away');
},3000);
});
</script>
Thanks,
Paul