Html 从底部显示div

我正在尝试将我的公文包更新为Bootstrap4。这是我的情况：

我想在img上悬停显示一个从下到上的div。请看我的图片了解

我可以使用哪种技术来正确地执行此操作

我使用此代码，但div保持隐藏状态，原因是“display:none”

有没有什么好办法

     <style>
     #container {
     bottom: 0;
     display: none;
     position: fixed;
     width: 15%;
     }

     #inner {
     background-color: #F0F0F0 ;
     border: 1px solid #666666 ;
     border-bottom-width: 0px ;
     padding: 20px 20px 500px 20px ; 
     }
     </style>
     var container = $( "#container" );


        // Bind the link to toggle the slide.
        $( "a" ).hover(
            function( event ){
                // Prevent the default event.
                event.preventDefault();

                // Toggle the slide based on its current
                // visibility.
                if (container.is( ":visible" )){

                    // Hide - slide up.
                    container.slideUp( 2000 );

                } else {

                    // Show - slide down.
                    container.slideDown( 2000 );

                }
            }
        );
                     <p>
                              <a href="#">Show Div With SlideDown()</a>
                      </p>

                  <div id="container">
                  <div id="inner">

                      my picture project

                   </div>
                   </div>    

---

请看下面的代码片段。您可以从菜单中定位不同的元素，以便在使用纯CSS悬停菜单项时具有不同的规则

当然，你必须要使用样式——这只是一个如何使用CSS的POC

说明：将菜单项放在底部，并在每个项中放置悬停时要显示的内容。然后为菜单项提供：hover规则，并在该元素中，使用display:block或任何您喜欢的方法选择要显示的内容元素

.集装箱{ 位置：绝对位置； 底部：0； } 保险商实验室{ 列表样式类型：无； 保证金：0 } ul：之后{ 内容：； 明确：两者皆有； 显示：块 } 李{ 浮动：左； 填充：10px； } 李.内容{ 显示：无； 位置：绝对位置； 底部：0； 背景颜色：绿色； } 李：悬停。内容{ 显示：块； } 项目1 项目1 项目2 项目2

---

你并不是在问一个具体的问题，而是在要求某人来实现你的设计。我的简短回答是：使用纯CSS。没有JS，但是我不能说更多，除非我真的为你做了工作…谢谢你的回答。我的问题在上面提到：哪种技术是最好的做这种显示。第二个问题是：如何让一些像素像图片一样显示在底部。我不知道如何做，而不是显示是没有。哦，谢谢。我在寻找一些很难的东西。我是网页设计的初学者。谢谢你的解释。