I would essentially like to be able to show and hide sections of HTML with a click of a button.
It is a bit hard to explain but I have a fiddle so show what I mean. As it stands I can only make one and I need to be able to create multiple. The code is done with inline css because I have no access to the stylesheet where this is to be used.
https://jsfiddle.net/edbaz1qd/
<!DOCTYPE html>
Not sure if this is what you're looking for but this is a handy piece of code that i use for showing/hiding text
html {
background: white
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
figure {
margin: 0 0 1.3rem 0;
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
figure img {
max-width: 100%;
height: auto;
}
body {
max-width: 480px;
width: 90%;
margin: 3em auto;
font-size: 75%;
line-height: 1.3rem;
font-family: sans-serif;
position: relative;
*zoom: 1;
}
body:before,
body:after {
content: "";
display: table;
}
body:after {
clear: both
}
p {
margin-bottom: 1.3rem
}
article {
margin-bottom: 3rem;
position: relative;
*zoom: 1;
}
article:before,
article:after {
content: "";
display: table;
}
article:after {
clear: both
}
article figure {
float: left;
width: 32.5%;
}
article section:first-of-type {
float: right;
width: 62.5%;
}
article section:last-of-type {
display: none;
visibility: hidden;
}
section {
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
input[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
[for="read_more"] {
position: absolute;
bottom: -3rem;
left: 0;
width: 100%;
text-align: center;
padding: .65rem;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}
[for="read_more"]:hover {
background: rgba(0, 0, 0, .5);
color: rgb(255, 255, 255);
}
[for="read_more"] span:last-of-type {
display: none;
visibility: hidden;
}
input[type=checkbox]:checked ~ section {
display: block;
visibility: visible;
width: 100%;
}
input[type=checkbox]:checked ~ figure {
width: 100%
}
input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type {
display: none;
visibility: hidden;
}
input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type {
display: block;
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Show/hide</title>
</head>
<body>
<article>
<input type="checkbox" id="read_more" role="button">
<label for="read_more" onclick=""><span>Show</span><span>Hide</span>
</label>
<figure>
<img src="http://www.musicmatters.ie/images/bara2.jpg" alt="Picture" />
</figure>
<section>
<p>Short Intro goes here. Write whatever you like.</p>
</section>
<section>
<p>Full article goes here. We'll make do with lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu orci elit. Pellentesque vel risus tortor. Pellentesque ut diam mi. Nunc iaculis ante ac tempus scelerisque. Etiam vestibulum
elementum quam et interdum. Integer vitae augue vitae nunc pulvinar scelerisque eu vitae justo. Mauris urna erat, ornare ut eros non, varius bibendum mauris. Vivamus dolor felis, tincidunt sed malesuada vel, ornare non ligula. Curabitur blandit
massa vitae ullamcorper fermentum. Nam rutrum odio dui, vitae tempus dui maximus sed.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu orci elit. Pellentesque vel risus tortor. Pellentesque ut diam mi. Nunc iaculis ante ac tempus scelerisque. Etiam vestibulum elementum quam et interdum. Integer vitae augue vitae
nunc pulvinar scelerisque eu vitae justo. Mauris urna erat, ornare ut eros non, varius bibendum mauris. Vivamus dolor felis, tincidunt sed malesuada vel, ornare non ligula. Curabitur blandit massa vitae ullamcorper fermentum. Nam rutrum odio dui,
vitae tempus dui maximus sed.</p>
</section>
</article>
</body>
</html>
Related
This question already has answers here:
Rotate a background element slightly
(2 answers)
Closed 6 years ago.
I'm trying to rotate background like below image but did not get any luck. Here is css code and html Markup. also if we do similar thing with svg, is it better approach?
.diagonal-shadow::before, .diagonal-shadow::after {
position: absolute;
content: '';
pointer-events: none;
}
.diagonal-shadow::before, .diagonal-shadow::after {
top: 0px;
left: 0%;
z-index: -1;
width: 100%;
height: 35%;
background: inherit;
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.diagonal-shadow::before {
height: 14%;
background: #333 !important;
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
-webkit-transform-origin: 3% 0;
transform-origin: 70% 0;
}
.col{
background:#f6f6f6;
padding: 40px 20px;
}
<div class="diagonal-shadow">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a viverra quam. Vestibulum maximus consequat porta. Duis aliquam ultrices semper. Suspendisse est orci, viverra eget ipsum et, ultricies bibendum nunc.</div>
</div>
</div>
.diagonal-shadow::before, .diagonal-shadow::after {
position: absolute;
content: '';
pointer-events: none;
}
.diagonal-shadow::before, .diagonal-shadow::after {
top: 0px;
left: 0%;
z-index: -1;
width: 100%;
height: 35%;
background: inherit;
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.diagonal-shadow::before {
height: 200px;
background: #ccc !important;
-webkit-transform: rotate(6deg);
transform: rotate(3deg) scale(1.1);
}
.col{
padding: 90px 20px;
}
<div class="diagonal-shadow">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a viverra quam. Vestibulum maximus consequat porta. Duis aliquam ultrices semper. Suspendisse est orci, viverra eget ipsum et, ultricies bibendum nunc.</div>
</div>
</div>
body {
background-color: #313449;
font-family: 'Open Sans', sans-serif;
}
#menu-toggle {
z-index: 1;
}
/* Hidden Checkbox */
#menu-toggle input {
opacity: 0;
width: 40px;
height: 40px;
z-index: 2;
/* checkbox on top */
position: absolute;
top: 0;
left: 0;
}
#menu-toggle input:checked {
transition: all 0.3s ease;
}
/* Hamburger */
#menu-toggle span {
display: block;
width: 30px;
border: #ffffff 2px solid;
margin-top: 5px;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: 0 0;
}
#menu-toggle input:checked ~ span {
/* all bars - top bar */
transform: rotate(45deg) translate(-1px, -3px);
border-color: #000000;
}
#menu-toggle input:checked ~ span:nth-child(3) {
/* middle bar */
transform: scale(0, 0);
opacity: 0;
}
#menu-toggle input ~ span:nth-child(4) {
/* bottom bar */
transform-origin: 0 100%;
}
#menu-toggle input:checked ~ span:nth-child(4) {
transform: rotate(-45deg) translate(0, 2px);
}
/* Menu Content */
#menu-toggle input:checked ~ #menu {
/* display menu */
left: 0;
}
#menu-toggle #menu {
background-color: grey;
background-color: rgba(255, 255, 255, 1);
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: -160px;
margin-top: 0;
transition: all 0.3s ease;
}
#menu-toggle li {
list-style: none;
margin: 30px 0;
}
#menu-toggle a li {
color: #000000;
text-decoration: none;
transition: color 0.3s ease;
}
#menu-toggle a li:hover {
color: red;
transition: color 0.3s ease;
}
<nav role="navigation">
<div id="menu-toggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Contact</li>
</a>
<a href="#">
<li>Sign in</li>
</a>
</ul>
</div>
</nav>
<section>
<h1>Title</h1>
<p>
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nam commodo suscipit quam. Donec sodales sagittis magna.
<br />
<br />Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Donec vitae sapien ut libero venenatis faucibus. In hac habitasse platea dictumst.
<br />
<br />Cras ultricies mi eu turpis hendrerit fringilla. Morbi mollis tellus ac sapien. Nam commodo suscipit quam.
<br />
<br />Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Phasellus magna. Phasellus nec sem in justo pellentesque facilisis.
</p>
</section>
Hi,
I am struggling with my burger menu. It is hidden under my #menu div and I cannot find why. I tried z-index to my spans but it is not working.
What am I doing wrong here?
I also cannot understand why my 2 span and my third span are nth-child(3) and (4)? It is working like this but I cannot figure out why it's not (2) and (3).
Thanks;
add position:relative and z-index:1 to your span.
body {
background-color: #313449;
font-family: 'Open Sans', sans-serif;
}
#menu-toggle {
z-index: 1;
}
/* Hidden Checkbox */
#menu-toggle input {
opacity: 0;
width: 40px;
height: 40px;
z-index: 2;
/* checkbox on top */
position: absolute;
top: 0;
left: 0;
}
#menu-toggle input:checked {
transition: all 0.3s ease;
}
/* Hamburger */
#menu-toggle span {
display: block;
width: 30px;
border: #ffffff 2px solid;
margin-top: 5px;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: 0 0;
position:relative;
z-index:1;
}
#menu-toggle input:checked ~ span {
/* all bars - top bar */
transform: rotate(45deg) translate(-1px, -3px);
border-color: #000000;
}
#menu-toggle input:checked ~ span:nth-child(3) {
/* middle bar */
transform: scale(0, 0);
opacity: 0;
}
#menu-toggle input ~ span:nth-child(4) {
/* bottom bar */
transform-origin: 0 100%;
}
#menu-toggle input:checked ~ span:nth-child(4) {
transform: rotate(-45deg) translate(0, 2px);
}
/* Menu Content */
#menu-toggle input:checked ~ #menu {
/* display menu */
left: 0;
}
#menu-toggle #menu {
background-color: grey;
background-color: rgba(255, 255, 255, 1);
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: -160px;
margin-top: 0;
transition: all 0.3s ease;
}
#menu-toggle li {
list-style: none;
margin: 30px 0;
}
#menu-toggle a li {
color: #000000;
text-decoration: none;
transition: color 0.3s ease;
}
#menu-toggle a li:hover {
color: red;
transition: color 0.3s ease;
}
<nav role="navigation">
<div id="menu-toggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Contact</li>
</a>
<a href="#">
<li>Sign in</li>
</a>
</ul>
</div>
</nav>
<section>
<h1>Title</h1>
<p>
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nam commodo suscipit quam. Donec sodales sagittis magna.
<br />
<br />Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Donec vitae sapien ut libero venenatis faucibus. In hac habitasse platea dictumst.
<br />
<br />Cras ultricies mi eu turpis hendrerit fringilla. Morbi mollis tellus ac sapien. Nam commodo suscipit quam.
<br />
<br />Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Phasellus magna. Phasellus nec sem in justo pellentesque facilisis.
</p>
</section>
I have an arrow on one of my websites indicating to users that they can keep scrolling down on the page. I set the position of this arrow to fixed so users keep seeing it as they scroll. However, I want it to not be seen when you are at the footer. I've tried changing the z-index of the footer so that it would be positioned above the fixed position arrow, but that didn't work. How do I make it so that the footer will be seen above the arrow?
Here is an example of what is going on..
http://codepen.io/aahmed2/pen/dpjozP?editors=1100
#picture {
background: url(http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg) fixed bottom;
background-size: cover;
height: 900px;
}
#picture h1 {
color: #fff;
text-align: center;
font-size: 130px;
padding-top: 40px;
}
#down-arrow {
position: fixed;
z-index: 1;
font-size: 25px;
color: #ffffff;
bottom: 10%;
left: 1%;
}
.bounce {
-webkit-animation: bounce 4s infinite;
animation: bounce 4s infinite;
}
/* .bounce animation */
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#main {
padding-top: 80px;
padding-bottom: 80px;
}
#footer {
background-color: #333332;
height: 300px;
z-index: 2;
text-align: center;
padding: 20px;
color: #ffffff;
}
<div id="picture">
<div class="container">
<h1>WELCOME<br>to the<br>ROCKIES</h1>
</div>
</div>
<div id="down-arrow" class="bounce"><span class="glyphicon glyphicon-chevron-down"></span></div>
<div id="main">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur sodales arcu, hendrerit fermentum nisi sagittis et. Aenean vel ex at purus feugiat facilisis. Pellentesque egestas, velit hendrerit porta pretium, mi sapien laoreet arcu, eu pretium libero ligula fermentum mauris. Etiam ac finibus lorem. Mauris sollicitudin, libero sit amet pulvinar placerat, nibh urna pharetra felis, vel suscipit tellus lectus sit amet augue. Phasellus sed porta tortor. Duis bibendum quam pretium, vehicula erat vitae, ullamcorper mauris. Donec a lacinia est. Proin vel tellus erat. Aenean ultrices sollicitudin sem sit amet dignissim. Vivamus et semper eros, at porttitor erat. Ut consequat nulla ac hendrerit rhoncus. Donec feugiat lobortis tellus at ultricies.</p>
</div>
</div>
<div id="footer">
<h2>FOOTER</h2>
</div>
Just give position to your footer.
footer {
position: relative;
z-index: 5;
}
add position: relative; to the footer:
#footer {
background-color: #333332;
height: 300px;
z-index: 2;
text-align: center;
padding: 20px;
color: #ffffff;
position: relative;
}
I want to use the carousel part of the HTML5 template that I found, so I put it in the website I'm doing using asp.net mvc.
It works but when I'm hovering to the right arrow, the last content of the carousel is just showing 1/4 of it.
I'm not really sure what is the cause of this, if it's the CSS. So here's the CSS code of the carousel. Help me pleeease.
/* Carousel */
.carousel {
position: relative;
overflow: hidden;
padding: 2em 0 2em 0;
margin-bottom: 0;
}
.carousel .forward, .carousel .backward {
position: absolute;
top: 50%;
width: 6em;
height: 12em;
margin-top: -6em;
cursor: pointer;
}
.carousel .forward:before, .carousel .backward:before {
content: '';
display: block;
width: 6em;
height: 6em;
border-radius: 100%;
background-color: #6e6f74;
position: absolute;
top: 50%;
margin-top: -3em;
-moz-transition: background-color 0.35s ease-in-out;
-webkit-transition: background-color 0.35s ease-in-out;
-o-transition: background-color 0.35s ease-in-out;
-ms-transition: background-color 0.35s ease-in-out;
transition: background-color 0.35s ease-in-out;
-webkit-backface-visibility: hidden;
}
.carousel .forward:after, .carousel .backward:after {
content: '';
width: 3em;
height: 3em;
position: absolute;
top: 50%;
margin: -1.5em 0 0 0;
background: url("images/arrow.svg") no-repeat center center;
}
.carousel .forward:hover:before, .carousel .backward:hover:before {
background-color: #0066cc;
}
.carousel .forward {
right: 0;
}
.carousel .forward:before {
right: -3em;
}
.carousel .forward:after {
right: -0.25em;
}
.carousel .backward {
left: 0;
}
.carousel .backward:before {
left: -3em;
}
.carousel .backward:after {
left: -0.25em;
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
.carousel .reel {
white-space: nowrap;
position: relative;
-webkit-overflow-scrolling: touch;
padding: 0 2em 0 2em;
}
.carousel article {
display: inline-block;
width: 18em;
background: #fff;
text-align: center;
padding: 0 1em 3em 1em;
margin: 0 2em 0 0;
white-space: normal;
opacity: 1.0;
-moz-transition: opacity 0.75s ease-in-out;
-webkit-transition: opacity 0.75s ease-in-out;
-ms-transition: opacity 0.75s ease-in-out;
transition: opacity 0.75s ease-in-out;
}
.carousel article.loading {
opacity: 0;
}
.carousel article .image {
position: relative;
left: -1em;
top: 0;
width: auto;
margin-right: -2em;
margin-bottom: 3em;
}
.carousel article p {
text-align: center;
}
/* Wide */
#media screen and (max-width: 1680px) {
/* Carousel */
.carousel {
padding: 1.5em 0 1.5em 0;
}
.carousel .reel {
padding: 0 1.5em 0 1.5em;
}
.carousel article {
width: 18em;
margin: 0 1.25em 0 0;
}
}
/* Narrower */
#media screen and (max-width: 840px) {
/* Carousel */
.carousel {
padding: 1.25em 0 1.25em 0;
}
.carousel article {
width: 18em;
margin: 0 1em 0 0;
}
}
#media screen and (max-width: 736px) {
/* Carousel */
.carousel {
padding: 0.5em 0 0.5em 0;
}
.carousel .reel {
padding: 0 0.5em 0 0.5em;
}
.carousel article {
width: 14em;
padding-bottom: 2em;
margin: 0 0.5em 0 0;
}
.carousel article .image {
margin-bottom: 2em;
}
}
And here's the .cshtml:
<!-- Carousel -->
<section class="carousel">
<div class="reel">
<article>
<header>
<h3>Pulvinar sagittis congue</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Fermentum sagittis proin</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Sed quis rhoncus placerat</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Ultrices urna sit lobortis</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Varius magnis sollicitudin</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Pulvinar sagittis congue</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Fermentum sagittis proin</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Sed quis rhoncus placerat</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Ultrices urna sit lobortis</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<header>
<h3>Varius magnis sollicitudin</h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
</div>
</section>
How can fill the gap at the bottom while using -webkit-transform:?
There is a gap when div becoming small. How can I fix this gap?
Here is the code
<div id="popUp">
<div id="trans">
<h1>hover me</h1>
</div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate</p>
</div>
CSS
#popUp{
height: auto;
width:400px;
background: #EEE;
}
#trans{
width:100%;
height:200px;
background: yellow;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform-origin: left top 0;
-moz-transform-origin: left top 0;
-o-transform-origin: left top 0;
-ms-transform-origin: left top 0;
transform-origin: left top 0;
}
#trans:hover{
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
-webkit-transform: scale(.5);
transform: scale(.5)
}
h1{
text-align: center;
}
Demo: http://jsfiddle.net/sweetmaanu/XpJEQ/3/
I couldn't find a proper solution.
The only solution I can think of would be to remove the element from the DOM flow (set it's parent to position: relative, then absolutely position the element) and animate the padding-top of the subsequent element.
Demo: http://jsfiddle.net/XpJEQ/7/
CSS (minus vendor prefixes):
#popUp {
background: #EEE;
position: relative;
width: 400px;
max-height: 300px;
}
#trans {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
background: yellow;
transition: all 0.5s;
transform-origin: left top 0;
}
#trans:hover { transform: scale(.5); }
#trans + * {
padding-top: 210px;
transition: all 0.5s;
}
#trans:hover + * { padding-top: 110px; }
h1 { text-align: center; }
HTML:
<div id="popUp">
<div id="trans">
<h1>hover me</h1>
</div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate</p>
</div>
CSS3 transform scale2d will not cause repositioning of elements around it. If you want the text to move, you would need to change the actual height and width of the element.
I've slightly modified your initial code as following (there is no gap between text and yellow rectangle on transform):
#popUp{
height: 300px;
width:400px;
background: #EEE;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform-origin: left top 0;
-moz-transform-origin: left top 0;
-o-transform-origin: left top 0;
-ms-transform-origin: left top 0;
transform-origin: left top 0;
}
#popUp:hover{
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
-webkit-transform: scale(.5);
transform: scale(.5)
}
#trans{
width:100%;
height:200px;
background: yellow;
}
h1{
text-align: center;
}
It fits the initial requirements of eliminating that gap. If there are any additional requirements, then the code can be modified, correspondingly.