how to overlap images CSS and make them look cut? - css

so im doing a front end challenge and basically i gotta do this and half way through images to move the images but i cant seem to make the cut/overlap
```
:root {
--clr-bggrad-violet: hsl(273, 75%, 66%);
--clr-bggrad-blue: hsl(240, 73%, 65%);
--clr-text-dark: hsl(238, 29%, 16%);
--clr-text-red: hsl(14, 88%, 65%);
--clr-divider: hsl(240, 5%, 91%);
--ff-kumbh: 'Kumbh Sans', sans-serif;
}
/* "*" helps the code to be vieweble on all broswers */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
* {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
font-family: var(--ff-kumbh);
font-weight: 400;
font-size: 0.8rem;
color: var(--clr-text-dark);
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
background: linear-gradient(var(--clr-bggrad-violet), var(--clr-bggrad-blue));
}
main {
position: relative;
background: url(images/bg-pattern-mobile.svg) no-repeat top center;
background-color: white;
display: flex;
flex-flow: column nowrap;
align-items: center;
border-radius: 1rem;
padding: 1rem;
width: 100%;
margin-bottom: 1rem;
box-shadow: 0 10px 40px -15px var(--clr-text-dark);
}
.title {
padding: 1rem;
margin: 1rem;
font-weight: 700;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
height: auto;
display: block;
}
.hero-images {
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
align-items: center;
margin-bottom: 7rem;
}
.hero {
position: absolute;
top: -7rem;
width: min(80%, 255px);
}
.box {
display: none;
}
#media (min-width: 900px) {
main {
width: 870px;
display: grid;
grid-template-columns: 50% 50%;
background-image: unset;
background-color: white;
padding: 0;
}
.hero-images {
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-start;
background-image: url(images/illustration-woman-online-desktop.svg),
url(images/bg-pattern-desktop.svg);
background-repeat: no-repeat;
background-size: 90%, 120%;
background-position: -4.8rem 5rem, -12rem -2rem;
margin: unset;
}
.box {
width: 150px;
position: absolute;
display: unset;
top: 12rem;
left: -5.5rem;
z-index: 1;
}
.hero {
display: none;
}
}
```
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | FAQ Accordion Card</title>
</head>
<body>
<main>
<picture class="box">
<img src="images/illustration-box-desktop.svg" alt="TheBox" aria-hidden="true" />
</picture>
<section class="hero-images">
<picture class="hero">
<source media="(max-width: 900px)" srcset="images/illustration-woman-online-mobile.svg"
alt="you see this first" />
<img src="images/illustration-woman-online-desktop.svg" alt="ShrinkUseeThis" aria-hidden="true" />
</picture>
</section>
<section>
<h1 class="title">FAQ</h1>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
How many team members can I invite?<img src="images/icon-arrow-down.svg" alt="IconArrow" aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
You can invite up to 2 additional users on the Free plan. There is
no limit on team members for the Premium plan.
</div>
</div>
</div>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
What is the maximum file upload size?<img src="images/icon-arrow-down.svg" alt="IconArrow"
aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
No more than 2GB. All files in your account must fit your allotted
storage space.
</div>
</div>
</div>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
How do I reset my password?<img src="images/icon-arrow-down.svg" alt="IconArrow" aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Click “Forgot password” from the login page or “Change password”
from your profile page. A reset link will be emailed to you.
</div>
</div>
</div>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Can I cancel my subscription?<img src="images/icon-arrow-down.svg" alt="IconArrow" aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Yes! Send us a message and we’ll process your request no questions
asked.
</div>
</div>
</div>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Do you provide additional support?<img src="images/icon-arrow-down.svg" alt="IconArrow" aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Chat and email support is available 24/7. Phone lines are open
during normal business hours.
</div>
</div>
</div>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button"
aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2"
aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse"
aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both
elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is
hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is
hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js"
integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk"
crossorigin="anonymous"></script>
</body>
</html>
```
i have tried to use krita and just crop and upload the images as one but it loses resolution(it looks pixelated).i have been thinking using the bodyBG and make that a png but the white box is there in the middle.
edit2: so the images were in .svg couldnt uploaded to imgur so i have to change it to .png i think i might have scramble the snippet cuz the images are everywhere sorry it is my first time doing this XD. also i tried the left: -15%;width: 50%;height: auto; and nothing happen
this is what i see on my computer:
compu
edit3: so i found out about content-visibility CSS and i am trying to see that instead of a cut i will try to make the image half invisible
edit4: so it was "picture" HTML i found a guy that use it on the challenge i cant find him anymore and i still dont understand how is making the cut butt it works sooooo whatever thx anyway

Related

Make the images same size in grid card

I made some card using grid and flexbox for the content. The image is not the same size each cards. I use the display grid for the wrapper and flexbox for the card content. I tried to use flex-grow and flex-basis in the trackcard_header class, but nothing works. I attach the sample of my code result below, please take a look to the snippet too.
Here is the screenshot:
And this is my snippet:
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
max-width: 100%;
height: auto;
border-radius: 1rem;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
I want to make the images is in the same size, both vertically and horizontally. Could anyone give me solution? Thank you in advance.

You need to give the divs an actual size, in your code, they only have % values and no parent static value to take the %age out of. I've given the .trackcard class a width of 30vw. In order to make the images square, you also need to give it a height that's not dependent on other height values, but have the same value as the width, so I gave it a placeholder of 24vw which is 80% of the .trackcard. You need to use object-fit: contain to not stretch. You can refer to the docs I linked and use the one you prefer.
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 30vw;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
width: 24vw;
height: 24vw;
object-fit: contain;
border-radius: 1rem;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>

That can be achieved with some JavaScript.
First you select all the elements with querySelectorAll. You then make an array of its height with offsetHeight. Math.max returns the largest sum of the input parameter.
In a for loop, you can set the elements minHeight with Math.max. It keeps looping until it finds the length and then applies the styling. Keep in mind this will apply the height of the largest image as min-height on all of your images.
And while we're at it, I did the same thing for the h2-elements, so they're aligned equally in all the cards. I separated the JS so it is easier to read and understand. The only gotcha is you have to reload the page if you drag the screen size, as the min-height will be a bit off.
As for CSS I used grid-template-columns: repeat(5, minmax(200px, 1fr)); instead. This way there will always be 5 columns that are atleast 200px wide, so they have an equal size. If you want a responsive effect, just edit the 5 out with auto-fit, this way they will wrap on smaller screens.
Like so:
grid-template-columns: repeat(5, minmax(auto-fit, 1fr));
If you want to change the width or height of your images, I suggest using max-width and max-height for a responsive effect. If you don't change the width, they will look a bit stretched.
You can apply object-fit: cover; on the images also, this way the image won't be stretched, but a bit of the image will be cut off instead.
I hope this helps you!
Snippet below will not work properly, check Codepen: https://codepen.io/sigurdmazanti/pen/qBpLGXe
let img = document.querySelectorAll(".trackcard_header img");
let text = document.querySelectorAll(".trackcard_body h2");
// Image
let imgLength = Array.from(img).map(e => e.offsetHeight);
let maxLength = Math.max(...imgLength);
// H2
let textLength = Array.from(text).map(e => e.offsetHeight);
let maxTextLength = Math.max(...textLength);
// Image for loop
for (let i = 0; i < img.length; i++) {
img[i].style.minHeight = maxLength + "px";
}
// H2 for loop
for (let i = 0; i < text.length; i++) {
text[i].style.minHeight = maxTextLength + "px";
}
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
/*grid-template-columns: repeat(5, 1fr); */
grid-template-columns: repeat(5, minmax(200px, 1fr));
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
max-width: 100%;
height: auto;
border-radius: 1rem;
/* Consider this */
object-fit: cover;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
margin-top: auto;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a" alt="name" />
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247" alt="name" />
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1" alt="name" />
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff" alt="name" />
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6" alt="name" />
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>

Button under images or on the images *ngFor loop

From *ngFor loop I can populate images but I want to add a button below the image or on the image. I'm not familiar with CSS below is my code.
Html code
<div class="container">
<div *ngFor="let img of imageData">
<p [hidden]="true">{{img.Id}}</p>
<img class="original" [alt]="img.Name"
src="https://localhost:44349/{{img.ImagePath}}"
width="350" height="350"/>
<button type="submit" (click)="deleteImage()" class="btn btn-danger"><i
class="far fa-trash-alt"></i>
Remove
</button>
</div>
</div>
CSS
.container {
position: relative;
text-align: center;
}
.original {
width: 250px;
height: 250px;
float: left;
margin: 1.66%;
transition-duration: 0.3s;
border-radius: 15px;
}

Hope this is what you are looking for.
.container {
/* position: relative;*/
text-align: center;
display: flex;
flex-direction: column;
}
.original {
width: 250px;
height: 250px;
float: left;
margin: 1.66% auto;
transition-duration: 0.3s;
border-radius: 15px;
}
.content {
display: flex;
flex-direction: column;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="content">
<p>Image Id</p>
<img class="original" src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" width="350" height="350" />
<button type="submit" class="btn btn-danger"><i class="far fa-trash-alt"></i>
Remove
</button>
</div>
<div class="content">
<p>Image Id</p>
<img class="original" src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" width="350" height="350" />
<button type="submit" class="btn btn-danger"><i class="far fa-trash-alt"></i>
Remove
</button>
</div>
</div>
For angular with dynamic image your template will be like.
<div class="container">
<div class="content" *ngFor="let img of imageData">
<p [hidden]="true">{{img.Id}}</p>
<img class="original" src="https://localhost:44349/{{img.ImagePath}}" width="350" height="350" />
<button type="submit" class="btn btn-danger"><i class="far fa-trash-alt"></i>
Remove
</button>
</div>
</div>

Is my modal not showing because of z-index?

I'm creating an app-look-a-like mobile version of my site. In the bottom, there is a menu icon that should trigger a modal when clicked, however this is not happening, the modal is not showing. I'm not sure if this is happening because of the z-index. If so, is there a way I can solve this using only CSS? I'm using Bootstrap 4.
Here's my codepen
.footer-container-mobile {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
height: 54px;
background-color: #8ABE57;
width: 100%;
margin: 0 auto;
padding: 10px 40px;
box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.1);
}
.footer-container-mobile i {
color: white;
font-size: 1.3em;
margin-top: 5px;
}
.circle-btn-mobile {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #31353C;
color: white;
text-align: center;
align-items: center;
font-size: 2em;
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.30));
display: flex;
flex-direction: row;
}
.circle-btn-mobile-container {
width: fit-content;
margin: 0 auto !important;
z-index: 50;
position: fixed;
bottom: 12px;
left: 0;
right: 0;
}
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-fluid">
<div class="row d-flex footer-container-mobile dropdown">
<i class="far fa-bars">Menu icon</i>
<i class="fas fa-user-plus"></i>Icon
</div>
<div class="row circle-btn-mobile-container">
<div class="d-flex justify-content-center mx-auto circle-btn-mobile">
<i class="far fa-plus">+</i>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalServiceMenuMobile" tabindex="-1" role="dialog" aria-labelledby="modalServiceMenuMobile" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

You can't handle click event using CSS/HTML. Alternatively, you may use :hover, :focus, :active pseudo-classes using CSS. You may find more pseudo-classes here. I highly recommend to use JS in your situation in order to have better control on HTML elements. You may check the JS click event example here.

I made a rookie mistake.
I forgot to add the data-target="#idHere" to my <a href="#">
By adding this, I solved my issue. Thanks for the help anyways, made me realize my mistake.

First off, you have 2 elements that have the same ID, which is a problem:
<i class="far fa-bars">Menu icon</i>
<div class="modal fade" id="modalServiceMenuMobile" tabindex="-1" role="dialog" aria-labelledby="modalServiceMenuMobile" aria-hidden="true">
What you need to do is:
Give the div that's gonna be your modal a unique ID different from the link that's trying to open it.
Give the a element calling the modal the data attribute data-target="#[name_of_modal_id]". It's important that you have the # symbol before the modal ID you're trying to reference. Example: data-target="#modalDiv".

bootstrap max-height not working

Hey guys so I have a bootstrap site and I've built a fairly basic header file that looks like this:
<head>
<style>
nav a{
color: white
}
nav {background-color: #1c71b9; }
.navbar-toggle{border: 3px solid white;}
.icon-bar{background-color: white;}
.navbar-brand:hover{background-color: white;
color: #1c71b9;
}
body{margin-top: 50px;}
h1, h2, h3, h4, h5, h6, p{
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.row + .row{margin-top: 20px;}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="vue.js"></script>
</head>
<header>
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">My Site</a>
</div><!--end .navbar-header-->
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Subscriptions</li>
<li>Templates</li>
<li>Stock</li>
<li>Login</li>
<li>Signup</li>
</ul>
</div><!--end #navbar-->
</div><!--end container-->
</nav>
<div class="container">
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!--modal header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h2 class="modal-title">Login</h2>
</div>
<!--modal body-->
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="username">Username/Email</label>
<input type="text" class="form-control" placeholder="Username/Email" id="username" name="username">
Forgot Username
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" placeholder="Password" name="password" id="password">
Forgot Password
</div>
</form>
</div>
<!--modal footer-->
<div class="modal-footer">
<button class="btn btn-primary btn-block">Login</button>
</div>
</div>
</div>
</div>
</div>
</header>
I included this header file into my index.php document and am trying to make a video that spans 100% of the browser in width and have a max-height of 800px but its not working no matter what I do the video has white space on the sides without spanning all of the width. Any help here would be great! I basically want the video to always be centered and responsive. Similar to the img-responsive class does. Heres a copy of the index file
<?php require_once('header.php');?>
<style>
.videoContainer {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 800px;
overflow: hidden;
margin-top: 50px;
}
.videoContainer video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
max-height: 800px;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div align="center" class="videoContainer">
<video src="Balloon.mp4" autoplay="true" loop="true"></video>
</div>
</body><?php require_once('header.php');?>
<style>
.videoContainer {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 800px;
overflow: hidden;
margin-top: 50px;
}
.videoContainer video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
max-height: 800px;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div align="center" class="videoContainer">
<video src="Balloon.mp4" autoplay="true" loop="true"></video>
</div>
</body>

if you are using bootstrap wrap video inside a container-fluid. This spans the entire width of the viewport (view documentation). You can try something like this:
<div class="container-fluid">
<video src="Balloon.mp4" autoplay="true" loop="true"></video>
</div>
then in your css:
div video {
height: 800 px;
}

If you want you video to cover full width of you div do not set height for the video, videos will always keep its aspect ratio, so if you set height the width will also reduce according to that. so the best way would be set height for the div wrapping the video the let the video to expand 100%

add hover effect in bootstrap?

I've created a profile picture structure in Bootstrap.
I want ask how can I add an hover effect which allows the apparition of a plus symbol, like = + , which indicates to the user that they can add a new image or something like it.
Thanks.
#import url( 'https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="form-group text-center" data-type="admins operators secretaries customers">
<div class="profile-image-container">
<div class="profile-header-img">
<img class="img-circle" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" />
<!-- badge -->
<div data-content="">
<span class="label label-primary rank-label" style="font-size: 13px;">
<label id="total-points">0</label>Points </span>
</div>
</div>

EDIT: gave parent div .profile-header-img the img's width and height to set :hover on it and prevent flickering:
.profile-header-img {
width: 120px;
height: 120px;
margin: 0 auto;
}
.glyphicon.glyphicon-plus-sign {
display: none;
color: white;
position: absolute;
z-index: 1;
left: 50%;
top: 44px;
transform: translate(-50%, 0);
font-size: 32px;
}
.profile-header-img:hover .glyphicon.glyphicon-plus-sign {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group text-center" data-type="admins operators secretaries customers">
<div class="profile-image-container">
<div class="profile-header-img">
<img class="img-circle" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" />
<span class="glyphicon glyphicon-plus-sign"></span>
<!-- badge -->
<div data-content="">
<span class="label label-primary rank-label" style="font-size: 13px;">
<label id="total-points">0</label>Points
</span>
</div>
</div>
</div>
</div>

Resources