Jump to content

Dynamic Greeting Card


tejasamrute

Recommended Posts

http://jsfiddle.net/makzan/RE2JJ/

 

The coding in the above link has fixed height and width (180 X 180 i.e Square)...I have images which are not square...they are either landscape or portrait....i tried to make width and height dynamic so that it could fit any size of image but i couldn't do it....Can anyone help me out,... Please..

 

 

Help Appreciated

Link to comment
Share on other sites

any size of image should fit in the front... and the back side of the card should adjust the height according to the front side.....

 

if you remove the sizes mentioned 180px n make it auto..then front side will be dynamic according to the image...but the back side will not be

Link to comment
Share on other sites

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            .cards {                max-width: 800px;                margin: 0 auto;                text-align: center;            }            .card {                display: table;                min-height: 180px;                min-width: 180px;                position: relative;                margin: 30px auto;                -webkit-perspective: 700px;                -moz-perspective: 700px;                left: 50%;float: left;                clear:both;            }            .front {background-color: yellow;position: relative; z-index: 20; display: table-cell;  }            .back {position: absolute; top:0; left: 0; right:0; bottom: 0; background: red; z-index: 10;}            .card * { max-width: 500px;}            .face {font-size:0;}            .face *{font-size:16px;}            .card:before {                content: 'Mouse down for detail ⤏';                position: absolute;                width: 180px;                height: 180px;                line-height: 180px;                text-align: center;                top: 0;                left: -180px;                color: #222;            }            .back {                z-index: 1;            }            .card:hover .face {                -webkit-transition: all 0.3s ease-out;                -moz-transition: all 0.3s ease-out;            }            .face {                -webkit-backface-visibility: visible;                -webkit-transition: all 0.5s ease-out;                -webkit-transform-origin: 0 0;                -moz-backface-visibility: visible;                -moz-transition: all 0.5s ease-out;                -moz-transform-origin: 0 0;            }            .front {                -webkit-transform: rotateY(-20deg);                -moz-transform: rotateY(-20deg);            }            .back {                background: #9dcc78;                -webkit-transform: rotateY(0deg);                -moz-transform: rotateY(0deg);            }            .card:hover .front {                -webkit-transform: rotateY(-35deg);                -moz-transform: rotateY(-35deg);            }            .card:active .front{                -webkit-transform: rotateY(-165deg);                -moz-transform: rotateY(-165deg);            }            .card:active .back {                -webkit-transform: rotateY(-15deg);                -moz-transform: rotateY(-15deg);            }        </style>    </head>    <body>        <div class='cards'>            <div class='card'>                <div class='front face'><img src='http://placehold.it/180x180' alt="" width="296" height="221" /></div>                <div class="back face">                    <p>This is back</p>                </div>            </div>            <div class='card'>                <div class='front face'><img src='http://placehold.it/180x180' alt="" /></div>                <div class="back face">                    <p>This is back</p>                </div>            </div>            <div class='card'>                <div class='front face'><img src='http://placehold.it/180x180' alt="" width="720" height="272"/></div>                <div class="back face">                    <p>This is back</p>                </div>            </div>        </div>    </body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...