<div class="photo">
  <img class="photo__image" src="https://sun9-59.userapi.com/c858036/v858036611/1ec1c/I9gYxvr-prU.jpg"/>
  <div class="photo__controls">
    <a
       class="photo__arrow photo__arrow--prev photo__arrow--disabled"
       href="https://i.pinimg.com/originals/2a/e6/3f/2ae63f02e6906fd3bc0ea96f3452a26a.jpg"></a>
    <a
       class="photo__arrow photo__arrow--next"
       href="next-image-url"></a>
  </div>
</div>
.photo {
  position: relative;
  width: 250px;
  height: 312px;
  border-radius: 20px;
  overflow: hidden;
}

.photo__image {
  display: block;
  width: 100%;
}

.photo__controls {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: 50px;
  padding: 10px 20px;
  background-color: #fff;
  border-radius: 10px 0;
}

.photo__arrow {
  display: block;
  width: 40px;
  height: 40px;
  background: url(https://www.nanana.ch/assets/images/chevron_left_black_2.png) 50% 50% no-repeat;
  background-size: cover;
  cursor: pointer;
  transition: ease .5s opacity;
}

.photo__arrow:hover {
  opacity: .6;
}

.photo__arrow--next {
  transform: rotate(180deg);
}

.photo__arrow--disabled,
.photo__arrow--disabled:hover {
  opacity: .3;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.