I am trying to create a card UI at: <https://codepen.io/sarimabbas/pen/qjZYvr>

```
.book_left {
  width: 35%;
  height: 300px;
  float: left;
  overflow-x: hidden;
  background: transparent;
}
.book_left img {
  width: auto;
  height: 100%;
  border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
  position: relative;
}
.book_right {
  width: 65%;
  height: 300px;
  float: left;
  background: #000000;
  border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  -moz-border-radius: 0 10px 10px 0;
}

```

The problem I run into is that the left side of the card (which contains an image), can overflow onto the right. Instead of hiding this overflow, I would like to blend it into the div on the right, so that the text is not hidden and can be readable.

Would something like this be possible? I have tried to research combinations of floats, background image fades and divs but have been unsuccessful.

On a related note, what would be the steps needed to make such a card responsive?