Не получается применить hover?

Question

[Neo]

нужно от блока:
• он должен полностью покрыться полупрозрачной черной
плашкой за 0.3 секунды;
• картинка должна плавно (за 1 секунду) увеличиться, но
при этом не выйти за пределы своей части.

.chess {
display: table;
margin-top: 15px;
padding-left: 500px;
position: fixed;

}
.chess-tr {
display: table-row;
}

.chess-tr div {
display: table-cell;
color: #000000;
font-family: Calibri;
font-size: 40px;
vertical-align: middle;
text-align: center;
width: 150px;
height: 200px;

}

.img {
border: 1px solid #cecece;
width: 150px;
height: 200px;
background: url(https://xn----gtbdmbeft1bdk.net/images/paint/15518... no-repeat center/cover;
}
.chess-tr:nth-child(odd) div:nth-child(odd) {
background: #C8C4C3;
}

.chess-tr:nth-child(even) div:nth-child(even) {
background: #C8C4C3;
}

Comments

[Pavel Pavel]

Если я правильно понял то как это должно выглядеть и то, как решается задача с увеличением картинки при наведении так, чтобы она не выходила за рамки контейнера, то вот: https://jsfiddle.net/r146nLhd/3/
Высоту картинки относительно блока(или самого блока), ее размер при увеличении и прочее уже на свое усмотрение.

Answer 1

[WapSter]

Comments

[Neo]

Благодарю Вас. Буду изучать.

[WapSter]

Neonilla777, лучшая благодарность отметить решением.

[Neo]

WapSter, Почему у меня ни в одном браузере не работает, а у Вас на демонстрации работает?

[WapSter]

Neonilla777, это не ко мне вопрос, а к вам. Так как везде должно работать.

[Neo]

WapSter, Ладно. спасибо.

[WapSter]

Neonilla777, обратите внимание я использовал синтаксис scss его нельзя просто взять и скопировать нужно компилировать в css. Возможно из-за этого.

[Neo]

WapSter, Верно. Уже разобралась. Благодарю.

Answer 2

[Ilya Muromtsev]

Oo display: table))

Comments

[Neo]

Я делаю первые шаги. Вы очень добры. Вместо сарказма блеснули бы знаниями.

[Ilya Muromtsev]

Neonilla777, вы шагаете не в ту сторону сейчас 2020) спрашивайте, с радостью помогу