bug Button Ripple Effect on Click - javascript

I follow a video for make a Button Ripple Effect on Click, but it didn't work... The animation must be in the button "plus d'information", but it's not. I don't understand why it doesn't work...! [I followed this tutorial]. You can see, the bubble effect isn't on the balise but in the page... I don't understand why
body{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Raleway, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-width: 100vh;
background: #202735;
background-attachment: fixed;
}
img{
width: 125px;
}
.container{
position: relative;
width: 1000px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 20px;
padding: 20px 0;
}
.container .card{
position: relative;
height: 250px;
background: #E7ECEF;
width: 45%;
margin: 30px 0;
border-radius: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.container .card .imgbox{
position: absolute;
top: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
height: calc(100% - 20px);
width: calc(100% - 20px);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 5px 5px 30px rgba(0,0,0,0.1);
transition: 300ms ease-in-out;
}
.container .card:hover .imgbox{
height: 150px;
width: 150px;
left: -75px;
top: calc(50% - 75px);
}
.container .card .imgbox img{
max-width: 100px;
transition: 300ms ease-in-out;
}
.container .card:hover .imgbox img{
max-width: 75px;
filter: invert(1);
}
.container .card .content{
position: absolute;
right: 0;
width: calc(100% - 100px);
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container .card .content h1{
color: #db5a42;
margin-bottom: 5px;
}
.container .card .content a{
display: inline-block;
overflow: hidden;
padding: 8px 20px;
text-decoration: none;
font-weight: 500;
color: #4790FD;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 40px;
border: #4790FD solid 2px;
}
span{
position: absolute;
background: #fff;
transform: translate(-50%,-50%);
pointer-events: none;
border-radius: 50%;
animation: animate 1s linear infinite;
}
#keyframes animate{
0%{
width: 0px;
height: 0px;
opacity: 0.5;
}
100%{
width: 500px;
height: 500px;
opacity: 0;
}
}
/* https://coolors.co/202735-4790fd-e7ecef-817f75-23967f
<html>
<body>
<div class="container">
<div class="card">
<div class="imgbox">
<img src="./img/portfolio/logo_blanc.png">
</div>
<div class="content">
<div>
<h1>Silvus Site</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam sed laoreet mauris. Sed vitae ligula quam. Nunc non interdum nunc, nec dapibus nunc.</p>
Plus D'information
</div>
</div>
</div>
</div>
<script type="text/javascript">
const buttons = document.querySelectorAll('a');
buttons.forEach(btn => {
btn.addEventListener('click', function(e) {
let x = e.clientX - e.target.offsetLeft;
let y = e.clientY - e.target.offsetTop;
let ripples = document.createElement('span');
ripples.style.left = x + 'px';
ripples.style.top = y + 'px';
this.appendChild(ripples);
setTimeout(() => {
ripples.remove()
}, 1000);
})
})
</script>
</body>
</html>

Related

Create 3d image hover effect

I want to create this effect but with javascript not in pure css as he did. And no scss also just css It'll be good. codepen
.picture-container {
display: flex;
flex-flow: row nowrap;
justify-content: center;
justify-self: center;
align-items: center;
width: 40%;
height: 100vh;
}
.picture-frame {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
padding: 5%;
border: solid 1px #000;
}
.picture {
z-index: 1;
width: 100%;
height: 100%;
}
<html>
<div class="picture-container first-picture horizontal-small">
<div class="picture-frame">
<img
id="secondPic"
src="https://picsum.photos/200/300"
alt="picture of a brick house"
class="picture middle-right"
/>
</div>
</div>
<html>
I'm also using Vuejs if it changes something for this

You can use transform styling to get the 3D effect. Checkout my code below
var card = document.getElementsByClassName('card');
document.addEventListener("mousemove", function(e) {
var ax = -(window.innerWidth/2- e.pageX)/20;
var ay = (window.innerHeight/2- e.pageY)/10;
document.getElementById("cards").style.transform = "rotateY("+ax+"deg) rotateX("+ay+"deg)";
});
#import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700);
body {
background: #edf2f4;
perspective: 1000px;
transform-style: preserve-3d;
display: flex;
height: 100vh;
font-family: "Playfair Display", georgia, serif;
}
.card {
pointer-events: none;
transform: translateZ(0);
padding: 30px;
background: white;
border-radius: 5px;
width: 400px;
height: 200px;
margin: auto;
transform-style: preserve-3d;
backface-visibility: hidden;
display: flex;
box-shadow: 0 0 5px rgba(0, 0, 0, .1);
position: relative;
}
.card:after {
content: " ";
position: absolute;
width: 100%;
height: 10px;
border-radius: 50%;
left: 0;
bottom: -50px;
box-shadow: 0 30px 20px rgba(0, 0, 0, .3);
}
.card .card-content {
margin: auto;
text-align: center;
transform-style: preserve-3d;
}
.card h1 {
transform: translateZ(100px);
}
<div id="cards" class="card">
<div class="card-content">
<h1>Just hover around</h1>
</div>
</div>

JS Onclick function is not working properly

Html:
<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse" id="collapse">
<div class="progNum" style="--i: 'Program 1'">
<div>
<h1>1</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 01:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis. </p>
<div class="btns"> <button class="btn btn1 showDiv3"> <img src="svg/dash.svg"> </button> <button class="btn btn2"> <span>Source code</span> <img src="svg/arrow.svg"> </button>
</div>
</div>
<div class="div3">
<div class="h-div3">
<h1>C++</h1>
<img src="svg/close.svg" class="div3-close">
</div>
<div class="d-link-div3"> <span>Download</span> Turbo C++ Code Dev C++ Code
</div>
<div class="c-link-div3"> <span>Compiler</span> Compile
</div>
<div class="view-div3"> <span>View Code</span> View Code
</div>
</div>
</div>
When a user click on div.prog shrink the class name changes to div.prog expand
I want to add the class shrink and remove the class expand when a user click on img.collapse#collapse
I tried:
var closeBtn = document.getElementById('collapse');
var prog = document.getElementById('prog');
closeBtn.onclick = function(){
console.log('close button clicked..');
prog.classList.remove('expand');
prog.classList.add('shrink');
}
The output statement is displaying on the console but the div is not returning to its initial state.
Full code :
var progElements = document.getElementsByClassName('prog');
var closeBtn = document.getElementById('collapse');
for (let i = 0; i < progElements.length; i++) {
progElements[i].onclick = function() {
this.classList.add('expand');
this.classList.remove('shrink');
for (let j = 0; j < progElements.length; j++) {
if (i !== j) {
if (!progElements[j].classList.contains('shrink')) {
progElements[j].classList.add('shrink');
progElements[j].classList.remove('expand');
}
}
}
}
}
var showDiv3 = document.getElementsByClassName('showDiv3');
var div3 = document.getElementsByClassName('div3');
var div3Close = document.getElementsByClassName('div3-close');
for (let i = 0; i < div3.length; i++) {
showDiv3[i].onclick = function() {
div3[i].style.display = 'block';
div3[i].style.zIndex = '100';
}
div3Close[i].onclick = function() {
div3[i].style.display = 'none';
}
}
var closeBtn = document.getElementById('collapse');
var prog = document.getElementById('prog');
closeBtn.onclick = function() {
console.log('close button clicked..');
prog.classList.remove('expand');
prog.classList.add('shrink');
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&family=Roboto+Condensed:wght#300;400;700&family=Source+Sans+Pro:wght#300;400;600;700;900&display=swap");
* {
outline: 0px solid #0f0;
font-family: "Poppins", sans-serif;
user-select: none;
}
.container {
position: relative;
transform: translateX(60px);
width: calc(100vw - 60px);
height: 100vh;
overflow: scroll;
background: #152644;
}
.container .title {
text-align: center;
width: 100%;
height: 66px;
background: #11101d;
display: flex;
justify-content: center;
align-items: center;
}
.container .title h1 {
color: #fff;
font-size: 35px;
font-weight: 700;
font-family: "Poppins", sans-serif;
background: var(--rainbow);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container .content {
position: relative;
height: calc(100% - 66px);
width: 100%;
overflow: scroll;
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.home-content {
border: 0px solid #fff;
}
.home-content h1 {
color: #fff;
border: 0px solid #aaa;
}
.home-content .hc-links {
border: 0px solid #f0f;
}
.home-content .hc-links div {
border: 0px solid #0ff;
}
.home-content .hc-links div h1 {
border: 0px solid #faa;
}
.home-content .hc-links div a {
border: 0px solid #ff0;
}
.home-content .fback {
border: 0;
}
.content::-webkit-scrollbar {
display: none;
}
.content .prog.shrink {
margin: 16px;
width: 125px;
height: 125px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 -5px 5px rgba(250, 250, 255, 0.05), inset 0 -5px 5px rgba(250, 250, 255, 0.05), 0 5px 5px rgba(0, 0, 0, 0.3), inset 0 5px 5px rgba(0, 0, 0, 0.3);
}
.content .prog.expand {
position: relative;
margin: 20px auto;
width: 75%;
background-color: #007bff;
border-radius: 20px;
display: flex;
justify-content: space-evenly;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 20;
box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.3);
}
.prog.shrink .div1 {
height: 125px;
width: 125px;
background: #11101d;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 {
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.prog.shrink .div1 .collapse {
display: none;
}
.prog.expand .div1 .collapse {
border: 1px solid #00f;
position: absolute;
top: 10px;
left: 10px;
height: 40px;
filter: invert(1);
background: #778;
border-radius: 5px;
}
.prog.shrink .div1 .progNum {
padding: 7px;
position: relative;
height: 75px;
width: 75px;
background: rgba(250, 250, 255, 0.45);
border-radius: 50%;
transform: translateY(-15px);
}
.prog.shrink .div1 .progNum::after {
content: var(--i);
position: absolute;
bottom: -28px;
left: 50%;
transform: translateX(-50%);
color: #0088ff;
font-size: 15px;
font-weight: 500;
font-family: "Poppins", sans-serif;
opacity: 0.8;
}
.prog.expand .div1 .progNum {
background: #0088ff;
height: 125px;
width: 125px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
box-shadow: 0 0 20px rgba(0, 0, 255, 0.2);
}
.prog.shrink .div1 .progNum>div {
background: #11101d;
height: 100%;
width: 100%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div {
background: #def;
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.shrink .div1 .progNum>div>h1 {
font-size: 2.5em;
color: #0088ff;
font-weight: bold;
opacity: 0.8;
}
.prog.expand .div1 .progNum>div>h1 {
font-size: 52px;
}
.prog.shrink div2 {
display: none;
}
.prog.expand .div2 {
padding: 20px;
width: calc(100% - 250px);
}
.prog.expand .div2 h1 {
color: #fff;
font-size: 30px;
font-family: "Poppins", sans-serif;
}
.prog.expand .div2 p {
color: rgba(255, 255, 255, 0.8);
height: 100px;
margin-top: 20px;
margin-bottom: 10px;
font-size: 17px;
}
.prog.expand .div2 .btns {
width: 100%;
display: flex;
}
.prog.expand .div2 .btns .btn {
padding: 10px 15px;
display: flex;
justify-content: center;
align-items: center;
background: #0bc42a;
border: none;
border-radius: 5px;
color: #fff;
}
.prog.expand .div2 .btns .btn1 {
padding: 10px;
}
.prog.expand .div2 .btns .btn2 {
margin-left: 20px;
}
.prog.expand .div2 .btns .btn2 span {
font-size: 20px;
}
.prog.expand .div2 .btns .btn img {
filter: invert(1);
}
.prog.expand .div3 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
background: #11101d;
}
.prog.expand .div3 .h-div3 {
margin-left: -10px;
margin-top: -10px;
width: calc(100% + 20px);
min-height: 50px;
background: #007bff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
}
.prog.expand .div3 .h-div3 h1 {
font-size: 30px;
color: #fff;
}
.prog.expand .div3 .h-div3 img {
filter: invert(1);
height: 30px;
}
.prog.expand .div3 .d-link-div3 {
margin-top: 20px;
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: row;
padding: 15px 0;
}
.prog.expand .div3 .d-link-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .d-link-div3 a {
margin: 5px 5px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
.prog.expand .div3 .c-link-div3 {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 0px;
min-height: 50px;
}
.prog.expand .div3 .c-link-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .c-link-div3 a {
display: block;
margin-top: 20px;
margin-bottom: 20px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
letter-spacing: 1px;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
.prog.expand .div3 .view-div3 {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 0px;
min-height: 50px;
}
.prog.expand .div3 .view-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .view-div3 a {
display: block;
margin-top: 20px;
margin-bottom: 10px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
letter-spacing: 1px;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
#media screen and (max-width: 700px) {
.home-content {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 22px;
min-width: 270px;
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #11101d;
border-radius: 8px;
box-shadow: 0 -5px 5px rgba(250, 250, 255, 0.05), inset 0 -5px 5px rgba(250, 250, 255, 0.05), 0 5px 5px rgba(0, 0, 0, 0.3), inset 0 5px 5px rgba(0, 0, 0, 0.3);
}
.home-content h1 {
margin-top: 15px;
font-size: 32px;
font-family: "Poppins", sans-serif;
}
.home-content .hc-links {
position: relative;
margin-top: 10px;
margin-bottom: 25px;
width: 100%;
border-radius: 8px;
}
.home-content .hc-links div {
padding: 12px;
margin-top: 15px;
display: flex;
flex-direction: column;
align-items: stretch;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border-radius: 10px;
}
.home-content .hc-links div:nth-child(2) {
margin-bottom: 10px;
}
.home-content .hc-links div h1 {
font-size: 25px;
color: #def;
margin-bottom: 5px;
}
.home-content .hc-links div a {
white-space: nowrap;
text-decoration: none;
color: #fff;
background: #007bff;
font-size: 16px;
padding: 8px;
text-align: center;
border-radius: 5px;
}
.container .content {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.content .prog.shrink {
margin: 6px;
margin-bottom: 12px;
}
.content .prog.expand {
position: relative;
top: 0;
left: 0;
transform: translate(0, 0);
width: 250px;
min-height: 370px;
border-radius: 10px;
overflow: hidden;
margin: 10px;
background: #11101d;
flex-direction: column;
}
.prog.expand .div1 {
position: relative;
top: 0px;
width: 100%;
height: 100px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #007bff;
}
.prog.expand .div1 .collapse {
height: 32px;
filter: invert(0);
opacity: 1;
position: absolute;
right: 10px;
}
.prog.expand .div1 .progNum {
position: absolute;
bottom: -37px;
left: 15px;
background: #11101d;
height: 75px;
width: 75px;
padding: 7px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div {
background: #eee;
border-radius: 50%;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div>h1 {
font-size: 2.5em;
color: #000;
opacity: 0.6;
}
.prog.expand .div2 {
padding: 8px 16px;
display: block;
position: relative;
left: 0;
top: 0;
min-height: 270px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
}
.prog.expand .div2 h1 {
transform: translateY(-10px);
align-self: flex-end;
margin-right: 0px;
font-size: 24px;
font-weight: 700;
color: #fff;
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
}
.prog.expand .div2 p {
transform: translateY(-10px);
margin-top: 10px;
margin-bottom: 0px;
font-size: 16.5px;
color: rgba(250, 250, 255, 0.8);
height: 160px;
overflow-y: scroll;
font-family: "Source Sans Pro", sans-serif;
word-break: break-all;
}
.prog.expand .div2 .btns {
display: flex;
justify-content: flex-start;
}
.prog.expand .div2 .btns .btn {
border: none;
border-radius: 4px;
}
.prog.expand .div2 .btns .btn1 {
padding: 4px 5px;
}
.prog.expand .div2 .btns .btn1 img {
height: 28px;
}
.prog.expand .div2 .btns .btn2 {
margin-left: 10px;
padding: 5px 10px;
}
.prog.expand .div2 .btns .btn2 span {
font-size: 20px;
margin-right: 10px;
color: #fff;
font-family: "Source Sans Pro", sans-serif;
font-weight: 500;
}
.prog.expand .div2 .btns .btn2 img {
height: 25px;
}
.prog.expand .div3 .d-link-div3 {
flex-direction: column;
align-items: center;
}
.prog.expand .div3 .d-link-div3 a {
margin: 7px 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>C++ programs</title>
<link rel="stylesheet" href="css/sideBar.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<section class="main">
<!--< --sideBar-- >-->
<section class="sidebar close" id="sideBar">
<div class="logo-section close" id="logoSection">
<img src="svg/cpp.svg" id="btn1">
<h1>C++<span>programs</span></h1>
<img src="svg/bar.svg" id="btn2" class="close">
</div>
<ul class="nav-list close" id="navList">
<li>
<a href="11th.html" class="navLinks">
<img src="svg/1.svg" class="navImg">
<span class="navItem">
11th class
</span>
</a>
<span class="tooltip">
11th class
</span>
</li>
<li>
<a href="12th.html" class="navLinks">
<img src="svg/2.svg" class="navImg">
<span class="navItem">
12th class
</span>
</a>
<span class="tooltip">
12th class
</span>
</li>
<li>
<a href="others.html" class="navLinks">
<img src="svg/3.svg" class="navImg">
<span class="navItem">
Others
</span>
</a>
<span class="tooltip">
Others
</span>
</li>
<li>
<a href="feedback.html" class="navLinks">
<img src="svg/4.svg" class="navImg">
<span class="navItem">
Feedback
</span>
</a>
<span class="tooltip">
Feedback
</span>
</li>
<li>
<a href="more.html" class="navLinks">
<img src="svg/5.svg" class="navImg">
<span class="navItem">
More
</span>
</a>
<span class="tooltip">
More
</span>
</li>
<li>
<a href="FAQ.html" class="navLinks">
<img src="svg/6.svg" class="navImg">
<span class="navItem">
FAQ
</span>
</a>
<span class="tooltip">
FAQ
</span>
</li>
<li class="theme">
<a id="theme">
<span>
Darkmode
</span>
<img src="svg/sun.svg" id="ThemeImg">
</a>
</li>
</ul>
</section>
<!--< --content-section-- >-->
<section class="container">
<div class="title">
<h1>C++ programs</h1>
</div>
<div class="content 11th">
<!--program 1-->
<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse" id="collapse">
<div class="progNum" style="--i: 'Program 1'">
<div>
<h1>1</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 01:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis.
</p>
<div class="btns">
<button class="btn btn1 showDiv3">
<img src="svg/dash.svg">
</button>
<button class="btn btn2">
<span>Source code</span>
<img src="svg/arrow.svg">
</button>
</div>
</div>
<div class="div3">
<div class="h-div3">
<h1>C++</h1>
<img src="svg/close.svg" class="div3-close" />
</div>
<div class="d-link-div3">
<span>Download</span>
Turbo C++ Code
Dev C++ Code
</div>
<div class="c-link-div3">
<span>Compiler</span>
Compile
</div>
<div class="view-div3">
<span>View Code</span>
View Code
</div>
</div>
</div>
<!--program 2-->
<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse">
<div class="progNum" style="--i: 'Program 2'">
<div>
<h1>2</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 02:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis.
</p>
<div class="btns">
<button class="btn btn1">
<img src="svg/dash.svg">
</button>
<button class="btn btn2">
<span>Source code</span>
<img src="svg/arrow.svg">
</button>
</div>
</div>
</div>
</div>
</section>
</section>
<script src="js/sidebar.js"></script>
<script src="js/main.js"></script>
<script>
links[0].classList.add('active');
</script>
</body>
</html>
I want to close the div by changing its class from prog expand to prog shrink
Can anyone tell how can I achieve that ...
Full project : link

First you need to have a unique id for example id="prog-one" id="prog-two".
Secondly you need to set the data-target attribute so you can target specific div to toggle(add/remove) classes like this.
<img src="svg/close.svg" class="collapse" data-target="prog-two" id="collapse">
Finally you have to get all the collapse image and add the event listener.
var closeBtns = document.querySelectorAll('.collapse');
closeBtns.forEach(closeBtn => {
closeBtn.addEventListener('click', function({target}) {
const targetId = target.getAttribute('data-target');
const targetDOM = document.getElementById(targetId);
console.log('close button clicked..');
targetDOM.classList.remove('expand');
targetDOM.classList.add('shrink');
})
})
Here is the code pen link.😊 LINK ONE LINKTWO
[UPDATED]
var progElements = document.getElementsByClassName("prog");
var closeBtn = document.getElementById("collapse");
for (let i = 0; i < progElements.length; i++) {
progElements[i].onclick = function ({ target }) {
if (target.getAttribute("class") === "collapse") return;
this.classList.add("expand");
this.classList.remove("shrink");
console.log("running");
for (let j = 0; j < progElements.length; j++) {
if (i !== j) {
if (!progElements[j].classList.contains("shrink")) {
progElements[j].classList.add("shrink");
progElements[j].classList.remove("expand");
}
}
}
};
}
var showDiv3 = document.getElementsByClassName("showDiv3");
var div3 = document.getElementsByClassName("div3");
var div3Close = document.getElementsByClassName("div3-close");
for (let i = 0; i < div3.length; i++) {
showDiv3[i].onclick = function () {
div3[i].style.display = "block";
div3[i].style.zIndex = "100";
};
div3Close[i].onclick = function () {
div3[i].style.display = "none";
};
}
var closeBtns = document.querySelectorAll(".collapse");
closeBtns.forEach((closeBtn) => {
closeBtn.addEventListener("click", function ({ target }) {
const targetId = target.getAttribute("data-target");
const targetDOM = document.getElementById(targetId);
console.log("close button clicked..");
targetDOM.className = "prog shrink";
});
});

How to display a message on a particular hovered card?

I have three cards when I hover on any card it it should translate upwards up to this it's working fine, now what my requirement is when ever the hovered card translates there should be a small space in that I want to fill with some message. Please help me to achieve this thing.
Note - each card contains different messages
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons {
margin-left: -40%;
}
/* .fas{
background: transparent;
color:red;
} */
button {
border: none;
position: absolute;
}
.fas {
/* padding-left:2000%; */
background: #ebf5fc;
padding-top: 500%;
color: yellowgreen;
font-weight: 600;
/* top:10;
right:50; */
}
audio {
margin-top: 40%;
}
* {
margin: o;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
/* background:#c7c744; */
}
#my_audio {
margin-top: -40%;
}
.main-section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ebf5fc;
}
.container {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card {
position: relative;
width: 320px;
height: 440px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
border-radius: 15px;
margin: 30px;
}
.container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box {
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #b95ce4, #4f29cd);
}
.container .card .box .content {
padding: 20px;
text-align: center;
}
.container .card .box .content h2 {
position: absolute;
top: -10px;
right: 30px;
font-size: 8em;
color: rgba(0, 0, 0, 0.02);
transition: 0.5s;
pointer-events: none;
}
.container .card:hover .box .content h2 {
color: rgba(0, 0, 0, 0.05);
}
.container .card .box .content h3 {
font-size: 1.8em;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card .box .content p {
font-size: 1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card:hover .box .content h3,
.container .card:hover .box .content p {
color: #fff;
}
.container .card:hover .box .content p {
font-style: italic;
color: gold;
}
.container .card .box .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top: 15px;
border-radius: 20px;
color: #fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.container .card:hover .box .content a {
background: #ff568f;
}
#i1 {
width: 100%;
height: 50px;
}
h1 {
text-align: center;
font-size: 65px;
font-style: italic;
}
#love {
color: red;
}
#shape {
width: 150px;
height: 150px;
border-radius: 50%;
margin-left: 45%;
margin-top: -12%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css" rel="stylesheet" />

