html - CSS: Image preview - Circle-to-Rectangle on hover -
this admittedly simple question may have been asked here asked i'm struggling here.
what want image has circle preview expands rectangle on hover (it scales). have pretty close center kind of "bobbles" , i'm not fan of empty div approach...
.card{ color: #ff2772; border-radius: 15px; margin: 3px 1px; background-color: #2d3034; box-sizing: border-box; width: 300px; min-height: 400px; display: inline-block; transition: .25s; cursor:pointer; text-align: center; border: 1px solid #ff2772; } .button { background-color: #ff2772; color: #fff; padding: 10px 30px; border-radius: 10px; } #seasonone .test { background: url('http://placehold.it/250x200') 50% 50% no-repeat; width: 200px; height: 200px; border-radius: 100%; display: block; margin: 0 auto; transition: .3s; transform: scale(.9); } #seasonone:hover .test { transform: scale(1); width: 250px; height: 200px; border-radius: 0; }<div id="seasonone" class="card seasonone"> <h3>season 1 (2009) - pilot</h3> <div class="test"> </div> <p class="animated smalltext fadeinright">ut cursus purus in lacinia tincidunt. quisque lorem odio, posuere ut aliquam vel, fringilla @ enim. duis ligula lacus, viverra et sapien rhoncus, commodo euismod ipsum.</p> <a href="#area" class="button">read more</a> </div>like said, have pretty close. it's not centered driving me crazy. don't having set image in css rather html (though that's minor gripe) ideas better way go this?
edit: okay clarify:
1.) scale .9 1 intentional
2.) rectangular proportions (250x200px) important. it's not supposed perfect square.
3.) when say center 'bobbles" mean deviates. it's subtle shifts around few pixels. sadly don't think problem showing in snippet means it's coming somewhere else in css :/ here's on site (sorry cutesy art) 
i guess better question how can achieve effect without empty div , guaranteed centered?
edit 2: problem in firefox. can see art "vibrate" in codepen http://codepen.io/stuffiestephie/pen/zrzweq
the reason why getting bobbling event
you have set transition property on hover includes scaling element bigger size. hence, background image scaled div scaled. doing setting increase width irrelevant since transformation scale doing same thing
change
#seasonone:hover .test { transform: scale(1); width: 250px; height: 200px; border-radius: 0; } to
#seasonone:hover .test { border-radius: 0; } here snippet
.card{ color: #ff2772; border-radius: 15px; margin: 3px 1px; background-color: #2d3034; box-sizing: border-box; width: 300px; min-height: 400px; display: inline-block; transition: .25s; cursor:pointer; text-align: center; border: 1px solid #ff2772; } .button { background-color: #ff2772; color: #fff; padding: 10px 30px; border-radius: 10px; } #seasonone .test { background: url('http://placehold.it/250x200') 50% 50% no-repeat; /* 50% 50% centers image in div */ width: 200px; height: 200px; border-radius: 100%; display: block; margin: 0 auto; transition-property:border; transition: .3s; transform: scale(.9); } #seasonone:hover .test { border-radius: 0; }<div id="seasonone" class="card seasonone"> <h3>season 1 (2009) - pilot</h3> <div class="test"> </div> <p class="animated smalltext fadeinright">ut cursus purus in lacinia tincidunt. quisque lorem odio, posuere ut aliquam vel, fringilla @ enim. duis ligula lacus, viverra et sapien rhoncus, commodo euismod ipsum.</p> <a href="#area" class="button">read more</a> </div>edit: looking @ codepen here snippet
.season img { float: left; max-width: 500px; width: 100%; animation-delay:0.1s; } .season p.onep { animation-delay:0.5s; } .season p.twop { animation-delay:0.75s; } .season p.threep { animation-delay:1s; } .season h2 { border-radius: 10px 10px 0 0; background-color: #eee; padding: 3px; margin-top: 0; overflow-x: hidden; } .season .smalltext { animation-delay:0.2s; overflow: hidden; } .season h6, .season .arts, .season h3 { text-align: center !important; animation-delay: 1.8s; } .next, .prev { float: right; box-sizing: border-box; width: 49%; animation-delay: 3s; border: 3px solid #eee; border-radius: 15px; } .prev { float: left; } .prev img.preview, .next img.preview { float: left; } .previews { display: -webkit-flex; /* safari */ -webkit-justify-content: space-around; /* safari 6.1+ */ display: flex; justify-content: space-around; flex-wrap: wrap; } .card{ color: #ff2772; border-radius: 15px; margin: 3px 1px; background-color: #2d3034; box-sizing: border-box; width: 300px; min-height: 400px; display: inline-block; transition: .25s; cursor:pointer; border: 1px solid #ff2772; text-align: center; } .floatright { float: right; margin-right: 10px; } #page-content .card h6 { padding: 10px 2px; background: none; border-radius: 10px 10px 0 0; transition: .3s; border-bottom: 1px solid #fff; } #page-content .card .smalltext { transition: .3s; background: none; border-bottom: 1px solid #fff; border-top: 1px solid #fff; } #page-content .card:hover .smalltext, #page-content .card:hover h6{ background-color: #ff2772; color: #2d3034; } .card:hover{ background: #fff; } /* .card img { width: 200px; text-align: center; border-radius: 100%; background: #fff; margin: 0 auto; display: block; transform: scale(.9); transition: .2s ease-in-out; } /*.card .test { transform: scale(.9); width: 200px; height: 200px; overflow-x: hidden; display: block; margin: 0 auto; } */ #seasonone .test { padding:0; background-color: #fff; background: #fff url('http://i296.photobucket.com/albums/mm174/stuffiestephie/s1chibipreview2_zpsswyamase.png') 50% 50% no-repeat; width: 200px; height: 200px; border-radius: 50%; display: block; margin: 0 auto; -webkit-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; -webkit-transform: scale(.9); -ms-transform: scale(.9); -moz-transform: scale(.9); transform: scale(.9); font-size: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } #seasonone:hover .test { border-radius: 0; } hr { margin: 0; padding: 0; } img.preview { transform: scale(.9); width: 200px; display: inline; float: none; border-radius: 10px; transition: .2s ease-in-out; box-shadow: 0 1px 1px rgba(0,0,0,0.3); border-radius: 10px; line-height: 0; font-size: 0; } .art img.preview:nth-child(1) { animation-delay: 2s; } .art img.preview:nth-child(2) { animation-delay: 2.25s; } .logo{ clear:left; padding-bottom: 10px; } img.preview:hover { transform: scale(1); box-shadow: 0 15px 15px rgba(0,0,0,0.3); border-radius: 0; } .season img.no-float { float: none; } @media screen , (max-width: 1200px) { .season h6 { clear: both; } } @media screen , (max-width: 800px) { .prev img.preview, .next img.preview { float: left; } .season p { clear: both; } .prev p, .next p { clear: none; } .season img{ float: none; margin: 0 auto; text-align: center; } } @media screen , (max-width: 750px) { .card { width: 49%; box-sizing: border-box; } } @media screen , (max-width: 600px) { .prev, .next{ width: 100%; float: none; margin: 5px auto; } .prev img.preview, .next img.preview { } } @media screen , (max-width: 399px) { .card{ width: 100%; } }<!doctype html> <html> <head> <!-- meta --> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" /> <!-- styles --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css"> <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/2.1.0/animate.min.css"> <!-- magnific popup core css file --> <link href='http://fonts.googleapis.com/css?family=quicksand:700|montserrat:700|open+sans|sniglet:400,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="http://kamicon.net/assets/styles/mainstyles.css"> <link rel="stylesheet" <!--[if lt ie 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <body> <div id="site-canvas"> <div id="page-content"> <section><h1>help me!</h1> <p>the art shakes horribly when hover on in firefox why!?</p> <div id="area" class="holder"></div> <div class="previews"> <div id="seasonone" class="card seasonone"> <h6 class="center">season 1 (2009) - pilot</h6> <div class="test"></div> <p class="animated smalltext fadeinright onep">ut cursus purus in lacinia tincidunt. quisque lorem odio, posuere ut aliquam vel, fringilla @ enim. duis ligula lacus, viverra et sapien rhoncus, commodo euismod ipsum.</p> <a href="#area" class="button">read more</a> </div> </div> <hr/> </section> </div> <!-- #page-content --> </div><!-- #site-canvas --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </body> </html>
Comments
Post a Comment