I'm using this CSS Code to make an image overlay on top of a slider in bootstrap but when resizing down the image is not responsive:
.overlay {
background: url(../img/bocSlider.png) top left no-repeat;
position: absolute;
background-position: center;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
#media (min-width: 768px) and (max-width: 979px) {
.overlay{
width:50%;
height:50%;
}
}
#media (max-width: 767px) {
.overlay{
width:50%;
height:50%;
}
}
#media (max-width: 480px) {
.overlay{
width:50%;
height:50%;
}
}
Below is the HTML for the slider that I am using:
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="overlay" class="img-responsive"></div>
<div class="item active">
<img src="/img/Bar.jpg" class="fill">
</div>
<div class="item">
<img src="/img/Outside.jpg" class="fill">
</div>
<div class="item">
<img src="/img/Table_1.jpg" class="fill">
</div>
<div class="item">
<img src="/img/Tables_2.jpg" class="fill">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
Could someone please help me fix this issue?
Image is a .png
You can use background color instead of overlay image.
just write
background-color:rgba(0,0,0,.5);
Hope this will help you.
In you css add background size property
.overlay {
background: url(../img/bocSlider.png) top left no-repeat;
position: absolute;
background-position: center;
background-size: 100%;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
You are adding class in wrong way and in bootstrap img-responsive applies to img tag,
<div class="overlay" class="img-responsive"></div>
Should be
<div class="overlay img-responsive"></div>
For your code remove img-responsive
<div class="overlay"></div>
Related
I have build a boostrap Carousel and modified the indicators to be the map markers with icons in the middle. They rollover fine, but what i was hoping to add is when the corresponding slide below is active they show the hover state.
http://women.hemophilia.on.ca/
What is tied so far is adding the class, as it scrolls, Carousel automatically changes the active class to each item
.marker-recently:hover, .marker-recently .active{
background-image:url(/wp-content/uploads/2021/11/marker-recently-over.png);
}
HTML
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-indicators">
<span data-target="#myCarousel" data-slide-to="0" class="marker-size marker-recently active"></span>
<span data-target="#myCarousel" data-slide-to="1" class="marker-size marker-pregnant"></span>
<span data-target="#myCarousel" data-slide-to="2" class="marker-size marker-period"></span>
<span data-target="#myCarousel" data-slide-to="3" class="marker-size marker-menopause"></span>
<span data-target="#myCarousel" data-slide-to="4" class="marker-size marker-concerns"></span>
<span data-target="#myCarousel" data-slide-to="5" class="marker-size marker-continuing-eduation"></span>
</div>
<br clear="all" />
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="carousel-caption">
<img class="first-slide" src="http://women.hemophilia.on.ca/wp-content/uploads/2021/11/icon-recently-dianosed.png" alt="Recently Diagnosed" width="81" height="95">
<p>I am recently diagnosed with a bleeding disorder and I am looking to learn.</p>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="container">
<div class="carousel-caption text-left">
<img class="first-slide" src="http://women.hemophilia.on.ca/wp-content/uploads/2021/11/icon-pregnant.png" alt="Pregnant" width="71" height="95">
<p>I am pregnant or trying to get pregnant and I have a bleeding disorder.</p>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="container">
<div class="carousel-caption text-left">
<img class="first-slide" src="http://women.hemophilia.on.ca/wp-content/uploads/2021/11/icon-period.png" alt="Started my period" width="77" height="95">
<p>I am about to get my period or I have just started my period recently.</p>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="container">
<div class="carousel-caption text-left">
<img class="first-slide" src="http://women.hemophilia.on.ca/wp-content/uploads/2021/11/icon-menopause.png" alt="Menopause" width="67" height="95">
<p>I have started menopause and want to know bleeding disorder related issues.</p>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="container">
<div class="carousel-caption text-left">
<img class="first-slide" src="http://women.hemophilia.on.ca/wp-content/uploads/2021/11/icon-new-concern.png" alt="Bleeding Concerns" width="116" height="95">
<p>I have a bleeding concerns, could I have a bleeding disorder?</p>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="container">
<div class="carousel-caption text-left">
<img class="first-slide" src="http://women.hemophilia.on.ca/wp-content/uploads/2021/11/icon-continuing-ed.png" alt="Continuing Education" width="73" height="95">
<p>I have had a bleeding disorder for awhile now and I am looking for new info.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">◀</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">▶</span>
<span class="sr-only">Next</span>
</a>
</div>
css
/* Carousel base class */
.carousel {
position: inherit;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
color: #000;
display: grid;
grid-template-columns: 1fr 3fr;
}
.carousel-caption p {
text-align: left;
font-size: 30px;
font-style: italic;
line-height: 40px;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 220px;
background-color: #f8f4ed;
vertical-align: top;
}
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
width: 81px;
height: 95px;
}
.carousel-inner{
margin-top: 90px;
margin-left: -15px;
width: 1120px;
border-bottom: 20px #cf3537 solid;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
font-size: 30px;
background-image: none;
color: #cf3537;
margin-top: -100px;
}
.carousel-indicators {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
max-width: 1120px;
margin: 10px 0px 0px 0px;
height: 250px;
top: 0;
background-color: transparent;
background-image: url(images/graphic-road.png);
background-repeat: no-repeat;
background-position: bottom;
}
.carousel-indicators .active {
background-color: transparent;
}
.marker-size {
background-repeat:no-repeat;
background-position: center top;
background-size: 100px 134px;
}
.marker-recently{
background-image:url(/wp-content/uploads/2021/11/marker-recently.png);
}
.marker-recently:hover, .marker-recently .active{
background-image:url(/wp-content/uploads/2021/11/marker-recently-over.png);
}
.marker-pregnant{
background-image:url(/wp-content/uploads/2021/11/marker-pregnant.png);
}
.marker-pregnant:hover, .marker-pregnant .active{
background-image:url(/wp-content/uploads/2021/11/marker-pregnant-over.png);
}
.marker-period{
background-image:url(/wp-content/uploads/2021/11/marker-period.png);
}
.marker-period:hover, .marker-period .active{
background-image:url(/wp-content/uploads/2021/11/marker-period-over.png);
}
.marker-menopause{
background-image:url(/wp-content/uploads/2021/11/marker-menopause.png);
}
.marker-menopause:hover, .marker-menopause .active{
background-image:url(/wp-content/uploads/2021/11/marker-menopause-over.png);
}
.marker-concerns{
background-image:url(/wp-content/uploads/2021/11/marker-concerns.png);
}
.marker-concerns:hover, .marker-concerns .active{
background-image:url(/wp-content/uploads/2021/11/marker-concerns-over.png);
}
.marker-continuing-eduation{
background-image:url(/wp-content/uploads/2021/11/marker-continuing-eduation.png);
}
.marker-continuing-eduation:hover, .marker-continuing-eduation .active{
background-image:url(/wp-content/uploads/2021/11/marker-continuing-eduation-over.png);
}
You already did it right in your CSS sheet, but you just wrote it wrong.
You wrote:
.marker-concerns:hover, .marker-concerns .active
so you are sniping an element with class active as a child of element with class marker-concerns (which it does not exist). Remove the space so when you call:
.marker-concerns.active
You are actually calling an element with BOTH classes (which is what you need).
Remove the blank space from all six css lines ans it should work.
I'm really new to bootstrap and web development overall and I don't know what to do. I have made a carousel for the website we had to make for our computer science class, but then I added the title and now, when I shrink the site to mobile size, the title just disappears. Here is my carousel HTML:
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-prev"></div>
<div class="carousel-next"></div>
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="christmas.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="christmas2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="christmas3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div class="carousel-caption d-none d-md-block">
<h5 class="myText">Our shop</h5>
<p>Browse our catalog and discover great discounts</p>
</div>
</div>
This is my CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.carousel-image {
height: 100vh;
}
.full-screen {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.z-index-1 {
z-index: 1;
}
.z-index-2 {
z-index: 2;
position: absolute;
width: 100%
}
.myText {
font-size: 70px;
-webkit-text-stroke: 4px red;
}
.controls {
margin-top: 0%;
}
.myHR {
border-width: 4px;
border-color: white;
margin-left: 30%;
margin-right: 30%;
}
.carousel-paragraph {
font-size: 25px;
}
.carousel-caption {
top: 40%;
position: absolute;
}
And this is my javascript:
var $item = $('.carousel-item');
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
$('.carousel').carousel({
interval: 6000,
pause: "false"
});
Never mind, I just removed the d-none class from my title division. It seems to work for me.
<div class="carousel-caption d-md-block">
<h5 class="myText">Our shop</h5>
<p>Browse our catalog and discover great discounts</p>
</div>
I am working on angular and bootstrap application. I am implementing carousel of bootstrap in my application. Facing the width and height resized issues.
Demo link: https://plnkr.co/edit/tPKXHeN3JWyqZgOtrTTS?p=preview
When user click's on next arrow in the above link, we can see graph but the dimensions of the graph are reduced. I want all the images/graphs used to be 100% width and height.Any suggestions would be helpful.
css code:
.panel-info .panel-heading {
background-color: #c1c6dd;
}
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
.carousel-control.left, .carousel-control.right {
color: #2fa4e7;
background-image: none;
}
.carousel-control {
z-index: 10;
top: 2%;
width: 30px;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.carousel-control.left { left: -10px; }
.carousel-control.right { right: -10px; }
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
font-size: 70px;
margin-left : -17px;
margin-right : 24px
}
html code:
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div id='id1' class="item active">
<table style="width:100%;height:80%;">
<tr>
<td id="id1td" ng-controller="myController1">
<div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/>
</td>
</tr>
</table>
</div>
<div id='id2' class="item" ng-controller="myController2">
<table style="width:100%;height:90%;">
<tr style="height:5%;">
<td>
<h1>Title and some content goes here----</h1>
</td>
<tr style="height:85%;">
<td id="id2td">
<div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/>
</td>
</tr>
</table>
</div>
</div>
<!-- Left and right controls -->
<span class="left carousel-control" href="#myCarousel" data-slide="prev" >
<span class="glyphicon glyphicon-chevron-left"></span>
</span>
<span class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</span>
</div>
there is always a problem with tabs and carousel. when you render the chart. if tabs or carousel is not active it will not render charts properly. so I have found the solution for it.
find all delete-me class in the new code it only in index.html file and remove them after page is loaded
<script type="text/javascript" charset="utf-8">
setTimeout(function() {
$('.delete-me').removeClass('active delete-me');
}, 500);
</script>
I just updated your code
DEMO here: https://plnkr.co/edit/EoOxuhH8FTPEOTg5MlHH?p=preview
In order to make second div appear above the slide div, I make the second div position:absolute. Because the first div is slide..so I cannot put second div inside the first div. How to solve it?
<div class="carousel slide">
<div class="carousel-inner" style="height:1000px">
<div class="item active">
<div class="fill" style="background-image:url(picture.jpg);"></div>
</div>
</div>
</div>
<div>some form.....</div>
css
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
here are samples of how the images look
Desktop
Mobile
solved!!....
I am not completely clear on your question but here is a solution using standard bootstrap markup.
your issue was that you are trying to put the form markup after the carousel if you do indeed need it to overlap this is not the answer please clarify your question and i will revise the answer
If this is not what you are looking for let me know
$(document).ready(function() {
//console.log('Ready!')
})
.carousel-inner .item {
min-height: 80px;
}
#form_2 {
position: relative;
z-index: 1000;
display: none;
}
.form-cont {
background-color: rgba(255,255,255,.5);
border:1px solid #ccc;
height: 300px;
width: 50%;
position: absolute;
z-index: 999;
left: 25%;
top:0;
padding:10px;
}
.item img {
min-height:300px;
}
.item.slide1 {
background-color:red;
}
.item.slide2 {
background-color:lightblue;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="realtive">
<div class="form-cont">
<h4>Header</h4>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active slide1">
<img src="https://i.stack.imgur.com/4hEOH.jpg" alt="...">
<div class="carousel-caption">
slide 1
</div>
</div>
<div class="item slide2">
<img src="https://i.stack.imgur.com/COO5g.jpg" alt="...">
<div class="carousel-caption">
slide 2
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Image of my carousel:
Hey guys, I'm trying to get my previous/next photos in my carousel to be edge (so you can see three photos, but only half of the first and third photo) to edge with a 10px gap in between. Can't find a way to do this. I've gotten as far as setting the height of the carousel and centering the image. Now if I could just get the other images to slide up next to the displayed image!
Thank you guys!
<script>
$(document).ready(function() {
$('#carousel-example-generic').carousel({
interval: 10000
})
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
</script>
.carousel-inner {
height: 515px;
}
.item {
height: 515px;
}
.carousel-inner .item img {
position: relative;
top: 50%;
transform: translateY(-50%);
height: 515px;
margin: 0 auto;
}
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left,
.carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 20%;
}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="assets/img/carousel-1.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="assets/img/carousel-2.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="assets/img/carousel-3.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>