First, you have to use an absolute div to position it on the bottom of the card, next use z index in order to move the absolute div behind the main moving card
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<title>Special-Wishes </title>
<style>
.secret{
position : absolute;
bottom : 2px;
padding : 20px;
z-index : 0
}
.box{
z-index:1
}
</style>
<script>
</script>
</head>
<body>
<h1>kitty <span class="wifey">puppy</span></h1>
<img id="shape"src="https://i.pinimg.com/originals/2f/9d/95/2f9d9562eb2252ae132b4bf8258aa18a.jpg"/>
<audio autoplay id="player">
<source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
<button id="music" onclick="document.getElementById('player').play()">
<i style='font-size:24px;' class='fas'></i>
</button>
<div class="main-section">
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2 id="initial">I</h2>
<h3>Card One</h3>
<p>Your birthday is the first day of another 365-day journey. Be the shining thread in the beautiful tapestry of the world to make this year the best ever.</p>
Read More
</div>
</div>
<div class="secret">
This is my secret
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2><span class="heart-icon" style='font-size:180px;'>♥</span></h2>
<h3>Card Two</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>U</h2>
<h3>Card Three</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
</div>
</div>
</body>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons{
margin-left:-40%;
}
/* .fas{
background: transparent;
color:red;
} */
button{
border: none;
position:absolute;
}
.fas{
/* padding-left:2000%; */
background:#ebf5fc;
padding-top:500%;
color:yellowgreen;
font-weight: 600;
/* top:10;
right:50; */
}
audio{
margin-top:40%;
}
*{
margin: o;
padding:0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
/* background:#c7c744; */
}
#my_audio{
margin-top:-40%;
}
.main-section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background:#ebf5fc;
}
.container{
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card{
position: relative;
width:320px;
height:440px;
box-shadow: inset 5px 5px 5px rgba(0,0,0,0.05),
inset -5px -5px 5px rgba(255,255,255,0.5),
5px 5px 5px rgba(0,0,0,0.05),
-5px -5px 5px rgba(255,255,255,0.5);
border-radius: 15px;
margin:30px;
}
.container .card .box{
position: absolute;
top:20px;
left:20px;
right:20px;
bottom:20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box{
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
background: linear-gradient(45deg,#b95ce4,#4f29cd);
}
.container .card .box .content{
padding:20px;
text-align: center;
}
.container .card .box .content h2{
position: absolute;
top:-10px;
right:30px;
font-size: 8em;
color:rgba(0,0,0,0.02);
transition: 0.5s;
pointer-events: none;
}
.container .card:hover .box .content h2{
color: rgba(0,0,0,0.05);
}
.container .card .box .content h3{
font-size:1.8em;
color: #777;
z-index:1;
transition: 0.5s;
}
.container .card .box .content p{
font-size:1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card:hover .box .content h3,
.container .card:hover .box .content p{
color: #fff;
}
.container .card:hover .box .content p{font-style: italic;color: gold;}
.container .card .box .content a{
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top:15px;
border-radius: 20px;
color:#fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.container .card:hover .box .content a{
background: #ff568f;
}
#i1{
width:100%;
height:50px;
}
h1{
text-align:center;
font-size:65px;
font-style: italic;
}
#love{
color:red;
}
#shape{
width:150px;
height:150px;
border-radius:50%;
margin-left:45%;
margin-top:-12%;
}
.
</style>
</html>

Checkbox with classList.toggle isn't toggling the classes. No errors shown

I have a checkbox, that should trigger the menu to slide in from left side of the screen.The problem is when I got the menu hidden on the left, i can't make the function work. When I click the checkbox icon, it's animation works but nothing else happens. The menu is still hidden and I get no errors.
Here is a snippet of my code:
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: Open Sans;
line-height: 1.6;
display: block;
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu" onclick="showMenuSlider()">
<label for="menu" class="icon"><input type="checkbox" id="menu">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
The button is outside the header, because i need it to be on top of the dark opacity behind the menu. In the future I will make a nice white rounded background to it, so it won't invisible.
Of course if you know better way to do it, be my guest. I'm struggling with this for a while...

The problem is that you add the onclick handler on the header-downbar-menu and not on the checkbox. So when clicking the checkbox you also click on header-downbar-menu so the event is triggered twice. So the class is toggled twice ( added/removed in the same time...almost :) )
Add the click event on the input. ( you could use an onchange event instead of the click event to check the state checked or unchecked , that might help you )
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu">
<label for="menu" class="icon"><input type="checkbox" id="menu" onclick="showMenuSlider()">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>

