html - Can't figure out how to combine nth-of-type selector with transitions -

i have series of divs have images in them. i'm alternating side of div image floats (1st div floats left, next floats right, , on). i'm trying make when user hovers on div, image smoothly transitions 1 end other.

with have far, image switch sides, ignoring 1s transition i'm trying implement.

i'm not quite sure i'm using transition affect nth-of-type selectors. see i'm doing wrong?

.introcard {   -webkit-transition: float 1s;   transition: float 1s; } .introcard {   color: white;   font-size: 140px;   margin: auto 80px;   vertical-align: middle;   line-height: 200px; } .introcard:nth-of-type(odd) .fa {   float: left; } .introcard:nth-of-type(even) .fa {   float: right; } .introcard:hover:nth-of-type(odd) .fa {   float: right; } .introcard:hover:nth-of-type(even) .fa {   float: left; } 

here's relevant html

<div class="introcard">     <i class="fa fa-plus-circle"></i>     <h1>create</h1>  </div>  <div class="introcard">     <i class="fa fa-pencil-square-o"></i>     <h1>modify</h1>  </div>  <div class="introcard">     <i class="fa fa-graduation-cap"></i>     <h1>learn</h1>  </div> 

there } missing here &:nth-of-type(even) { .fa { float: right; }

otherwise, should check code on w3c css validator. there same thing html.

edit: can't have transition on float. way should apply transition "value parameter" right left margin-right margin-left ... etc or transform: translatex(-200px); exemple.

good luck'