Davtho1983 Davtho1983 - 1 year ago 72
HTML Question

Putting Frame around Bootstrap Carousel

There are plugins that do this, but I feel sure there must be a simpler way.

framing

I have a frame png that is transparent both inside and outside the frame image.

I have a bootstrap carousel.

I want to put the frame on top of the carousel. I want them to scale simultaneously when the browser is resized.

How do I do this simply, nesting a div inside another div?.

HTML:

<body>
<div flex layout="column" class="outer">
<div class="top">
<span class="left-spacer"></span>
<span class="page-header">
ART
</span>
</div>
<div class="middle">
<div class="middle-constrained">
<div>
<img class="artFrame" src="{{artFrame}}">
<app-image-slider></app-image-slider>
</div>
</div>
</div>
<span class="artSpacer"></span>
<div class = "artTextboxes">
<span class="artText">
“Oh, well, okay, I’ll say, “Congratulations. That’s what we have here. I mean, the press. I don’t care. All Americans living here and for the country will be further destroyed. So we get nothing. What do we have."
</span>
<span class="artText">
"Now, Ford announces a few weeks ago. And I come in from different places. I go to China. They are building other candidates, they literally do whatever the hell kind of energy it is – I don’t want it.”
</span>
<span class="artText">
“I mean – and no matter where we go we fill up the Second Amendment, and leaving only the bad guys and terrorists with guns. No good. Not good.""
</span>
</div>
<span class="artSpacer2"></span>
</div>
</body>


CSS:

@import url('https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade');
@import url('https://fonts.googleapis.com/css?family=Anton|Fjalla+One|Karla');

body {
display: flex;
}

.outer {
display: flex;
flex-direction: column;
background-color: #5BC8AF;
}

.top {
flex: 1;
order: 1;
display: flex;
justify-content: flex-center;
}

.left-spacer {
flex-basis: 95%;
background-color: #5BC8AF;
}

.page-header {
padding: 0px;
background-color: #5BC8AF;
flex: 1;
height: 4vh;
margin-right: 20px;
margin-bottom: 5px;
font-family: 'Bungee', cursive;
font-size: 2em;
vertical-align: middle;
color: #B6DBDE;
}

.middle {
order: 2;
display: flex;
overflow:hidden;
flex-wrap: wrap;
background-image: url('Melanie.png');
background-color: rgba(255,153,153,0.6);
background-blend-mode: lighten;

}


.middle-constrained {
flex-basis: 30%;
order: 2;
display: flex;
align-content: stretch;
flex-direction: row;
flex: 1;
flex-wrap: wrap;
}

.artFrame {
flex: 1;
}

.artSpacer {
order: 3;
height: 500px;
}

.artSpacer2 {
order: 5;
height: 500px;
}

.artTextboxes {
order: 4;
display: flex;
}

.artText {
flex-basis: 33%;
height: 200px;
margin: 20px;
padding: 30px;
font-family: 'Karla', sans-serif;
font-size: 1.2em;
line-height: 2;
text-align: justify;
flex-wrap: wrap;
justify-content: space-around;
background-color: #B6DBDE;
color: #67327A;
border-radius: 10px;
}

.artText:nth-child(2) {
background-color: #A7D3D7;
}

.artText:nth-child(3) {
background-color: #99CCD1;
}


app-image-slider {

flex:1 ;
margin: 20px;
display: flex;
flex-wrap: wrap;
align-content: center;
}

Answer Source

So one solution is to have a parent div with it's position set to relative then two images inside the parent, The overlapping one set to position relative while the under image set to position absolute (You will need to much around with max height and widths on parent divs to give it some sort of constraint though): Like so

Edit: added border and confined parent divs for .middle-constrained in jsfiddler example

https://jsfiddle.net/j9s1n0n7/2/

        <div class="parentOver">
            <img class="artFrame" src="https://www.mantidproject.org/images/c/ce/Mocking.jpg">
            <img class="overlapImg" src="https://www.transparenttextures.com/patterns/debut-light.png">
            <app-image-slider></app-image-slider>
        </div>

and css

.artFrame {
flex: 1;
position: absolute;
top: 0;
left: 0;
}

.overlapImg {
position: relative;
top: 0;
left: 0;
}

.parentOver {
 position: relative;
 top: 0;
 left: 0;
 max-height: 300px;
 }

I am not sure if this setup will play nicely with your carousel so you will need to play with it. Your forfront image would need to be at the very least.

Another option is to set your rotating image as the background image in css and your transparent as the image in html but I am sure that would kill your carousel functionality without some serious modifications.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download