<style type="text/css">
  
  .bx{
 position: relative;
 width: 200px;
 height: 310px;
 border: 1px solid #10101066;
 margin: 10px;
 border-radius: 20px;
}
.bx img{
 width: 100%;
 height: 100%;
 border-radius: 20px;
}
.bx .content{
 position: absolute;
 width: 100%;
 height: 25%;
 bottom: 0;
 border-radius: 0px 0px 20px 20px;
 z-index: 1;
}
.bx .content::before{
 position: absolute;
 content: '';
 width: 100%;
 height: 100%;
 background: rgb(255 255 255 / 5%);
 backdrop-filter: blur(5px);
 border-radius: 0px 0px 20px 20px;
 z-index: -1;
 }
.content h3 {
    color: #fff;
    padding: 5px 0px 0px 10px;
    font-size: 17px;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: 400;
}
.content p {
    color: #fff;
    padding: 0px 0px 5px 10px;
    font-size: 13px;
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.content h6 {
    color: #fff;
    padding: 0px 0px 0px 10px;
    font-size: 13px;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: 400;
}
.content h6 span{
  color: #000;
  background: #b9aa00;
  padding: 2px 5px;
  border-radius: 5px;
}
.content h6 .bi{
  color: #dbca0e;
  font-size: 15px;
  margin-left: 5px;
}
  
 
</style>

<div class="bx">
  <img alt="" src="https://b1.filmpro.ru/c/377809.600xp.jpg">
  <div class="content">
    <h3>Avatar2</h3>
	<p>Action, Drama, Fantsy</p>
	<h6><span>IMDB</span> <i class="bi bi-star-fill"></i> 9.0</h6>
  </div>
</div>
<div class="bx">
  <img alt="" src="https://i0.wp.com/aftercredits.com/wp-content/uploads/2017/05/PiratesOfTheCaribbeanDeadMenTellNoTalesPoster.jpg?ssl=1">
  <div class="content">
    <h3>Pirates of the Caribbean</h3>
	<p>Action, Drama, Fantsy</p>
	<h6><span>IMDB</span> <i class="bi bi-star-fill"></i> 9.0</h6>
  </div>
</div>
<div class="bx">
  <img alt="" src="https://www.kino-teatr.ru/movie/posters/big/6/128836.jpg">
  <div class="content">
    <h3>Venom</h3>
	<p>Action, Drama, Fantsy</p>
	<h6><span>IMDB</span> <i class="bi bi-star-fill"></i> 9.0</h6>
  </div>
</div>

th3fre Code Editor

معدل الاكواد