Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <p>some text...</p>
- <input id="zoom" type="checkbox">
- <label for="zoom" class="container">
- <img alt="kitten" src="http://placekitten.com/g/600/300"/>
- </label>
- <p>some another text</p>
- * {
- margin:0 auto;
- }
- html, body{
- width:100%;
- height:100%;
- text-align:justify;
- }
- p{
- display:block;
- height:25%;
- overflow:hidden;
- }
- label + p {
- position:absolute;
- top:260px;
- height:auto;
- }
- #zoom{
- display:none;
- }
- input + .container {
- position:absolute;
- z-index:9999;
- top:25%;
- right:0;
- left:0;
- bottom:0;
- width:300px;
- height:150px;
- text-align:center;
- cursor:pointer;
- display:block;
- -webkit-transition: height .4s, width .4s, background-color .4s;
- transition: height .4s, width .4s, background-color .4s, top .4s;
- background-color: rgba(0,0,0,0)
- }
- input:checked + .container {
- position:fixed;
- top:0%;
- right:0;
- left:0;
- bottom:0;
- width:100%;
- height:100%;
- background-color: rgba(0,0,0,0.8);
- }
- input + .container img{
- max-width: 100% !important;
- max-height: 100% !important;
- position: relative;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement