Поправил css и добавил нужные отступы

Web/Presenters/GroupPresenter.php

@@ -250,13 +250,16 @@ final class GroupPresenter extends OpenVKPresenter
             $this->flash("succ", "Изменения сохранены", "Новые данные появятся в вашей группе.");
         }
     }
-    function renderEditAvatar(int $id)
+
+    function renderEditAvatar(int $id): void
     {
         $this->assertUserLoggedIn();
         $this->willExecuteWriteAction();
+        
         $club = $this->clubs->get($id);
-        if(!$club ||!$club->canBeModifiedBy($this->user->identity))
+        if(!$club || !$club->canBeModifiedBy($this->user->identity))
         {
+            
             $this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию.");
         }
         if($_FILES["ava"]["error"] === UPLOAD_ERR_OK) {
@@ -278,9 +281,11 @@ final class GroupPresenter extends OpenVKPresenter
                 (new Albums)->getClubAvatarAlbum($club)->addPhoto($photo);
             } catch(ISE $ex) {
                 $name = $album->getName();
+
                 $this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию.");
             }
         }
+
         $this->flash("succ", "Фотография сохранена", "Новые данные появятся в вашей группе.");
         $this->redirect("/club$id");
     }

Web/Presenters/templates/Group/View.xml

@@ -96,30 +96,18 @@
 <div class="right_small_block">
     {var $avatarPhoto = $club->getAvatarPhoto()}
     {var $avatarLink = ((is_null($avatarPhoto) ? FALSE : $avatarPhoto->isAnonymous()) ? "/photo" . ("s/" . base_convert((string) $avatarPhoto->getId(), 10, 32)) : $club->getAvatarLink())}
-    <div style="position:relative;width:100%;"
-        onmouseover="
-            avatarChange.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
-            avatarChange.style.opacity = '1';
-            _avatarDelete.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
-            _avatarDelete.style.opacity = '1';
-            deleteButton.style.opacity = '0.7';
-            "
-        onmouseleave="
-            avatarChange.style.backgroundColor = 'rgba(0, 0, 0, 0)';
-            avatarChange.style.opacity = '0';
-            _avatarDelete.style.backgroundColor = 'rgba(0, 0, 0, 0)';
-            _avatarDelete.style.opacity = '0';
-            deleteButton.style.opacity = '0';
-        ">
+    <div id="avatarAll" style="position:relative;width:100%;">
         {if !is_null($thisUser) && $club->canBeModifiedBy($thisUser)}
             {if is_null($avatarPhoto) == true}
-            <a href="/club{$club->getId()}/al_avatars" id="_newPicture" class="newpict">{_add_photo}</a>
+            <a href="/club{$club->getId()}/al_avatars" id="_newAvatarPicture" class="newpict">{_add_photo}</a>
             {else}
-            <a id="_avatarDelete" href="/photo{$club->getAvatarPhoto()->getPrettyId()}/delete">
+            <div id="avatarDeleteBlock">
+                <a id="_avatarDelete" href="/photo{$club->getAvatarPhoto()->getPrettyId()}/delete">
                 <img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png"></a>
-                <ul id="avatarChange">
+            </div>
+                <ul id="avatarOptionsBlock">
                         <li>
-                            <img src="/assets/packages/static/openvk/img/upload.png" id="uploadIcon"><a href="/club{$club->getId()}/al_avatars" id="_newPicture"> {tr("new_photo")}</a>
+                            <img src="/assets/packages/static/openvk/img/upload.png" id="_newAvatarPicture2"><a href="/club{$club->getId()}/al_avatars" id="_newAvatarPicture"> {tr("new_photo")}</a>
                         </li>
                         <!--<li><img src="/assets/packages/static/openvk/img/miniature.png"><a href="javascript:alert('')" id="_changeMiniature" style="color:#B2B2B2;" onmouseover="_changeMiniature.style.color = '#D9D9D9';" onmouseleave="_changeMiniature.style.color = '#B2B2B2';">{tr("change_miniature")}</a></li>-->
                 </ul>
@@ -130,10 +118,11 @@
         {/if}>
         <img id="clubAvatar" src="{$club->getAvatarUrl('normal')}" style="width: 100%; image-rendering: -webkit-optimize-contrast;"></a>
         <script>
+            //_newAvatarPicture.style.marginTop = clubAvatar.height-30+"px";
             window.addEventListener("load", event => {
                     let image = clubAvatar;
-                    avatarChange.style.marginTop = image.height-33+"px";
-                    avatarChange.style.width = image.width/1.25+"px"
+                    avatarOptionsBlock.style.marginTop = image.height-33+"px";
+                    avatarOptionsBlock.style.width = image.width/1.25+"px"
             });
         </script>
     </div>

Web/Presenters/templates/User/View.xml

@@ -70,38 +70,19 @@
     
     <div class="left_small_block">
         <div style="margin-left: auto;margin-right: auto;display: table;">
