-1
Hello,
I intend to use the same code I created in this example jsfiddle, so that the DIV that is hidden, instead of appearing from the top, footer trim (from bottom to top).
Take this example by clicking on the yellow circle.
And then through this image, you know what I need.
I confess that I tried, but I could not reach this result.
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>