tejasamrute Posted November 11, 2014 Share Posted November 11, 2014 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 More sharing options...
niche Posted November 11, 2014 Share Posted November 11, 2014 Dynamic in what way? Link to comment Share on other sites More sharing options...
tejasamrute Posted November 11, 2014 Author Share Posted November 11, 2014 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 More sharing options...
dsonesuk Posted November 11, 2014 Share Posted November 11, 2014 I suggest you try display: inline-block; or display: table; and maybe display: table-cell; on the outer container these will cause the container to shrink to content i.e, image. Link to comment Share on other sites More sharing options...
tejasamrute Posted November 13, 2014 Author Share Posted November 13, 2014 no luck....can anyone try coding it?...i have been scratching my head from past 3 days... Link to comment Share on other sites More sharing options...
dsonesuk Posted November 13, 2014 Share Posted November 13, 2014 <!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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now