I want to create a image status

I want to create a image status like this below my exampledesire design

But my result is
i want to do like above example. How can i do that

<ion-card class="res-card">
<span class="open">Open</span>
  <img src="https://cde.peru.com//ima/0/1/6/3/2/1632689/611x458/50-best-restaurants.jpg">
    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>


.open {
	background: skyblue;
	width: 100px;
	font-size: 1.10rem;
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	padding-top: .5rem;
	padding-bottom: .5rem;
	top: 81px;
	right: -2px;
	z-index: 99;
	text-align: center;

Please help me anyone
How can i fix my issue
awaiting for a positive response

overflow: hidden;