-1

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>

inserir a descrição da imagem aqui

1 Resposta 1

1

Vamos lá.

Na .div-image você precisa jogá-la pra baixo. Retire o top: 0 e coloque o bottom: 0. Agora temos que jogá-la pra fora da tela. Podemos usar o mesmo translate usado. Use translateY(100%). O translate é relativo ao tamanho do elemento.

.div-image {
    z-index: 5;
    position: absolute;
  bottom: 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);
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .