столкнулся с такой проблемой есть постеры при наведении на постер должна появляться кнопка Play и затемнение постера
Пример обложек который надо сделать [https://jsfiddle.net/dezc3k4x/1/ ]
class Movies {
constructor() {
// Контейнер, в который будут помещаться нвоые элементы
this.container = document.querySelector('.container .movies');
// Блок, шаблон, макет, который будет в дальнейшем редактироваться
this.card = document.querySelector('.movies .movie-card');
// Объект всех используемых ссылок
this.url = {
api: 'https://api.themoviedb.org/3/discover/movie?api_key=15d2ea6d0dc1d476efbca3eba2b9bbfb',
image: 'https://image.tmdb.org/t/p/w400',
link: 'https://www.themoviedb.org/movie/'
}
this.posters = [];
// Удаляем блок
this.card.remove();
// Загружаем фильмы
this.loadPosters();
}
/**
* Загрузка фильмов
*/
async loadPosters() {
let response = {};
try {
response = await axios.get(this.url.api);
} catch (error) {
return console.error(`AXIOS - ${error.message}`);
}
if (!'results' in response.data)
return console.error('Posters not found');
this.posters = response.data.results;
this.sortPosters();
this.setPosters();
}
/**
* Сортируем фильмы по популярности от большего к меньшему
*/
sortPosters() {
this.posters = this.posters.sort((x, y) => y.popularity - x.popularity);
}
setPosters() {
/**
* Перебор всех фильмов
*/
this.posters.forEach((poster) => {
/**
* Клонируем структуру
*/
const cloneCard = this.card.cloneNode(true);
/**
* Устанавливаем изображение
*/
const image = cloneCard.querySelector('img');
image.src = this.url.image + poster.poster_path;
/**
* Устанавливаем ссылку
*/
const link = cloneCard.querySelector('a');
link.href = this.url.link + poster.id;
/**
* Устанавливаем название
*/
const name = cloneCard.querySelector('h3');
name.innerHTML = poster.title;
/**
* Устанавливаем описание
*/
const info = cloneCard.querySelector('.info p');
info.innerHTML = poster.overview;
// заголовок который при наведении покажет всю информацию
info.title = poster.overview;
/**
* Устанавливаем рейтинг
*/
const rating = cloneCard.querySelector('.footer p span');
rating.innerHTML = poster.vote_average;
/**
* Устанавливаем дату
*/
const date = cloneCard.querySelector('.footer > span');
date.innerHTML = poster.release_date;
/**
* Добавляем блок в контейнер
*/
this.container.appendChild(cloneCard);
});
}
}
new Movies();
@import url("https://fonts.googleapis.com/css?family=Palanquin+Dark:400,500&display=swap");
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
text-decoration: none;
}
body {
background-color: #0e1619;
line-height: 1;
font-family: 'Montserrat', sans-serif;
min-height: 100vh;
}
.container {
padding: 25px 35px;
}
.container h1 {
font-family: 'Palanquin Dark', sans-serif;
font-size: 45px;
color: #fff;
margin-bottom: 65px;
}
.container .movies {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 40px;
}
.container .movie-card {
display: flex;
flex-direction: column;
width: 268px;
}
.container .movie-card img {
width: 100%;
height: 360px;
object-fit: cover;
object-position: center;
margin-bottom: 24px;
}
.container .movie-card h3 {
color: #1c70ec;
font-size: 28px;
font-weight: 600;
margin-bottom: 18px;
letter-spacing: 1px;
}
.container .movie-card .info {
color: #9da3a1;
font-size: 9px;
display: flex;
justify-content: space-between;
text-transform: uppercase;
font-weight: 500;
margin: auto 0 0;
}
.container .movie-card .info p {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.container .movie-card .footer {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 10px;
color: #fff;
margin: 15px 0 0;
}
.container .movie-card .footer svg {
width: 20px;
height: 20px;
fill: #fd0841;
margin-right: 5px;
}
.container .movie-card .footer p {
display: flex;
}
.container .movie-card .footer p span {
margin-top: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div class="container">
<h1>Popular Films</h1>
<div class="movies">
<div class="movie-card">
<img src="">
<a href="#" target="_blank">
<h3 class="movie-title">name</h3>
</a>
<div class="info">
<p>overview</p>
</div>
<div class="footer">
<p>
<svg viewBox="0 0 511.998 511.998" xmlns="http://www.w3.org/2000/svg"><path d="m414.168 500.62-158.169-83.155-158.169 83.155 30.207-176.121-128.037-124.735 176.86-25.689 79.139-162.697 79.139 162.697 176.86 25.689-128.037 124.734z"/></svg>
<span>rating</span>
</p>
<span>date</span>
</div>
</div>
</div>
</div>
*{
padding: 0;
margin: 0;
}
div{
background: url('https://i.redd.it/z99hl83xbkny.png') no-repeat center top;
height: 300px;
width: 300px;
margin: 0 auto;
}
p{
display: none;
font-size: 30px;
font-weight: 700;
font-family: 'Segoe UI';
line-height: 300px;
text-align: center;
color: #fff;
}
div:hover p{
display: block;
background: rgba(0,0,0,0.5);
cursor: pointer;
}
<div>
<p>Play</p>
</div>
Пример который у меня получается,но не с конструкцией где постер это div,а не img [http://jsfiddle.net/8h177njo/ ]
Как собственно правильно реализовать данный функционал ? Видел как на одном сайте делают объект не зависимым и позиционируют его по осям в нужно русло,но это бред.