show div from bottom

Question

i'am trying to update my portfolio to bootstrap 4. Here's my case :

I want to display a div from bottom to top on hover at the img. See my pic to understand please.

Which technique may i use to do this right ?

i use this code but the div stay hidden cause of 'display:none'

Any idea to do this in the best way please ?

     <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>    

Answer 1

Take a look at the following snippet. You can position the different elements from within the menu, to have different rules for when the menu item is hover (using pure CSS).

You'll have to play with the styling, of course - this is just a POC of how you can make it using CSS.

Explanation: Position the menu items on the bottom, and within each item, place the content you want to show when it's hover. Then give a :hover rule for menu item, and within that element, select the content element to show (using either display: block or whatever method you like).

.container {
  position: absolute;
  bottom: 0;
}

ul {
  list-style-type: none;
  margin: 0
}

ul:after {
  content: "";
  clear: both;
  display: block
}

li {
  float: left;
  padding: 10px;
}

li .content {
  display: none;
  position: absolute;
  bottom: 0;
  background-color: green;
}

li:hover .content {
  display: block;
}

<div class="container">
  <ul class="menu">
    <li>
      item1
      <div class="content">
           <h1>item1</h1>
      </div>
    </li>
    <li>
      item2
      <div class="content">
        <h1>item2</h1>
      </div>
    </li>
  </ul>
</div>