CSS Proszę o wsparcie. Jak zrobić box-shadow tylko pionowo po obu stronach obrazka?

Question

Witam

Jestem uczniem technikum w trzeciej klasie, proszę o wyrozumiałość. 

Mam zadanie z Baz Danych.

Robię egzamin E14 praktyczny.

http://egzamin-e14.blogspot.com/2016/09/e14-01-1408.html

Jak zrobić żeby cień wokół zdjęcia był tylko pionowo po obu stronach?

Dołaczam kod:

 

<div class="prawy"><!-- To jest czarny div ze zdjęciem -->
        <img class="zdjecie" src="grafiki/zdjecie.jpg">
</div>

.prawy
{
  float: right;
  width: 1000px;
  height: 500px;
  margin-right: 0px;
  margin-left: auto;
  margin-top: 15px;
  background-color: black;
}

.zdjecie
{
  height: 500px;
  margin: 0px 308px;
  box-shadow: 0 0 50px 30px white; /* Tu mam problem */
}

P. S.

Gdy usuwam box shadow to nie ma cienia w ogóle

//////////////////////////////////////////////////////////////////////////  EDIT  /////////////////////////////////////////////////////////////////////////////////

Skorzystałem ze strony: https://cssgradient.io/

Jest coraz lepiej, ale cień jest okrągły a ma być pionowy:

Tu jest kod:

.prawy
{
  float: right;
  width: 1000px;
  height: 500px;
  margin-right: 0px;
  margin-left: auto;
  margin-top: 15px;
  background: rgb(255,255,255);
  background: radial-gradient(circle, rgba(255,255,255,1) 25%, rgba(0,0,0,1) 75%); 
}

.zdjecie
{
  height: 500px;
  margin: 0px 308px;
}

Bardzo mi na tym zależy.

Answer 1

W tym celu można użyć elementu rodzica i nadać mu overflow-y: hidden;

Tu przykład: https://codepen.io/Falek1/pen/QWwQbej

Comments

Poszukaj jak się gradienty robi, bo pusty gradient da ci to co wyszło.

Answer 2

zamiast background-color: black;

użyj:

background: linear-gradient(); dla .prawy

bez box-shadow.

Comments

Niestety efekt jest taki że nie czarnego tła po bokach zdjęcia.

.prawy
{
  float: right;
  width: 1000px;
  height: 500px;
  margin-right: 0px;
  margin-left: auto;
  margin-top: 15px;
  background: linear-gradient();
}

.zdjecie
{
  height: 500px;
  margin: 0px 308px;
  box-shadow: 0 0 50px 30px white;
}