This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 1 year ago.
I made a design where I want to show text section after hover on info icon. But It is not working after hover on info icon. Please help me. I could not able to find my problem in this code. But most probably I think the problem is in the hover section. But I could not able to fix it. Please help me to fix this problem.
*{
margin: 0;
padding: 0;
}
.hover1 {
height: 500px;
width: 700px;
background: #00a8ff;
margin: 10px auto;
position: relative;
}
.icon-info{
position: absolute;
top: 150px;
left: 500px;
background: white;
padding: 5px 11px;
border-radius: 50%;
}
.text{
height: 200px;
width: 360px;
background: white;
position: relative;
top: 150px;
left: 130px;
padding: 20px;
border-radius: 13px;
display: inline-block;
visibility: hidden;
opacity: 0;
}
.text h3{
font-size: 30px;
margin: 20px 5px;
}
.text p{
font-size: 18px;
}
/* hover */
.icon-info:hover .text{
visibility: visible;
opacity: 1;
transition: .5s;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hover effect</title>
<link rel="stylesheet" href="./hover.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
<div class="hover1">
<i class="fas fa-info icon-info"></i>
<div class="text">
<h3>This is Tittle</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur dolores quis enim facilis doloribus iste hic dolore cumque rerum, in earum omnis obcaecati blanditiis nostrum ab. Tempora officia voluptatibus ex!</p>
</div>
</div>
</body>
</html>
Just add a + in hover style as follow:
*{
margin: 0;
padding: 0;
}
.hover1 {
height: 500px;
width: 700px;
background: #00a8ff;
margin: 10px auto;
position: relative;
}
.icon-info{
position: absolute;
top: 150px;
left: 500px;
background: white;
padding: 5px 11px;
border-radius: 50%;
z-index:1;
}
.text{
height: 200px;
width: 360px;
background: white;
position: relative;
top: 150px;
left: 130px;
padding: 20px;
border-radius: 13px;
display: inline-block;
visibility: hidden;
opacity: 0;
}
.text h3{
font-size: 30px;
margin: 20px 5px;
}
.text p{
font-size: 18px;
}
/* hover */
.icon-info:hover + .text{
visibility: visible;
opacity: 1;
transition: .5s;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hover effect</title>
<link rel="stylesheet" href="./hover.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
<div class="hover1">
<i class="fas fa-info icon-info"></i>
<div class="text">
<h3>This is Tittle</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur dolores quis enim facilis doloribus iste hic dolore cumque rerum, in earum omnis obcaecati blanditiis nostrum ab. Tempora officia voluptatibus ex!</p>
</div>
</div>
</body>
</html>
Related
This question already has answers here:
How to turn off word wrapping in HTML?
(6 answers)
Closed 2 years ago.
I am a bit stuck with my code
I did a custom drop down menu and my problem is my div with my content don't take 100% of the content
my div is blocked at 160px here is the css code
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px; // I wanted 100% of the content
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 3;
right:0;
}
and the full code in jsfiddle
https://jsfiddle.net/kg0tjLr9/1/
I think you want max-content instead of specifying px like:
$(document).ready(function() {
$('.dropbtn').click(function() {
//$('.dropdown-content').css('display','block');
$('.dropdown-content').toggle();
$('#overlay').toggle();
})
$('#overlay').click(function(){
$('#overlay').css('display','none');
$('.dropdown-content').toggle();
});
});
#main_content{
z-index:-1;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
float:right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: max-content;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 3;
right:0;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main_content'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque veritatis blanditiis porro asperiores quas quasi minima. Laudantium consequatur obcaecati dignissimos ducimus aliquam culpa, libero animi odit! Laboriosam ipsam rem, quas.
</div>
<div class="dropdown">
<div id="overlay"></div>
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Lorem ipsum dolor sit amet, consectetur
Link 2
Link 3
</div>
</div>
max-content is not supported by internet explorer ( https://developer.mozilla.org/en-US/docs/Web/CSS/max-content)
If you want IE compatibility (add width: auto; white-space: nowrap; instead of max-content):
$(document).ready(function() {
$('.dropbtn').click(function() {
//$('.dropdown-content').css('display','block');
$('.dropdown-content').toggle();
$('#overlay').toggle();
})
$('#overlay').click(function(){
$('#overlay').css('display','none');
$('.dropdown-content').toggle();
});
});
#main_content{
z-index:-1;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
float:right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
width: auto;
white-space: nowrap;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 3;
right:0;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main_content'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque veritatis blanditiis porro asperiores quas quasi minima. Laudantium consequatur obcaecati dignissimos ducimus aliquam culpa, libero animi odit! Laboriosam ipsam rem, quas.
</div>
<div class="dropdown">
<div id="overlay"></div>
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Lorem ipsum dolor sit amet, consectetur
Link 2
Link 3
</div>
</div>
I have tried my best to solve the issue but it's not working. I want to make a gradient border on my website for a slideshow (similar to the one on this video). I used (:before) pseudo selector here is my HTML code:
* {
color: white;
margin: 0px 0px;
padding: 0px 0px;
box-sizing: border-box;
}
body {
background-color: #060c21;
}
/* NavBar Starts */
#mainnav {
display: flex;
justify-content: center;
padding: 15px;
background-color: black;
width: 98%;
position: static;
}
.items>a {
font-family: "Roboto Slab", serif;
text-decoration: none;
}
.items {
margin: 0 5vw 0 5vw;
padding: 1vw;
width: fit-content;
font-size: 1.3rem;
}
.items>a:hover {
color: rgb(0, 255, 242);
}
/* NavBar Ends */
/* Content Starts */
.slide-box {
position: relative;
border: 2px solid red;
height: 75vh;
width: 95%;
margin: 2% auto;
}
.slide-box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: white;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#531&display=swap" rel="stylesheet" />
<!-- font-family: 'Roboto Slab', serif; -->
<link rel="stylesheet" href="Vaishnavi.css" />
</head>
<body>
<nav>
<div id="mainnav">
<div class="items">
Home
</div>
<div class="items">
About US
</div>
<div class="items">
Creations
</div>
<div class="items">
Help
</div>
</div>
</nav>
<div class="slide-box">
<h1>This is glowing box</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
</p>
</div>
</body>
</html>
Please tell me the mistake I am making and why my z-index is not working correctly. In my view, I have written the code correctly.
Is this something that you are looking for?
You can see that I recreated the example based on this video that you have provided.
* {
color: white;
margin: 0px 0px;
padding: 0px 0px;
box-sizing: border-box;
}
body {
background-color: #060c21;
}
/* NavBar Starts */
#mainnav {
display: flex;
justify-content: center;
padding: 15px;
background-color: black;
width: 98%;
position: static;
}
.items>a {
font-family: "Roboto Slab", serif;
text-decoration: none;
}
.items {
margin: 0 5vw 0 5vw;
padding: 1vw;
width: fit-content;
font-size: 1.3rem;
}
.items>a:hover {
color: rgb(0, 255, 242);
}
/* NavBar Ends */
/* Content Starts */
.slide-box {
position: relative;
margin: 2% auto;
height: 75vh;
width: 95%;
background: linear-gradient(0deg, #000, #262626);
}
.slide-box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: animate 20s linear infinite;
}
#keyframes animate {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#531&display=swap" rel="stylesheet" />
<!-- font-family: 'Roboto Slab', serif; -->
<link rel="stylesheet" href="Vaishnavi.css" />
</head>
<body>
<nav>
<div id="mainnav">
<div class="items">
Home
</div>
<div class="items">
About US
</div>
<div class="items">
Creations
</div>
<div class="items">
Help
</div>
</div>
</nav>
<div class="slide-box">
<h1>This is glowing box</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
</p>
</div>
</body>
</html>
What you were missing in your code to see the text was the line below:
.slide-box {
background: linear-gradient(0deg, #000, #262626);
}
The z-index worked just fine but because your background color was white and also the text color was white, you could not see the text.
Here is the code how you can achieve gradient border(code is copied from css-tricks). For more please visit here
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #222;
}
.module-border-wrap {
max-width: 250px;
padding: 1rem;
position: relative;
background: linear-gradient(to right, red, purple);
padding: 3px;
}
.module {
background: #222;
color: white;
padding: 2rem;
}
<div class="module-border-wrap">
<div class="module">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
</div>
</div>
I used CSS instead of Fontawesome to generate the arrows. I think it makes more sense than loading a separate icon library. However I have trouble positioning those CSS arrow to the center, when it points upwards it looks great, I think it's in the center or at least near to the center, but when it points downwards it looks like the arrow moved towards the bottom.
I would be grateful for any suggestion
"use strict";
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container > .panel + .panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header > h4 {
margin: 0;
}
.panel-header > h4 > a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
position: absolute;
top: 22px;
right: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
First question?
</h4>
<div class="arrow"><div class="arrow-up"></div></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
Second question?
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
</div> <!-- .panel-container -->
</div> <!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
</html>
With the current setup you have, the best solution would be to either -
Change the top value in the animation class. You will also want to change the animate value to all so that it also animates the change in the top value without jumping.
.arrow {
...
transition: all 0.15s linear;
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
top: 18px;
}
You could also change the transform-origin to 100% center, however this causes the animation to spin in a weird way.
You could also look into using built-in HTML arrows and rotating them if you do not want to load a font library or an SVG icon. It may behave more how you are expecting - https://www.toptal.com/designers/htmlarrows/
First of all you can avoid using position: absolute for this type of problem where display: flex do the trick:
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container>.panel+.panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
display: flex; /* <- Use flexbox */
justify-content: space-between;
align-items: center;
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header>h4 {
margin: 0;
}
.panel-header>h4>a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
/* Don't need position absolute anymore */
margin: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {}
.panel.open .arrow {
margin-top: -5px; /* <- Remove arrow heigth (5px) to stay at the same level */
transform: rotate(-315deg);
transform-origin: center center;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
First question?
</h4>
<div class="arrow">
<div class="arrow-up"></div>
</div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi blanditiis corporis dicta, dolor dolores enim facilis fuga itaque iure iusto molestiae mollitia natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div>
<!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
Second question?
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi blanditiis corporis dicta, dolor dolores enim facilis fuga itaque iure iusto molestiae mollitia natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div>
<!-- .panel -->
</div>
<!-- .panel-container -->
</div>
<!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
</html>
Try changing your top property of the .arrow class to top: 50% so that it isn't hardcoded.
Then, add to your transform property translate(0, -50%).
Use the top propriety in CSS.
This will set the top position of the arrow when rotating it.
Here is your code:
"use strict";
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container > .panel + .panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header > h4 {
margin: 0;
}
.panel-header > h4 > a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
position: absolute;
top: 22px;
right: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
top: 15px; //Do it!
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
First question?
</h4>
<div class="arrow"><div class="arrow-up"></div></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
Second question?
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
</div> <!-- .panel-container -->
</div> <!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
A living demo: https://codepen.io/marchmello/pen/mdedGra
You need to use the position: absolute and top position on your .panel.open .arrow css like this :
"use strict";
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container > .panel + .panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header > h4 {
margin: 0;
}
.panel-header > h4 > a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
position: absolute;
top: 22px;
right: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
position: absolute;
top: 30%;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
First question?
</h4>
<div class="arrow"><div class="arrow-up"></div></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
Second question?
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
</div> <!-- .panel-container -->
</div> <!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
</html>
I am having a simple web page with a navigation bar. When is toggle my navigation bar I want the rest of area in my page to be overlay live Youtube(A sample image is attached below). But after trying 100 time the result is attached below(A sample image is attached below).The problem is it's not overlaying the element which has defined color attribute.
My css code to achieve overlay:
.overlay{
width: 100%;
position: fixed !fixed;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5) !important;
z-index:0;
cursor: pointer;
}
You need to add an higher z-index and a grey background overlay.
$(".btn").click(function () {
$(".overlay").show();
});
.overlay {
background-color: rgba(128, 128, 128, 0.40);
position: fixed;
width: 100%;
height: 100%;
z-index: 99999;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="overlay">
</div>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit.</div>
<input type="text">
<button class="btn btn-success">Submit</button>
</div>
The below example just plays with visibility and opacity of overlay wrapper.
$("#click").on("click", function(){
$(".orientation-check-wrapper").toggleClass('show-overlay');
});
.orientation-check-wrapper {
height: 100vh;
position: fixed;
width: 100%;
background: rgba(0,0,0,0.7);
z-index: 99;
top: 0;
opacity:0;
transition: .4s all;
opacity: 0;
visibility: hidden;
}
.orientation-check-text {
top: 100px;
right: 0;
left: 0;
bottom:0;
position: absolute;
margin: 0 auto;
width: 390px;
height: 18px;
background: #fff;
padding: 12px;
border-radius: 8px;
box-shadow: 0 0 10px #3493c1;
font-size: 13px;
color: #000;
text-align:center;
font-family: sans-serif;
}
.show-overlay{
opacity: 1;
visibility: visible;
}
#click{
z-index: 999;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="click" id="click" />
<div class="orientation-check-wrapper">
<div class="orientation-check-text">This application is best supported on resolutions above 800px</div>
</div>
I would like to add the possibility of usage of css filters in this case, as a side technique.
They are now widely available into many browsers, we can with them do pretty nice stuffs, without adding an overlay.
Here on this simple example, the blur filter is used. The filter is added by javascript alone. This way, there is no need to modify the html or the css. It can be useful.
I took the html from the top answer, which is the good regular way to do this.
document.getElementsByClassName("content")[0].setAttribute("onclick","this.style.filter='blur(2px)'")
<div class="overlay">Some text
</div>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit.</div>
<input type="text">
<button class="btn btn-success">Submit</button>
</div>
The list of css filters:
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
Further infos: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
I have updated a post with some code which may probably very helpful to simulate YouTube like overlay.
$(document).ready(function() {
$(".overlay, .close").hide();
$("#btnClickme").bind("click", function() {
$(".overlay, .close").fadeIn();
$(".wrapper-btn").fadeOut();
});
$(".btnClose").bind("click", function() {
$(".overlay, .close").fadeOut();
$(".close").unbind("click");
$(".wrapper-btn").fadeIn();
});
});
* {
font-family: 'arial';
font-size: 12px;
}
.close a {
color: #ffffff;
right: 0px;
top: 0px;
font-size: 10px;
position: relative;
z-index: 1;
display: block;
text-decoration:none;
font-size:13px;
}
.close {
position: absolute;
}
.overlay-wrapper {
float: left;
width: 200px;
height: 200px;
position: absolute;
padding: 10px;
}
.wrapper-row {
float: left;
}
.overlay {
float: left;
position: relative;
background-color: #000000;
width: 200px;
height: 200px;
margin: 10px;
opacity: 0.5;
filter: alpha(opacity=50);
/* For IE 8 & 9 (more valid) */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overlay-wrapper'>
<div class="wrapper-row">
<img src="http://via.placeholder.com/200x200" />
</div>
<div class="wrapper-row wrapper-btn">
<input type="button" id="btnClickme" name="btnClickme" value="click here" />
</div>
<div class="close">
<a href="javascript:void(0);" class="btnClose">
(close)
</a>
</div>
</div>
<div class="overlay"></div>
Assuming that you have a structure like this
<aside class="sidebar">
<!-- Stuff-->
</aside>
<section class="content">
<!-- More stuff -->
</section>
and an open class is added to sidebar when the bar is opened, you can use the adjacent sibling combinator to get the overlay
.sidebar.open + .content:before {
width: 100%;
position: fixed !fixed;
display: block;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5) !important;
z-index:0;
cursor: pointer;
}
I've been making this website for school and I thought i'd figure out how parallax scrolling works. So i've started with the simpelest tutorial to be precise this one. After doing this I placed my navigation bar in. I remember this worked fine at the time but after working allot on the responsiveness I didn't check back and now I can't click on the links anymore.
This is my html:
<div id="group2" class="parallax_group">
<!-- <div class="parallax_layer parallax_layer-back">
background
</div> -->
<div class="parallax_layer parallax_layer-base">
<div id="nav" class="nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Over ons</li>
<li>Wat leveren wij?</li>
<li>Contact</li>
<li>Demo</li>
</ul>
</div>
<div class="section group">
<div class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam id nam, necessitatibus at odit nobis vitae, dolor sequi sunt doloremque minima, debitis. Sed debitis possimus esse soluta mollitia est culpa.</p>
</div>
<div id="middle" class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui autem impedit, a, error accusantium soluta molestias quidem quo totam beatae eligendi sint, modi voluptatem nemo fugiat recusandae ullam consequatur nihil?</p>
</div>
<div class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptatibus, quaerat nostrum ullam distinctio praesentium! Nemo eveniet provident id, tenetur cumque natus, quas porro possimus maiores, minus amet laboriosam ea?</p>
</div>
</div>
</div>
</div>
And this is my css:
* {
padding: 0;
margin: 0;
}
body {
text-align: center;
}
h1{
display: inline-block;
font-family: 'Raleway', sans-serif;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
p{
display: inline-block;
font-family: 'Raleway', sans-serif;
color: black;
}
header {
z-index: 5;
line-height: 100vh;
}
header .parallax_layer-back {
background: url(sample.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#group2 {
z-index: 3;
}
#group2 .parallax_layer-base {
background-color: #dbdbdb;
}
.parallax {
perspective: 300px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax_layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax_layer-base {
transform: translateZ(0px);
z-index: 4;
}
.parallax_layer-back {
transform: translateZ(-300px) scale(2);
z-index: 3;
height: 150vh;
}
.parallax_layer-deep{
transform: translateZ(-600px) scale(3);
z-index: 2;
background-color: #dbdbdb;
}
.parallax_group {
position: relative;
height: 100vh;
transform-style: preserve-3d;
/*transform: translate3d(700px, 0, -800px) rotateY(30deg);*/
}
/*Columns*/
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
#middle{
border-top: 0px;
border-bottom: 0px;
border-right: 1px;
border-left: 1px;
border-style: solid;
}
/*navigation*/
.nav {
position: sticky;
top: 0px;
height: 100px;
width: 100%;
z-index: 30;
font-family: 'Raleway', sans-serif;
font-size: 20px;
background-color: #dbdbdb;
}
.nav ul {
list-style-type: none;
margin-left: 0;
padding-top: 40px;
font-size: 25px;
font-family: 'Raleway', sans-serif;
line-height: 0;
z-index: 30;
}
.nav li {
display: inline-block;
margin-left: 15px;
padding-bottom: 25px;
z-index: 30;
}
a:link {
color: #2F649B;
font-family: inherit;
}
a:visited {
color: #2F649B;
}
a:hover {
color: #6D92B9;
text-decoration: none;
}
a:active {
color: #26507C;
text-decoration: none;
}
footer {
position: sticky;
bottom: 0px;
height: 100px !important;
line-height: 100px;
width: 100%;
}
I know it's allot of code but I have no idea what it could be so i went and gone ahead and gave you everything.
edit: The other html parallax group:
<!DOCTYPE html>
<html>
<head>
<title>Squirel WebDesign</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="handheld.css" media="screen and (max-device-width: 480px), screen and (max-width: 480px)">
</head>
<body>
<div class="parallax">
<header class="parallax_group">
<div class="parallax_layer parallax_layer-base">
<h1>i'm a bloody big header preferably with a squirel</h1>
</div>
<div class="parallax_layer parallax_layer-back">
</div>
<div class="parallax_layer parallax_layer-deep">
</div>
</header>