JSFiddle - React, Tailwind, and code Playground

HTML

<div class="iframe">
  <div class="body">
    <div class="main">
      <div class="picture-container">
        <img class="picture" src="http://www.google.com/images/logos/ps_logo2.png">
        <div class="ui">
          <div class="ui-left">
              LEFT
          </div>
          <div class="ui-right">
              RIGHT
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.iframe {
    overflow: hidden;
    width: 500px;
    height: 80px;
    border: 1px solid red;
}
.body {
    //background: purple;
    width: 100%;
    height: 100%;
}
.main {
    //background: green;
    height: inherit;
}
.picture-container {
    background: blue;
    position: relative;
    height: inherit;
    display: inline-block;
}
.picture {
    height: inherit;
    width: auto;
}
.ui {
    background: rgba(50,50,50,.5);
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.body:hover .ui {
    opacity: 1;
}
.ui>div {
    background: rgb(200,200,200);
    padding: 10px;
}
.ui-left {
    float: left;
}
.ui-right {
    float: right;
}