Image navigator

by Daniel Mejia

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="img-container">
        <img src="http://lorempixel.com/1024/728/nightlife" alt="" class="img img-responsive">
        <div class="leftarrow">
          <div class="arrow-container"><i class="fa fa-chevron-circle-left"></i></div>
        </div>
        <div class="rightarrow">
          <div class="arrow-container"><i class="fa fa-chevron-circle-right"></i></div>
        </div>
        <div class="toparrow">
          <div class="arrow-container"><i class="fa fa-chevron-circle-up"></i></div>
        </div>
        <div class="bottomarrow">
          <div class="arrow-container"><i class="fa fa-chevron-circle-down"></i></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <label>Comment</label>
      <textarea name="comment" id="comment" rows="2" class="form-control">Nightlife in ...</textarea>
    </div>
  </div>
</div>

CSS

body
{
  background-color:#333333;  
  color:#9d9d9d;
}

.form-control
{
  background-color:#222222;
}

.leftarrow,
.rightarrow,
.toparrow,
.bottomarrow {
  position: absolute;
  background-color: #333333;
  opacity: 0.35;
  z-order: 1;
  cursor: pointer;
  text-align: -webkit-center;
  font-family: FontAwesome;
  color: #EC7728;
  font-size: 46px;
}

.leftarrow > .arrow-container,
.rightarrow > .arrow-container {
  position: relative;
  top: 40%;
  bottom: auto;
}

.leftarrow {
  width: 15%;
  height: 100%;
  top: 0;
  left: 0;
}

.rightarrow {
  width: 15%;
  height: 100%;
  top: 0;
  right: 0;
}

.toparrow {
  width: 70%;
  height: 15%;
  top: 0;
  left: 15%;
}

.bottomarrow {
  width: 70%;
  height: 15%;
  top: 85%;
  left: 15%;
}

.leftarrow:hover,
.rightarrow:hover,
.toparrow:hover,
.bottomarrow:hover {
  opacity: 0.50;
}

JavaScript

$('div.arrow-container').click(function() {
	window.location.href = "#";
});