Olá,
Pretendo utilizar o mesmo código que criei neste exemplo jsfiddle, para que a DIV que está oculta, ao invés de aparecer do topo, aparaça do footer (de baixo para cima).
Vejam este exemplo, clicando no circulo amarelo.
E depois através desta imagem, terem noção do que preciso.
Confesso que tentei, mas não consegui chegar neste resultado.
body {
display: flex;
align-items: center;
justify-content: center;
}
.dialog {
width: 300px;
}
.container {
border: none;
box-shadow: 0 40px 77px rgba(0, 0, 0, 0.22), 0 27px 24px rgba(0, 0, 0, 0.2);
position: relative;
background-color: #fff;
background-clip: padding-box;
outline: 0;
}
.container .header {
min-height: 16px;
border: none;
background: #fff !important;
color: #3f51b5;
}
.container .title {
line-height: 0;
}
.content {
background-color: #efefef;
height: 350px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
}
.footer {
text-align: right;
border-top: 1px solid #e5e5e5;
padding: 8px 0;
}
.pt-5 {
padding-top: 5px !important;
}
.px-15 {
padding-right: 15px !important;
padding-left: 15px !important;
}
.mt-0 {
margin-top: 0px !important;
}
/* DIV-IMAGE */
.header {
position: relative!important;
z-index: 20!important;
}
.view-image .header {
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.show-image {
background: rgb(232, 216, 49);
color: rgba(124, 98, 152, 1);
width: 40px;
height: 40px;
text-align: center;
position: absolute;
right: 1em;
bottom: 0;
margin-bottom: -15px;
border-radius: 100%;
font-size: 16px;
cursor: pointer;
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: all .3s;
}
.view-image .show-image {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.26);
}
.icon-nocode,
.icon-yepcode {
transition: opacity .3s;
position: absolute;
left: 0;
display: block;
width: 100%;
line-height: 40px;
}
.icon-nocode {
opacity: 0;
}
.view-image .icon-nocode {
opacity: 1;
}
.view-image .icon-yepcode {
opacity: 0;
}
.panel-image {
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 8px;
overflow: hidden;
}
.div-image {
z-index: 5;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 300px;
background: rgba(124, 98, 152, 0.94);
color: rgba(245, 247, 247, 0.92);
padding: 0em 1em;
transition: all .4s;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.view-image .div-image {
-webkit-transform: translateY(0);
transform: translateY(0);
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.36);
}
<!DOCTYPE HTML>
<html class="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="style.css" rel="stylesheet">
<title>To push</title>
</head>
<body>
<div id="panel-image" class="dialog panel-image">
<div class="container " STYLE="border-radius: 8px!important;">
<div class="header" STYLE="padding-left: 15px; padding-right: 15px; padding-top: 20px; padding-bottom: 20px; border-top-left-radius: 8px!important; border-top-right-radius: 8px!important;">
<h4 class="title">
<span>TITLE</span>
</h4>
<span id="show-image" class="show-image">
<i class="ion-eye icon-yepcode"></i>
<i class="ion-eye-disabled icon-nocode"></i>
</span>
</div>
<div id="content" class="content" style="">
<div class="div-image"></div>
</div>
<div class="footer mt-0 pt-5 pb-15 px-15">
<button id="user-close" class="matter-button-text matter-primary mr-5" data-dismiss="modal">CLOSE</button>
<button id="user-save" class="matter-button-unelevated matter-primary" data-pos="bottom-left">SAVE</button>
</div>
</div><!-- modal-content -->
</div><!-- modal -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var panelImage = document.getElementById('panel-image'),
showImage = document.getElementById('show-image');
showImage.addEventListener('click', _toggleImage);
function _toggleImage() {
panelImage.classList.toggle('view-image');
}
</script>
</body>
</html>