Javascript-форум - Подскажите как реализовать

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Подскажите как реализовать (https://javascript.ru/forum/dom-window/70844-podskazhite-kak-realizovat.html)

Подскажите как реализовать

Вот мой код

<style>
.all-photo{  text-align: left;}
.all-photo a{font-size: 20px; cursor: pointer; line-height: 95px; color: #e0000f; text-decoration: none;}
.all-photo span{font-size: 15px; cursor: pointer; color: #e0000f; text-decoration: none;}
</style>
<div class="all-photo">
<a href="javascript:allphoto()">Еще&nbsp;<?php echo $count_images ;?>&nbsp;фото&nbsp;&nbsp;&nbsp;</a>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-chevron-up"></span>
</div>
<div id="info">

Тут скрипт вывода картинок .................

</div>
<script type="text/javascript">
// <![CDATA[
allphoto();
function allphoto() 
{ 
obj = document.getElementById("info"); 
if( obj.style.display == "none" ) 
{
	obj.style.display = "block"; 
	} else { 
	obj.style.display = "none"; 
	} 
	}
// ]]>
</script>

Помогите сделать так чтоб начало блока было полупрозрачным и была видна часть картинок.
вот как на примере
https://screenshots.firefox.com/Za5n.../www.sulpak.kz

css полупрозрчность

Stas1985,
возможный вариант, может кто-то предложит другой ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  </head>

<body>
<style>
.all-photo{  text-align: left;  }
.all-photo a{font-size: 20px; cursor: pointer; line-height: 95px; color: #e0000f; text-decoration: none;}
.all-photo span{font-size: 15px; cursor: pointer; color: #e0000f; text-decoration: none;}
#info{
  position: relative;height: 100px; width: 200px; overflow: hidden; transition: all 1s;
}

#info:after{
      content: "";
      position:  absolute;
      background-image: linear-gradient(transparent 25%, rgba(255, 255, 255, 1) 100%);
      height: 100px; width: 200px;
      top:0;
      left: 0;
      transition:  1s;
    }
#info.open{
  height: 400px;
}
#info.open:after{
  transition: top 1.5s 1s;
  height: 400px;
  top : 400px;
}
</style>
<div class="all-photo">
<a href="javascript:allphoto()">Еще&nbsp;<?php echo $count_images ;?>&nbsp;фото&nbsp;&nbsp;&nbsp;</a>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-chevron-up"></span>
</div>


<div id="info">
<img src="https://javascript.ru/img/webstorm_200x200.png" alt="">
<img src="https://javascript.ru/img/webstorm_200x200.png" alt=""></div>
<script>
   function allphoto()
   {
     document.querySelector("#info").classList.toggle("open")
   }
</script>
</body>
</html>

Что то не понял как ширину настроить.
Пытаюсь настроить все летит.
_https://update.lik-astana.kz/bagetnaya-masterskaya/oformlenie-v-baget/oformlenie-kollektsionnykh-futbolok-detail.html_

Stas1985,
разобрались?

Да со стилями разобрался спасибо большое.
Подскажите еще на один вопрос. Необходимо чтоб при нажатии на сам блок он так же открылся, возможно ли такое.

Stas1985,

document.querySelector("#info").addEventListener('click', function() {
                 this.classList.add("open")
           });

Спасибо работает

function allphoto()
{ 
document.querySelector("#info").classList.toggle("open") 
}
document.querySelector("#info").addEventListener('click', function() 
{
this.classList.add("open")
});

а что то вроде cursor: pointer; можно? Чтоб при наведении на блок курсор менялся

Stas1985,
:-?

#info{
   cursor: pointer;
}

Спасибо вам большое все работает.

Stas1985,
#info.open{
cursor: default;
}