Для искушенных

[html]
<style>

.movie-card{
padding: 40px 0;
color: #575756;
}
.container{
width: 100%;
height: 740px;
margin:0 auto;
border-radius:5px;
background: #e4dbe9;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: relative;
}

.cover{
height:365px;
position: relative;
  overflow: hidden;
  z-index:1;
  margin:0;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
}
.cover:before {
content:'';
width:100%; height:100%;
  position:absolute;
  overflow: hidden;
  top:0; left:0;
  z-index: -1;
  border-radius: 20px;
transform-origin:0 0;
  background: url("https://i.pinimg.com/564x/15/ca/e9/15cae994182dd9c75bf515876e088da4.jpg") ; <!-- Прямоугольная картинка -->
}
a {
  text-decoration: none;
  color: #5C7FB8
}
a:hover{
text-decoration:underline;
}
.menu{
text-align: center;
padding: 250px 0 0 0px;
z-index:1;

}

.title{
color: white;
font-size: 44px;
       text-shadow: 2px 2px #2a1f1f;
}
.columntag{
padding-top: 200px;
}

.textinfo{
float: left;
width: 250px;
margin-left: 10px;
padding-top: 35px;
}

.cast{
float: left;
width: 200px;
margin-left: 10px;
padding-top: 35px;
}
.cast img{
border-radius:50%;
cursor: pointer;
border: 3px solid white;
        width: 50px;

}
.cast img:hover{
opacity:0.6;
}
.cast a:hover{
text-decoration: none;
}

.text{
float:right;
width: 300px;
padding-top: 50px;
padding-right: 50px;
}
.guide{
text-align: left;
padding-top: 200px;
padding-left: 10px;
}
.guide a {
color:#A9A8A3;
}
.guide a:hover{
color: #bdbdbd;
}

a[data-tooltip] {
  position: relative;
}
a[data-tooltip]::before,
a[data-tooltip]::after {
  position: absolute;
  display: none;
  opacity: 0.85;
}
a[data-tooltip]::before {
  /*
   * using data-tooltip instead of title so we
   * don't have the real tooltip overlapping
   */
  content: attr(data-tooltip);
  background: #000;
  color: #fff;
  font-size: 13px;
  padding: 5px;
  border-radius: 5px;
  /* we don't want the text to wrap */
  white-space: nowrap;
  text-decoration: none;
}
a[data-tooltip]::after {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  content: '';
}

a[data-tooltip]:hover::before,
a[data-tooltip]:hover::after {
  display: block;
}

/** positioning **/

a[data-tooltip][data-placement="top"]::before {
  bottom: 100%;
  left: 0;
  margin-bottom: 40px;
}
a[data-tooltip][data-placement="top"]::after {
  border-top-color: #000;
  border-bottom: none;
  bottom: 50px;
  left: 20px;
  margin-bottom: 4px;
}
</style>
<script>

</script>

<div class="movie-card">
<div class="container">
   
    <div class="cover" >
   

    <div class="menu">
   
        <div class="title">Сейлор Мун: узники Кинмоку </div> <!-- Название эпизода -->
   
    </div>
   
   
       
   
   
   
    </div>
    <div class="info">
    <div class="cast">
        <h2>Действующие лица:</h2>
        <a href="#" data-tooltip="Имя Первого Участника" data-placement="top"> <!-- Тут меняем имя -->
                <img src="http://forumfiles.ru/uploads/001a/bc/d0/17/339594.gif" /> <!-- Сюда ставим аватар участника -->
              </a>
              <a href="#" data-tooltip="Имя Второго Участника" data-placement="top"> <!-- Тут меняем имя -->
                <img src="http://forumfiles.ru/uploads/001a/bc/d0/17/339594.gif" /> <!-- Сюда ставим аватар участника -->
              </a>
              <a href="#" data-tooltip="Имя Третьего Участника" data-placement="top"> <!-- Тут меняем имя -->
                <img src="http://forumfiles.ru/uploads/001a/bc/d0/17/339594.gif"/> <!-- Сюда ставим аватар участника -->
              </a>
              <a href="#" data-tooltip="Имя Четвертого Участника" data-placement="top"> <!-- Тут меняем имя -->
                <img src="http://forumfiles.ru/uploads/001a/bc/d0/17/339594.gif" /> <!-- Сюда ставим аватар участника -->
              </a>
             
    </div>
<!-- Здесь текст предисловия, в формате хтмл -->
    <div class="text">

    Зал Совета директоров много лет не ремонтировали, священные фрески, которыми был расписан потолок, почти выцвели, пошли замысловатыми пятнами сырости, придававшими загадочность батальным сценам.<br>
Господин директор Спел разглядывал потолок, словно стараясь угадать смысл в изображениях. Он не хотел показывать, что интересуется происходящим.<br>
Господин директор Мекиль, начальник полиции, уже заканчивал свою разгромную речь, и до слуха Спела долетали лишь отрывки фраз: «... преступно нарушив Порядок, инженер Лемень... опорочив честное имя одного из самых уважаемых семейств, инженер Лемень...»<br>
Мекиль, по прозвищу Мокрица, имел в виду семейство Спелов. Инженер Лемень вознамерился жениться на дочери Спела.

    </div>
    <div class="textinfo"><h2>Время, бой, погода:</h2>

<!-- Здесь текст дополнительных параметров -->

текст / текст / текст / текст </div>
   
    </div>

   
   
   
   

</div>
</div>

[/html]

Код:
[html]
<style>

