I'm struggling to get multiple modals, opened from different buttons - javascript

! Updated code !
I'm recently trying to learn html/css to code a website. I've been following multiple tutorials but for some reason, my modals aren't working. The buttons to open/close modals aren't working. If anyone could offer any help it would be much appreciated!
Below I've included my html file, stylesheet, and javascript file.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://kit.fontawesome.com/935b67cf83.js" crossorigin="anonymous"></script>
<script src="JS.js"></script> <!-- used to link to javascript-->
<title>yo</title>
</head>
<body>
<section class="flex" id="portfolio">
<h1>
PROJECTS
<!--- <div class="horizontalLine" </div> --->
</h1>
<div class="gallery">
<div class="projectBox">
<img src="images/merseyTrains.png" />
<div class="span">
<p1>MerseyTrainsLive</p1>
<p2>Android/Java</p2>
<button class="modal-open" data-target="#trainModal">Open Modal 1</button>
<!--- <a class="btn" id="TrainBtn" href="#">LEARN MORE</a>
--->
</div>
</div>
<div class="projectBox">
<img src="images/merseyTrains.png" />
<div class="span">
<p1>MerseyTrainsLive</p1>
<p2>Android/Java</p2>
<button class="modal-open" data-target="#project2Modal">Open Modal 2</button>
<!---
<a class="btn" id="Project2Btn" href="#">LEARN MORE</a> --->
</div>
</div>
<div class="projectBox">
<img src="images/merseyTrains.png" />
<div class="span">
<p1>MerseyTrainsLive</p1>
<p2>Android/Java</p2>
<button class="modal-open" data-target="#project3Modal">Open Modal 3</button>
</div>
</div>
</div>
</section>
<!--pop-ups, bg-modal means background-->
<div class="modal" id="trainModal">
<div class="modal-content">
<div class="modal-header">
<img src="images/merseyTrains.png" />
<button class="modal-close" data-target="#trainModal">
×
</button>
<h2> MerseyTrainsLive</h2>
</div>
<div class="modal-body">
<p> idem espum </p>
</div>
</div>
</div>
<div class="modal" id="project2Modal">
<div class="modal-content">
<div class="modal-header">
<img src="images/merseyTrains.png" />
<button class="modal-close" data-target="#project2Modal">
×
</button>
<h2> project 2</h2>
</div>
<div class="modal-body">
<p> idem espum 2 </p>
</div>
</div>
</div>
<div class="modal" id="project3Modal">
<div class="modal-content">
<div class="modal-header">
<img src="images/merseyTrains.png" />
<button class="modal-close" data-target="#project3Modal">
×
</button>
<h2> project 3</h2>
</div>
<div class="modal-body">
<p> idem espum 3 </p>
</div>
</div>
</div>
<div id="overlay"> </div>
</body>
</html>
style.css
body {
}
h1 {
font-size: 40px;
text-align: center;
}
.horizontalLine {
border-top: 5px solid black;
width: 100px;
margin: auto
}
.gallery {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center; /*makes individual boxes centered*/
}
.gallery img {
height: 300px;
width: 300px;
}
.gallery .projectBox {
width: 300px;
position: relative;
display: inline-block;
/*margin: 10px; /*can be used to make the photos spaced out*/
}
.gallery .projectBox img {
width: 100%;
border: 4px solid black;
transition-duration: 0.5s;
opacity: 1;
}
/*when hover over image, the image disappears*/
.gallery .projectBox:hover img {
opacity: 0;
}
.gallery .projectBox .span {
text-align: center;
display: none;
position: absolute;
top: 50px;
left: 50px;
right: 50px;
}
.gallery .projectBox .span p1 {
margin: auto;
font-size: 24px;
line-height: 40px;
padding: 20px;
}
.gallery .projectBox .span p2 {
margin: auto;
font-size: 16px;
line-height: 40px;
}
.gallery .projectBox:hover .span {
opacity: 1;
display: block;
}
.gallery .projectBox .span a {
text-decoration: none;
}
/*modal open buttons*/
.gallery .projectBox .span .modal-open {
display: flex; /*makes layout nice :) */
width: 150px;
padding: 10px; /*how far the lines of button are from text*/
margin: 30px auto;
color: black;
font-size: 20px;
outline: none;
border: 2px solid #f44336;
background: transparent;
cursor: pointer;
}
.gallery .projectBox .span .modal-open:hover {
color: white;
background: #f44336;
}
/* popups */
.modal {
width: 60%;
height: 60%;
position: fixed;
top: 15%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2; /*so appears on top of overlay*/
text-align: center;
background-color: white;
display: none;
}
/*modal close close button*/
.modal-close {
background-color: transparent;
border: none;
font-size: 1.5rem;
}
.modal.active {
display: flex;
}
.modal .modal-content {
display: flex;
border-radius: 4px;
position: relative; /*lets the .close position itself according to content*/
}
/*image for top of modal*/
.modal .modal-content img {
height: 100px;
width: 100px;
padding: 20px;
}
.modal .modal-header .modal-close {
position: absolute;
top: 5px;
right: 14px;
font-size: 42px;
cursor: pointer;
border-radius: 4px;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
}
.overlay.active {
display: block;
}
JS.js
const btns = document.querySelectorAll(".modal-open");
const close_btns = document.querySelectorAll(".modal-close");
const overlay = document.getElementById("overlay");
btns.forEach((btn) => {
const target = btn.dataset.target;
btn.addEventListener("click", () => {
document.querySelector(target).classList.add("active");
overlay.classList.add("active");
})
})
close_btns.forEach((btn) => {
btn.addEventListener("click", () => {
document.querySelector(btn.dataset.target).classList.remove("active");
overlay.classList.remove("active");
})
})
window.onclick = (e) => {
if (e.target == overlay) {
const modals = document.querySelectorAll(".modal");
modals.forEach((modal) => modal.classList.remove("active"));
overlay.classList.remove("active");
}
}
Below is a screenshot of the website page
When I hover over the projectBoxes it reveals info on the project, and the button to open more info on the project (displayed in a modal)