Div Layout Positioning

I'm trying to accomplish the following layout:
I want a centered Brain with four square links. The "Polaroids" one the left and the right should appear if you are hovering over the right part of the navigation button. So if you hover over the first like in the picture, the first polaroid left up corner should appear.
I tried the following div structure:
.html,
body {
height: 100%;
}
.title {
font-family: lato;
}
.main-content {
width: 100%;
float: left;
background-color: #fefdf9;
height: 100%;
}
.container {
height: 100%;
width: 100%;
margin: 0px auto;
}
.page {
width: 100%;
float: left;
padding: 0px 0px 0px 0px;
}
.top-left {
background-color: #fefdf9;
width: 35%;
float: left;
padding: 0px 0px 0px 0px;
min-height: 1px;
}
.top-middle {
background-color: #fefdf9;
width: 30%;
float: left;
padding: 0px 0px 0px 0px;
}
.top-right {
background-color: #fefdf9;
width: 35%;
float: left;
padding: 0px 0px 0px 0px;
min-height: 1px;
}
.content {
width: 100%;
float: left;
height: auto;
padding-top: 8px;
}
.footer {
background-color: #383838;
text-align: center;
float: left;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
margin: auto;
}
.FooterText {
FONT-SIZE: 26px;
FONT-FAMILY: "Lato Bold";
color: rgb(255, 79, 78);
}
.header {
width: 40%;
float: left;
max-height: 60px;
}
.header-top {
width: 100%;
float: left;
line-height: 0;
font-family: "Lato Thin";
}
.header-bot {
width: 100%;
height: 4%;
display: inline;
font-family: "Lato Black";
font-size: 30px;
margin-top: -5px;
}
.Left {
width: 37%;
min-height: 1px;
float: left;
white-space: nowrap;
}
.left > div {
height: 50px;
width: 100px;
background: #555;
display: inline-block;
margin: 10px;
}
.Middle {
width: 26%;
float: left;
margin: auto;
height: 580px;
}
.Right {
width: 37%;
min-height: 1px;
float: left;
}
#h1 {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
max-height: 100%;
image-rendering: crisp-edges;
}
#Willkommenstext {
font-size: 18px;
text-align: justify;
}
.News {
position: relative;
width: 40%;
padding-left: 20%
}
.News img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.News p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.Kontakt {
position: relative;
width: 40%;
padding-left: 25%;
margin-top: -15%;
}
.Kontakt img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.Kontakt p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.Kalender {
position: relative;
width: 40%;
padding-left: 10%
}
.Kalender img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.Kalender p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.Anfahrt {
position: relative;
width: 40%;
padding-left: 5%;
margin-top: -15%;
}
.Anfahrt img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.Anfahrt p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.left1 {
width: 10%;
background-color: white;
min-height: 1px;
}
.left2 {
width: 10%;
background-color: white;
min-height: 1px;
}
body {
background: #F1F1F1;
padding: 0;
margin: 0;
font-size: small;
}
ul.square-menu {
font-size: 0;
list-style-type: none;
list-style: none;
padding: 0;
font-family: "Kavoon", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
width: 400px;
margin: 40px auto;
}
ul.square-menu li {
float: left;
margin: 0px;
}
ul.square-menu li a {
display: block;
text-decoration: none;
padding: 80px 60px;
color: white;
font-weight: normal;
font-size: 150%;
width: 60px;
height: 20px;
text-align: center;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.1s ease-in;
-ms-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}
ul.square-menu li a.slink-x {
background-image: url(../images/NavLeftUp.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a.slink-y {
background-image: url(../images/NavRightUp.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a.slink-z {
background-image: url(../images/NavLeftDown.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a.slink-a {
background-image: url(../images/NavRightDown.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a:hover {
font-size: 26px;
a -moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-moz-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main-content">
<div class="container">
<div class="page">
<div class="top-left">
</div>
<div class="top-middle">
<div class="header">
<div class="header-top" style="display=" inline="">
<h1>Test Header</h1>
</div>
<div class="header-bot">
<h2>Test Underline</h2>
</div>
</div>
</div>
<div class="top-right">
</div>
</div>
<div class="content">
<div class="Left">
<div class="News">
<p>News</p>
<img src="./images/news.jpg">
</div>
<div class="Kontakt">
<p>News 2</p>
<img src="./images/news.jpg">
</div>
</div>
<div class="Middle">
<ul class="square-menu">
<li>
Home
</li>
<li>
About
</li>
<li>
News
</li>
<li>
Contact
</li>
<br style="clear:both;" />
</ul>
<table id="Willkommenstext" width="420" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae fringilla neque, a elementum ligula. Proin arcu velit, euismod a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae fringilla neque, a elementum ligula.
Proin arcu velit, euismod a.</td>
</tr>
</tbody>
</table>
</div>
<div class="Right">
<div class="Kalender">
<p>Kalender</p>
<img src="./images/news.jpg">
</div>
<div class="Anfahrt">
<p>Anfahrt</p>
<img src="./images/news.jpg">
</div>
</div>
<div class="footer">
<table width="50%" align="center">
<tbody>
<tr>
<td>BildLogo</td>
<td>Impressum</td>
<td>About</td>
<td>Kontakt</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The result is this:
I am a ABSOLUTE Beginner and managed to get to this point, so i wont stop^^ As far as I understood I can not change the boxes visibility with css and hover because my divs are not nested.
I stumbled upon javascript and jquery for this, but this looks like kinda too complicated to get it working without learning the language.
Is there a way to change the div structure so i can hide the Polaroids with css?
I would be very thankful for a solution to this, I am kinda stuck since a few days. If there is no other way than java/jquery i would take that also :D
Thank you very much my friends! :)

Categories

Resources