.movie-card{
	padding: 40px 0;
	color: #575756;
}
.container{
	width: 100%;
	height: 740px;	
	margin:0 auto;
	border-radius:5px;
	background: #e4dbe9;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	position: relative;
}

.cover{	
	height:365px;
	position: relative;
  overflow: hidden;
  z-index:1;
  margin:0;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
}
.cover:before {
	content:'';
	width:100%; height:100%;
  position:absolute;
  overflow: hidden;
  top:0; left:0;
  z-index: -1;
  border-radius: 20px;
 transform-origin:0 0;
  background: url("https://i.pinimg.com/564x/15/ca/e9/15cae994182dd9c75bf515876e088da4.jpg") ; <!-- Прямоугольная картинка -->
	}
a {
  text-decoration: none;
  color: #5C7FB8
}
a:hover{
	text-decoration:underline;
}
.menu{
	text-align: center;
	padding: 250px 0 0 0px;
	z-index:1;
	
}

.title{
	color: white;
	font-size: 44px;
       text-shadow: 2px 2px #2a1f1f;
}
.columntag{
	padding-top: 200px;
}

.textinfo{
	float: left;
	width: 250px;
	margin-left: 10px;
padding-top: 35px;	
}

.cast{
	float: left;
	width: 200px;
	margin-left: 10px;
padding-top: 35px;	
}
.cast img{
	border-radius:50%;
	cursor: pointer;
	border: 3px solid white;
       	width: 50px;
	
}
.cast img:hover{
	opacity:0.6;
}
.cast a:hover{
	text-decoration: none;
}

.text{
	float:right;
	width: 300px;
	padding-top: 50px;
	padding-right: 50px;
}
.guide{
	text-align: left;
	padding-top: 200px;
	padding-left: 10px;
}
.guide a {
	color:#A9A8A3;
}
.guide a:hover{
	color: #bdbdbd;
}


a[data-tooltip] {
  position: relative;
}
a[data-tooltip]::before,
a[data-tooltip]::after {
  position: absolute;
  display: none;
  opacity: 0.85;
}
a[data-tooltip]::before {
  /*
   * using data-tooltip instead of title so we 
   * don't have the real tooltip overlapping
   */
  content: attr(data-tooltip);
  background: #000;
  color: #fff;
  font-size: 13px;
  padding: 5px;
  border-radius: 5px;
  /* we don't want the text to wrap */
  white-space: nowrap;
  text-decoration: none;
}
a[data-tooltip]::after {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  content: '';
}

a[data-tooltip]:hover::before,
a[data-tooltip]:hover::after {
  display: block;
}

/** positioning **/

a[data-tooltip][data-placement="top"]::before {
  bottom: 100%;
  left: 0;
  margin-bottom: 40px;
}
a[data-tooltip][data-placement="top"]::after {
  border-top-color: #000;
  border-bottom: none;
  bottom: 50px;
  left: 20px;
  margin-bottom: 4px;
}
</style>
<script>



</script>


<div class="movie-card">
	<div class="container">
    
    	<div class="cover" >
    	

    	<div class="menu">
    	
        <div class="title">Сейлор Мун: узники Кинмоку </div> <!-- Название эпизода --> 
    	
    	</div>
    	
    	
        
    	
    	
    	
    </div>
    <div class="info">
    	<div class="cast">
        <h2>Действующие лица:</h2>
        <a href="#" data-tooltip="Имя Первого Участника" data-placement="top"> <!-- Тут меняем имя --> 
                <img src="http://forumfiles.ru/uploads/001a/bc/d0/17/339594.gif" /> <!-- Сюда ставим аватар участника -->
              </a>
              <a href="#" data-tooltip="Имя Второго Участника" data-placement="top"> <!-- Тут меняем имя -->
                <img src="http://forumfiles.ru/uploads/001a/bc/d0/17/339594.gif" /> <!-- Сюда ставим аватар участника -->
              </a>
              <a href="#" data-tooltip="Имя Третьего Участника" data-placement="top"> <!-- Тут меняем имя -->
                <img src="http://forumfiles.ru/uploads/001a/bc/d0/17/339594.gif"/> <!-- Сюда ставим аватар участника -->
              </a>
              <a href="#" data-tooltip="Имя Четвертого Участника" data-placement="top"> <!-- Тут меняем имя -->
                <img src="http://forumfiles.ru/uploads/001a/bc/d0/17/339594.gif" /> <!-- Сюда ставим аватар участника -->
              </a>
              
    	</div>
<!-- Здесь текст предисловия, в формате хтмл -->
    	<div class="text">

    	Зал Совета директоров много лет не ремонтировали, священные фрески, которыми был расписан потолок, почти выцвели, пошли замысловатыми пятнами сырости, придававшими загадочность батальным сценам.<br>
Господин директор Спел разглядывал потолок, словно стараясь угадать смысл в изображениях. Он не хотел показывать, что интересуется происходящим.<br>
Господин директор Мекиль, начальник полиции, уже заканчивал свою разгромную речь, и до слуха Спела долетали лишь отрывки фраз: «... преступно нарушив Порядок, инженер Лемень... опорочив честное имя одного из самых уважаемых семейств, инженер Лемень...»<br>
Мекиль, по прозвищу Мокрица, имел в виду семейство Спелов. Инженер Лемень вознамерился жениться на дочери Спела.

    	</div>
    	<div class="textinfo"><h2>Время, бой, погода:</h2> 

<!-- Здесь текст дополнительных параметров -->

текст / текст / текст / текст </div>
    
    </div>
	
    
    
    
    
	
	</div>
</div>


[/html]