dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: zoom in zoom out background image

  1. #1
    Join Date
    Jul 2013
    Posts
    80

    zoom in zoom out background image

    Hello,

    How to make body background image zoom in zoom out using link.
    for example, if i click + link, background image will be full screen. when i click - link, background image will be container (bootstrap) size.

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,705
    Hi there aelynne,

    here is a basic example...
    Code:
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>untitled document</title>
    
    <style media="screen">
    body {
        backgound-color:#f0f0f0;
     }
    #cb {
        display:none;
     }
    #cb:checked~#bgbox {
        top:0;
        right:0;
        bottom:0;
        left:0;
     }
    #cb:checked~#but::before {
        content:'zoom out';
     }
    #but {
        display:block;
        width:90px;
        padding:4px 0;
        border:1px solid #999;
        border-radius:5px;
        background-image:linear-gradient(to bottom,#fff,#ccc);
        box-shadow:inset 0 0 5px #999;
        text-align:center;
        cursor:pointer;
     }
    #but::before {
        content:'zoom in';
     }
    #bgbox  {
        position:absolute;
        top:45%;
        right:45%;
        bottom:45%;
        left:45%;
        z-index:-9999;
        background-color:#f00;
        background-image:url(http://coothead.co.uk/images/blood.jpg);
        background-size:100% 100%;
        transition:all 1.5s ease-in-out;
     }
    </style>
    
    </head>
    <body>
    
    <input id="cb" type="checkbox">
    
    <label id="but" for="cb"></label>
    
    <div id="bgbox"></div>
    
    </body>
    </html>
    coothead
    ~ the original bald headed old fart ~

  3. #3
    Join Date
    Jul 2013
    Posts
    80
    thanks. it works. but how to use 2 button, one for zoom in, one for zoom out?

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,705

    Two buttons...
    Code:
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>untitled document</title>
    
    <style media="screen">
    body {
        backgound-color:#f0f0f0;
     }
    #r0,#r1 {
        display:none;
     }
    #r0:checked~#bgbox {
        top:0;
        right:0;
        bottom:0;
        left:0;
        animation:rollout 1.5s forwards;
     }
    #r1:checked~#bgbox {
        top:45%;
        right:45%;
        bottom:45%;
        left:45%;
        animation:rollin 1.5s forwards;
     }
    .but {
        display:inline-block;
        width:30px;
        padding:4px 0;
        border:1px solid #999;
        border-radius:5px;
        background-image:linear-gradient(to bottom,#fff,#ccc);
        box-shadow:inset 0 0 5px #999;
        text-align:center;
        cursor:pointer;
     }
    #bgbox  {
        position:absolute;
        top:45%;
        right:45%;
        bottom:45%;
        left:45%;
        z-index:-9999;
        background-color:#f00;
        background-image:url(http://coothead.co.uk/images/blood.jpg);
        background-size:100% 100%;
        transition:all 1.5s ease-in-out;
     }
    @keyframes rollout {
    0% {
        transform:rotateX(0) rotateY(0) rotateZ(0);
      }
    100% {
        transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
      }
     }
    @keyframes rollin {
    0% {
        transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
      }
    100% {
        transform:rotateX(0) rotateY(0) rotateZ(0);
      }
     }
    </style>
    
    </head>
    <body>
    
    <input id="r0" name="r" type="radio">
    <label class="but" for="r0">+</label>
    <input id="r1" name="r" type="radio">
    <label class="but" for="r1" checked="cheked">-</label>
    
    <div id="bgbox"></div>
    
    </body>
    </html>
    ...in less space than one.

    coothead
    ~ the original bald headed old fart ~

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles