Create two buttons overlapping a DIV - html

Question

I would like two create two buttons that overlay a div using HTML like the following:
*Both the same DIV with two buttons overlapping each side. So one div with two buttons overlapping.
I would like the buttons to be transparent and overlay the div but I am not sure how.
I have created my Div:
<div class="container">
<div id="slides">
<img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
</div>
</div>
The div I would like to overlay is called "container" and the two buttons are:
<i class="icon-chevron-left icon-large"></i>
<i class="icon-chevron-right icon-large"></i>
Is there any way in CSS or HTML to do this?

Answer 1

You have to place your buttons absolutely on top of your image. To do so, first make .container take a position: relative; and then put your buttons as siblings of your .slides div and place them absolutely.
.container {
position: relative;
}
.slidesjs-navigation {
position: absolute;
top: 0;
display: block;
width: 50%;
height: 100%;
background: rgba(0,0,0,0); /* Added in case you want to transition this */
}
.slidesjs-navigation:hover {
background: rgba(0,0,0,0.25); /* Makes the hovered button visible */
}
.slidesjs-previous {
left: 0;
}
.slidesjs-next {
right: 0; /* left: 50%; works too */
}
.slides img {
display: block; /* Avoids the space usually seen under inline images */
width: 100%; /* Ensures the image takes up the whole width */
}
<div class="container">
<div id="slides" class="slides">
<img src="https://c1.staticflickr.com/5/4147/5087404401_d24513119a_b.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/"><!-- original `src`: "img/example-slide-1.jpg" -->
</div>
<i class="icon-chevron-left icon-large"></i>
<i class="icon-chevron-right icon-large"></i>
</div>

Answer 2

Here is a simple way to do it. Put both buttons inside a div with a height:100%, width:50% and float:left;. This way each button takes up the full height of the div but only half of its width. The float:left; will then put them side by side in the div, hopefully achieving what you want!
.box {
border:1px solid black;
height:200px;
width:400px;
background-color:#005680;
}
.button1 {
width:50%;
height:100%;
float:left;
background-color: rgba(0,0,0,0);
border:0px solid black;
}
.button2 {
width:50%;
height:100%;
float:left;
background-color: rgba(0,0,0,0);
border:0px solid black;
}
.button1:hover {
background-color: rgba(10,10,10,0.1);
}
.button2:hover {
background-color: rgba(10,10,10,0.1);
}
<div class="box">
<button class="button1"></button>
<button class="button2"></button>
</div>

Answer 3

This can be your code.
.d {
position:relative;
}
.b1 {
float:left;
height:100px;
width:75px;
}
.b2 {
position:absolute;
left:75px;
height:100px;
width:75px;
}
<div class="d">
<button class="b1"></button>
<button class="b2"></button>
</div>

Answer 4

So basically you would like to create something similar to a toggle button or on/off switch? You could try something like:
HTML:
<div id="toggle">
<a id="left-side" href="">Left</a>
<a id="right-side" href="">Right</a>
</div>
CSS:
<script type="text/css">
DIV#toggle {
width:100px;
height:50px;
margin:0px;
padding:0px;
}
DIV#toggle>A {
display:block;
width:50%;
height:100%;
padding:0px;
text-size:10pt;
text-align:center;
}
DIV#toggle>A#right-side {
margin:0px auto 0px 0px;
background-color:#ff0000;
}
DIV#toggle>A#left-side {
margin:0px 0px 0px auto;
background-color:#00ff00;
}
</script>

Answer 5

Since you mentioned that the buttons are in the div, you can simply position them using position: absolute. By adding position: relative to the container, you can position them within that container rather than within the document as a whole.
/* -------------------------------------------------- --
The part that you actually need
-- -------------------------------------------------- */
/* Allow elements to be positioned relative to the container */
.container {
position: relative;
}
/* Let the buttons both cover the (left) half of the div */
.container .slidesjs-navigation {
position: absolute;
top: 0;
left: 0;
width: 50%; /* Of .container, its positioning parent */
height: 100%; /* Of .container */
}
/* Make an exception for the second button to move it to the right half */
.container .slidesjs-next {
left: 50%;
}
/* -------------------------------------------------- --
The part that's just for the demonstration.
-- -------------------------------------------------- */
/* Make the content large to show that the buttons scale */
#slides {
padding: 50px;
}
/* Make the div red, as in the question */
.container {
background-color: red;
}
/* Have white, semi-transparent buttons with a border, so you see where they are */
.container .slidesjs-navigation {
background-color: white;
border: 1px dashed black;
box-sizing: border-box;
opacity: 0.5;
}
/* Make the buttons opaque on hover to show that they respond */
.container .slidesjs-navigation:hover {
opacity: 1;
}
<div class="container">
<i class="icon-chevron-left icon-large"></i>
<i class="icon-chevron-right icon-large"></i>
<div id="slides">
<img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
</div>
</div>

Answer 6

Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
.container {
width: 100vw;
height: 50vh;
background-image: url('https://c1.staticflickr.com/5/4147/5087404401_d24513119a_n.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
}
.container a{
width: 49.5%;
height: 50vh;
margin: 0;
padding: 0;
display: inline-block;
}
.container a:hover{
width: 49.5%;
height: 50vh;
background: rgba(255,255,255,0.4);
margin: 0;
padding: 0;
display: inline-block;
}
<div class="container">
<i class="icon-chevron-left icon-large"></i>
<i class="icon-chevron-right icon-large"></i>
</div>