2
I’m needing to put an overlay effect over a bootstrap Carousel, but it takes all the same height.
Clarifying better ... the first time I worked in this style - not in this excerpt I sent - through some modifications I even managed to make the effect stay 100% on Carousel and follow this way perfectly on any device, only that in IE I had a problem as my menu was totally thrown out of the slider (to the right side of the monitor where there was nothing else to view other than itself), while in the other browsers worked super well.
So I decided to redo everything - in this case I showed you - to which I adjusted the menu and left the part of the effect pending, only now I have this big question of how to solve :-(
.efeito-overlay {
z-index: 100;
}
nav {
z-index: 200;
}
.slide {
z-index: 40;
}
.efeito-overlay {
width: 100%;
height: 100% !important;
overflow: hidden;
position: absolute;
background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.15) 3px, rgba(0, 0, 0, 0.15) 4px), repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.15) 3px, rgba(0, 0, 0, 0.15) 4px), linear-gradient(to right bottom, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.15)), url();
background-position: bottom, left, top left, center;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: cover;
}
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
width: 100%;
margin: auto;
}
.slide {
display: block;
position: absolute;
min-width: 100%;
min-height: auto;
width: 100%;
height: auto;
background-color: #000;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.carousel-inner img {
width: 100%;
height: auto;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.floated {
float: left;
}
header {
position: relative;
display: flex;
justify-content: center;
align-content: center;
}
nav {
width: 100%;
height: 130px;
position: absolute;
top: 0;
padding: 10px 100px;
display: flex;
align-content: center;
display: inline-block;
}
nav #menu {
background-color: #CCC;
border-radius: 1px !important;
float: right;
}
nav .icon-bar {
background-color: #FFF;
}
nav a {
font-weight: 700;
text-transform: uppercase;
font-size: 0.875em;
letter-spacing: 1px;
color: #000;
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Menu</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="efeito-overlay"></div>
<div class="slide clearfix">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item slide1 active floated"><img src="imagens/1-slide.jpg" alt="">
<div class="carousel-caption"></div>
</div>
<div class="item floated"><img src="imagens/2-slide.jpg" alt="">
<div class="carousel-caption"></div>
</div>
<div class="item floated"><img src="imagens/3-slide.jpg" alt="">
<div class="carousel-caption"></div>
</div>
</div>
</div>
</div>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logo" href="index.html">Logo</a>
</div>
<div class="collapse" id="mymenu">
<ul class="nav navbar-nav" id="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
You want to cover the whole page or just the part of Carousel?
– Sam
Only the part of the Carousel
– Fernanda
Why don’t you put the div overlay inside the Carousel div?
– Sam
Hello dvd, I tried to do this but it didn’t work for me. Thank you!
– Fernanda
Then you will have to do this with Javascript, because the div overlay is out of Carousel and is without reference.
– Sam
Hello dvd, I edited my question and explained it a little better.
– Fernanda
Fernanda I left a comment in my answer, look it solves, if it doesn’t work I’ll ask you Edit your question with everything you have code there, because I could not simulate this error here, the way I did Overlay worked well in my test
– hugocsl