-            <div
-            {if !is_null($thisUser) && $user->getId() == $thisUser->getId()} onmouseover="
-                {if is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != "$serverUrl/assets/packages/static/openvk/img/camera_200.png"}
-                _avatarDelete.style.backgroundColor='rgba(0, 0, 0, 0.7)';
-                deleteButton.style.opacity='0.7';
-                {/if}
-                avatarChange.style.backgroundColor='rgba(0, 0, 0, 0.7)';
-                avatarChange.style.opacity='100%';
-                "
-                onmouseleave="
-                {if is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != "$serverUrl/assets/packages/static/openvk/img/camera_200.png"}
-                _avatarDelete.style.backgroundColor='rgba(0, 0, 0, 0)';
-                deleteButton.style.opacity='0';
-                {/if}
-                avatarChange.style.backgroundColor='rgba(0, 0, 0, 0)';
-                avatarChange.style.opacity='0';
-                "{/if}>
-            <div n:if="!is_null($thisUser) && $user->getId() == $thisUser->getId()">
-                <div id="avatarEdit">
-                    <div n:if="is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != '$serverUrl/assets/packages/static/openvk/img/camera_200.png'">
+            <div id="avatarAll">
+                <div n:if="!is_null($thisUser) && $user->getId() == $thisUser->getId()">
+                    <div id="avatarDeleteBlock">
+                        <div id="av" n:if="is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != '$serverUrl/assets/packages/static/openvk/img/camera_200.png'">
                         <a id="_avatarDelete" href="/photo{$user->getAvatarPhoto()->getPrettyId()}/delete">
-                    <img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png"></a>
+                        <img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png"></a>
+                        </div>
                     </div>
-                </div>
-                <ul id="avatarChange">
-                        <li><img src="/assets/packages/static/openvk/img/upload.png" id="uploadIcon">
-                        <a href="/al_avatars" id="_newPicture" onmouseover="_newPicture.style.color = '#D9D9D9';" onmouseleave="_newPicture.style.color = '#B2B2B2';"> {tr("new_photo")}</a>
-                        </li>
-                        <!--<li><img src="/assets/packages/static/openvk/img/miniature.png"><a href="javascript:alert('')" id="_changeMiniature" style="color:#B2B2B2;" onmouseover="_changeMiniature.style.color = '#D9D9D9';" onmouseleave="_changeMiniature.style.color = '#B2B2B2';">{tr("change_miniature")}</a></li>-->
-                        <!--в опенвк не предвидится смена минатюры-->
-                </ul>
-                 
+                <ul id="avatarOptionsBlock">
+                    <li><img src="/assets/packages/static/openvk/img/upload.png" id="uploadIcon">
+                    <a href="/al_avatars" id="_newPicture"> {tr("new_photo")}</a>
+                    </li>
+                </ul>    
             </div>
                 <a href="{$user->getAvatarLink()|nocheck}">
                     <img src="{$user->getAvatarUrl('normal')}"
@@ -111,8 +92,8 @@
                 <script>
                     window.addEventListener("load", event => {
                         let image = avatarImage;
-                        avatarChange.style.marginTop = image.height-32+"px";
-                        avatarChange.style.width = image.width/1.25+"px"
+                        avatarOptionsBlock.style.marginTop = image.height-32+"px";
+                        avatarOptionsBlock.style.width = image.width/1.25+"px"
                     });
                  </script>
             </div>

Web/static/css/avataredit.css

@@ -1,46 +1,53 @@
 /*avatar controls*/
-#avatarEdit
+#deleteButton
+{
+    opacity:0.8;
+}
+#avatarOptionsBlock, #avatarDeleteBlock, #_newPicture, #_newAvatarPicture {
+    -webkit-transition: all 200ms ease-in-out;
+    -moz-transition: all 200ms ease-in-out;
+    -o-transition: all 200ms ease-in-out;
+    transition: all 200ms ease-in-out;
+}
+#avatarDeleteBlock
 {
     position: relative;
+    background-color:rgba(27, 27, 27, 0.8); 
+    opacity:0;
+}
+#avatarOptionsBlock
+{
+    position:absolute;
+    width:100px;
+    background-color:rgba(27, 27, 27, 0.8); 
+    list-style-type: none;
+    font-size:11px;
+    margin-bottom:20px;
+    padding-top:10px;
+    padding-bottom:10px;
+    opacity:0;
 }
 #_avatarDelete 
 {
     position:absolute;
     right:0;
     top:0;
-    background-color:rgba(51, 51, 51, 0); 
+    background-color:rgba(0, 0, 0, 0.7); 
     border-radius: 0px 0px 3px 3px;
     padding:2px;
     padding-left:3px;
+    opacity:1;
 }
-#deleteButton
-{
-    opacity:0;
+div#avatarAll:hover #avatarDeleteBlock {
+    opacity: 1 !important;
+    visibility: visible;
 }
-#avatarChange, #_avatarDelete, #_newPicture, #deleteButton, #_avatarDelete {
-    -webkit-transition: all 200ms ease-in-out;
-    -moz-transition: all 200ms ease-in-out;
-    -o-transition: all 200ms ease-in-out;
-    transition: all 200ms ease-in-out;
-}
-#avatarChange
-{
-    position:absolute;
-    width:100px;
-    background-color:rgba(51, 51, 51, 0);
-    list-style-type: none;
-    font-size:11px;
-    padding-top:10px;
-    padding-bottom:10px;
-    opacity:0%;
-}
-div#avatarAll:hover #avatarChange {
+div#avatarAll:hover #avatarOptionsBlock {
     opacity: 1 !important;
     visibility: visible;
 }
 #uploadIcon
 {
-    opacity:50%;
     position:absolute;
     left:0;
     margin-left:20px;
@@ -59,8 +66,19 @@ div#avatarAll:hover #avatarChange {
     text-align:center;
     left:20%;
     top:75%;
+    color:#5680a0 !important;
 }
-.newpict:hover
+#_newAvatarPicture2
 {
-    color:#5680a0;
-}
+    position:absolute;
+    left:0;
+    margin-left:20px;
+}
+#_newAvatarPicture
+{
+    color:#B2B2B2;
+}
+#_newAvatarPicture:hover
+{
+    color:#D9D9D9;
+}