html - How do I center 2 images in a circular div while also overlapping them? -

-

i've been messing bootstrap template...pretty standard row 3 items.

each of row items i've turned divs circular background. now, i'm trying take 2 images (so can animate them) , center them in div.

i've found few ways hack around it...but i'm wondering best way is?

i want able control layering & make sure they're vertically centered @ times.

absolute positioning 1 of them borks centering of other right now...

html

<div class="col-lg-4">             <div class="feature-icon">                 <div id="phone">                      <img class="behind" src="img/svg/phone.svg" width="40">                     <img src="img/svg/pocket.svg" width="70">                 </div>             </div>

css

img.behind { z-index: 0; position: relative; left: 20px; top: 40px; }

here's looks right now.

image

i dont understand question. full control of div within container using absolute position make parent container relative.

html 

<div id="parent-container">      <div id="animated-object1" class="object"></div>      <div id="animated-object2" class="object"></div>      <div id="animated-object3" class="object"></div> </div>

css

#parent-container{    position:relative;    top:0;    bottom:0;    left:0;    right:0;    margin: auto;    width:100%;    height:500px;     border:1px solid red; }  .object{    position: absolute;     width:50px;     height:50px;    top:0;    bottom:0;    left:0;    right:0;    margin: auto;     border: 1px solid green; } #animated-object1{   left:300px;   border:1px solid blue; }

javascript - jquery - onclick- animation syntax 

$('#parent-container').on('click', function(){     $('#animated-object1').animate({       left: "0px"     }) })

http://jsfiddle.net/9lufvdfn/4/


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more