First, let's correct the HTML button to trigger modal number 3.
<button class="modal-open" data-target="#project3Modal">Open Modal 3</button>
Notice the change in "data-target" attribute. The value of this attribute should point to the "id" attribute of the respective modal (as per the JS implementation).
Next, for selecting the overlay <div>, let's use document.getElementById method. As there is only one id="overlay" in your HTML, selecting the element with its unique ID is a good practice, in my personal opinion.
So let's change the code in JS as below:
const overlay = document.getElementById("overlay");
btns.forEach((btn) => {
const target = btn.dataset.target; // Declaring target
btn.addEventListener("click", () => {
document.querySelector(target).classList.add("active");
overlay.classList.add("active");
});
});
With the above two changes, everything should work well. If not, please let me know so I can assist you further. If you need clarity for above code, please do let me know. :)

Related

How come the button doesnt work when clicked?

So I am trying to build this website but the button when pressed does not pop up the screen that will ask to fill with name and phone number and was wondering why this is not working. I am a complete noob when it comes to HTML and CSS, still learning most of the ways and needed help any advice and corrections will be greatly appreicated. Also, I am using JSFiddle I do not know if that makes a difference. Thank you in advance.
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* Full-width input fields */
input[type=text], input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: clear;
color: black;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius: 25px;
}
button:hover {
opacity: 0.8;
background-color: red;
}
/* this is for the box on the top of page */
.boxbar_top{
height:20%;
width: 100%;
position: static; /*assign on top when stroll */
right:0;
overflow:hidden;
background-color: red;
}
/*accessing the button layout */
.boxbar_top a {
float: left;
text-align: left;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* bottom layout of screen */
.boxbar_bttom{
height: 20%;
width: 100%;
position: static; /* assign on top when stroll */
right: 0;
overflow: hidden;
background-color: red;
}
/*accessing the bottom layput */
.box_bar_bttom a{
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* tabs layout */
.tabs{
background-color: inherit;
float: center;
border: 15px solid red;
padding: 14px 16px;
font-size: 17px;
border-radius: 25px;
padding: 20px;
width:200px;
height: 100%;
}
/*style of the tabs inside */
.tabs-button{
margin: 0;
position: absolute;
color: black;
padding: 22px 16px;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
cursor: pointer;
font-size: 20px;
}
.box{
margin: auto;
width: 60%;
padding: 10px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
/*show the text when hover through tab */
.hiddenText{
display: none;
}
.hoverDiv:hover + .hiddenText{
display: block;
color: green;
font-size: 22px;
font-weight: bold;
}
/* cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
/* the center of first-last-#...etc */
.container {
padding: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
padding-top: 60px;
}
/*model layput when clicked */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid red;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/*hover on layout */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
<!-- this is the layout of the first page for crete a cake -->
<!-- this is the problem of aligning the iteams on the right spots -->
<!-- problem the buttons are not shown -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="order cake">
<title>Create Cake</title>
</head>
<body>
<div class="boxbar_top">
<a class="active"> </a>
<form>
<select name="dropdown">
<option value="ENGLISH"></option>
<option value="SPANISH"></option>
</select>
</form>
<p class="boxbar_top; align: right;">
<h2 style="color: white; align-items: right;">
Order your cake online
</h2>
</p>
</div>
<div class="box">
<div class="tabs">
<!-- when clicked pop asked for user name and number -->
<div class="imgcontainer">
<span onclick="document.getElementById('info').style.display='none'" class="close" title="Close Modal"> </span>
<button onclick ="container"> ADD ORDER </button>
</div>
<div class="modal">
<div class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<!-- this is the area pops out when the user hits add order -->
<div class="container">
<!-- enter the first name -->
<label for="fname"><b>First Name</b></label>
<input type="text" id="fname" name="fname" placeholder="First Name" required>
<!-- enter the last name -->
<label for="lname"><b>Last Name</b></label>
<input type="text" id="lname" name="lname" placeholder="Last Name" required>
<!-- phone number -->
<label for="phone"><b>Phone Number</b></label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" placeholder="Phone Number" required>
<!-- submit number -->
<button type="submit" value="Submit">Submit</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('info').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
</div>
<div style="tabs-button">
<button onclick="document.getElementById('info').style.display='block'"> CHECK ORDER </button>
</div>
<div style="tabs-button">
<button onclick=" ">DELETE ORDER </button>
</div>
</div>
</div>
<div class="boxbar_top">
<a class="active"> </a>
</div>
</body>
</html>
you have not assigned id to your modal, but have done getElementById('id01')
<div class="modal" id="id01">
and your btn triggering modal should be sthng like this:
<button type="button" id="btn">Add order</button>
and your js:
var btn = document.getElementById("btn");
var modal = document.getElementById("id01");
btn.onclick = function() {
modal.style.display = "block";
}

Slidenav onclick from right problems HTML CSS JAVASCRIPT

I'm having few problems with my slide onclick navigation.
This is my HTML
<div id="menu-mobile" class="menu-mobile">
<div class="menu-mobile-close" onclick=closeNav()>
<p>x</p>
</div>
<div class="menu-mobile-header">
<img src="img/poznanprzeprowadzki_logo3.png" name="Poznań przeprowadzki logo" alt="Poznań przeprowadzki logo"></a>
<p>Zapraszamy do kontaktu!</p>
</div>
<a href="index.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="20px" src="img/Home_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="home">Strona główna</p>
</div>
</div></a>
<a href="about.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="20px" src="img/About_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="about">O nas</p>
</div>
</div></a>
<a href="gallery.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="15px" src="img/Gallery_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="gallery">Galeria</p>
</div>
</div></a>
<a href="contact.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="15px" src="img/Contact_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="contact">Kontakt</p>
</div>
</div></a>
<a href="advices.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="15px" height="20px" src="img/Advices2_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="advices">Pomoc / Porady</p>
</div>
</div></a>
</div>
<div id="menu-mobile-background" class="menu-mobile-background">
</div>
<div class="menu-slider" onclick=openNav()>
</div>
This is my CSS:
.menu-slider {
display: block;
position: relative;
background-image: url("img/Dropdown_menu_orange.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 35px;
width: 35px;
margin: 0px 0px 0px 10px;
}
.menu-slider:hover {
cursor: pointer;
}
.menu-mobile {
display: block;
height: 100%;
width: 0px;
position: fixed;
z-index: 9999;
top: 0;
right: 0;
background-color: rgba(100,100,100,1);
overflow-x: hidden;
padding-top: ;
transition: 1s;
}
.menu-mobile-close {
position: absolute;
top: 5px;
right: 10px;
transition: 0.05s;
}
.menu-mobile-background {
right: 0;
top: 0;
transition: 0.2s;
position: fixed;
overflow: hidden;
z-index: 9998;
width: 0px;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.menu-mobile-header {
padding: 16px;
text-align: center;
background-color: white;
}
.menu-mobile-header p {
font-family: Open Sans;
font-size: 14px;
color: rgba(100,100,100,1);
padding: 2px;
font-weight: 500;
display: block;
}
.menu-mobile-header img {
margin: 0 auto;
height: 50px;
padding-bottom: 6px;
}
.menu-mobile-close p:hover {
color: rgba(240,240,240,1);
cursor: pointer;
}
.menu-mobile-close p {
font-family: Open Sans;
font-size: 18px;
color: rgba(100,100,100,1);
font-weight: 600;
display: block;
}
.dropdown-content-item {
min-width: 100%;
transition: 0.1s;
display: flex;
align-items: center;
align-content: center;
justify-content: flex-start;
padding: 10px;
padding-top: 15px;
margin: 0;
flex-wrap: nowrap;
}
.dropdown-content-item-text p {
font-family: Open Sans;
font-size: 13px;
color: white;
padding: 10px;
padding-left: 0;
margin: 0;
display: block;
}
.dropdown-content-item-text {
padding: 0;
margin: 0;
}
.dropdown-content-item-icon {
width: 50px;
display: flex;
margin: 0;
}
.dropdown-content-item-icon img {
margin: 0 auto;
}
.dropdown-content-item:hover {
background-color: rgba(150,150,150,1);
}
And this is my JS for this part:
function openNav() {
document.getElementById("menu-mobile").style.width = "250px";
document.getElementById("menu-mobile-background").style.width = "100%";
}
function closeNav() {
document.getElementById("menu-mobile").style.width = "0px";
document.getElementById("menu-mobile-background").style.width = "0px";
}
The openNav and closeNav buttons works fine, but the paragraphs inside the navigation are being wrapped when the "menu-mobile" is being opened or is about to close. It's pure cosmetic issue, it just doesn't look good to me. Here are some photos of what i'm trying to say:
This is the menu-mobile when it's been already open by clicking the menu-button on the site.
And this is the menu-mobile after clicking the "x" when it's about to hide to the right.
Do you have any idea how can i make this text not wrap while closing?
The other thing is that i want to be able to close the menu also by clicking anywhere outside it. Does anybody know how can I achieve that? Do I have to use lot of js here?
You can also check the whole website here www.pozanprzeprowadzki.pl. The menu-mobile shows-up only on smaller window size.
Best regards and sorry if the whole topic is unclear. Please feel free to ask
Setting the text to white-space: nowrap will stop it from wrapping on dropdown-content-item-text and on the paragraph below the logo.
But then other things are getting squished which you need to give a fixed width to.
I think a better approach is to move the whole thing outside viewport would look better, something like this:
function openNav() {
document.getElementById("menu-mobile").style.transform = "translateX(0)";
document.getElementById("menu-mobile-background").style.width = "100%";
}
function closeNav() {
document.getElementById("menu-mobile").style.transform = "translateX(100vw)";
document.getElementById("menu-mobile-background").style.width = "0px";
}
I think you can swipe right menu because position is fix and you must set this css to body or parrent of menu-mobile div overflow-x: hidden;
function openNav() {
document.getElementById("menu-mobile").style.right= "0px";
}
function closeNav() {
document.getElementById("menu-mobile").style.right= "-250px";
}

How do i make a <div> section invisible when a button is clicked (JS)?

How can I hide a <div> section with JS and
<div class="alertB1">
<div class="sticky">
<h1> This site is still being built</h1>
<p> Please remember this site is still being built. Click here to report a bug
</div>
</div>
<style>
.sticky {
position: -webkit-sticky;
position: sticky;
}
.alertB1 {
width: 100%;
height: 125px;
background: lightgreen;
}
</style>
So I am looking to include a button with:
<span id="a33"><button>×</button></span>
</div>
</div>
How can I get the <span> to hide the <div> tag?
Thanks,
Ring Games
Use onclick attribute;
More info: DOM onevent handlers
.sticky {
position: -webkit-sticky;
position: sticky;
}
.alertB1 {
width: 100%;
height: 125px;
background: lightgreen;
}
<div class="alertB1">
<div class="sticky">
<h1> This site is still being built</h1>
<p> Please remember this site is still being built. Click here to report a bug </p>
<span onclick="document.getElementsByClassName('alertB1')[0].style.display = 'none'" id="a33"><button>×</button></span>
</div>
</div>
function onToggle() {
const ele = document.querySelector(".toggle-div");
ele.classList.toggle("toggle");
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.button {
position: relative;
background-color: #4caf50;
border: none;
font-size: 28px;
color: #ffffff;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.toggle-div.toggle {
visibility: hidden;
}
<body>
<button onclick="onToggle()" class="button">Click here to toggle</button>
<div class="toggle-div">
<h1>Toggle Div on click</h1>
</div>
</body>

apply same jquery function to element present inside parent div

code jsFiddle
I applied jquery's click function to 'li#info' element. But when I click, it perform jquery to element of different parent also ('#theme div#info-overlay').
I want, whenever 'li#info' is clicked on the parent element('#theme') then it perform function to its child element only(div#info-overlay).
Like in the code, by clicking on 'Fe' it open overlay on both the block. But i want it to show overlay only to the block for which 'Fe'is clicked.
sorry, I am new in jquery.
I got your point. you just need to change one line of code
because both divs have same ids thats why both are appearing on click
and it's not a good practice to use same id multiple time on a single file.
it will make issue somewhere sometime.
i have change this line
$("div#info-overlay").toggle('100');
into this
$(this).parents('#theme').find("#info-overlay").toggle('100');
check this
JS Fiddle
use this to find div $(this).parents('#theme').find("#info overlay").toggle('100');
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
$(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
// $("div#info-overlay").toggle('100');
});
});
/*
theme block
*/
.theme{
width: 100%;
height: 250px;
background-color: #fff;
margin: 20px auto;
}
.theme .header{
width: 100%;
height: 200px;
position: relative;
background-color: #eee;
}
.theme .header *{
display: none;
}
.theme .header .overlay{
position: absolute;
background-color: #fff;
left: 60px;
top: 10px;
width: 83%;
height: 180px;
z-index: 80;
}
.theme .header .about{
position: absolute;
left: 10px;
top: 10px;
}
.theme .header .about li{
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #FED200;
opacity: .5;
color: #fff;
padding: 5px 10px;
margin: 5px 0;
}
.theme .footer{
width: 100%;
height: 50px;
padding: 0 20px;
}
.theme .footer .left{
width: 85%;
display: inline-block;
overflow-y:hidden;
height: 50px;
float: left;
padding: 10px 0;
}
#media screen and (min-width:620px) {
.theme{
width: 70%;
}
}
#media screen and (min-width:720px) {
.theme{
width: 49%;
display: inline-block;
}
}
#media screen and (min-width:920px) {
body .container.theme-holder {
width: 70%;
}
}
#media screen and (min-width:1024px) {
body .container.theme-holder {
width: 95%;
}
.theme{
width: 32%;
}
}
#media screen and (min-width:1200px) {
body .container.theme-holder {
width: 85%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate sdfsfdsfdsfsd</p>
</div>
</div>
</div>
</div>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate dfsasdfdsafs</p>
</div>
</div>
</div>
</div>

:hover feature like Chrome Developer Tools

I want to add a z-index of 1 on individual divs, buttons, and h1 that are underneath an overlay. I'm trying to make it similar to the chrome developer tools :hover feature. In Dev Tools, when you hover over an individual element, it highlights, however in my case, I'd like it to come above the overlay. In dev tools, you can highlight a child div without it's parent highlighting, and that's what I'm looking to do too.
I've tried messing with opacity, but when it has a nested div, the nested div gets double the opacity and I don't want that. Here's the codepen and the code...
http://codepen.io/jareko999/pen/wWGpwz
HTML
<div class="cover">
</div>
<h1 class="title">Here's your website</h1>
<div class="container">
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
</div>
CSS
body {
margin: 0;
width: 100%;
height: 100%;
}
.cover {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: rgba(0,0,0,.4);
z-index: 1;
}
.title {
text-align: center;
width: 60%;
margin: 40px auto;
}
.container {
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
width: 300px;
height: 200px;
margin: 10px;
background: url("https://static.pexels.com/photos/38155/pexels-photo-38155.jpeg") center center no-repeat;
background-size: cover;
display: flex;
}
button {
-webkit-appearance: none;
border: none;
box-shadow: none;
background: #276cd6;
color: white;
font-weight: 600;
font-size: .8em;
padding: 16px 24px;
border-radius: 10px;
margin: auto;
}

Categories