html5 - The "hover" not work properly -

i have problem div "transition"\"hover" @ project : comverese.

at section "success stories" . when hover div's , go o.k ,but not stay when move mouse in div.

what problem?

.story1{     position: absolute;     width: 22rem;     height: 12rem;     z-index: 9;     background: white;     padding: 1rem;     -webkit-transition:transform .6s ease-out;     -moz-transition:transform .6s ease-out;     -ms-transition:transform .6s ease-out;     -o-transition:transform .6s ease-out;     transition:transform .6s ease-out; }  .story1:hover{     -webkit-transform:translate(0px,-200px);     -moz-transform:translate(0px,-200px);     -ms-transform:translate(0px,-200px);     -o-transform:translate(0px,-200px);     transform:translate(0px,-200px); } 

the problem div not hovered anymore after translates. div moved up, , you're hovering div below (namely .quote div) -> story div comes down.

one way fix use bit of javascript instead of solely relying upon css. adding specific class on mouseenter , removing when you're leaving div below.

something following (note javascript bit simple , should improved upon work every story).

css:

.story1.translated {     -webkit-transform:translate(0px,-200px);     -moz-transform:translate(0px,-200px);     -ms-transform:translate(0px,-200px);     -o-transform:translate(0px,-200px);     transform:translate(0px,-200px); } 

js :

var story1 = document.getelementsbyclassname("story1")[0];     var blockquote = document.getelementsbyclassname("quote")[0];     story1.addeventlistener("mouseenter", function () {     story1.classname += " translated"; } blockquote.addeventlistener("mouseleave", function () {     story1.classname = story1.classname.replace(" translated", ""); } 

edit

a pure css solution move :hover part .story , style .story1 accordingly when occurs. follow:

.story:hover .story1{     -webkit-transform:translate(0px,-200px);     -moz-transform:translate(0px,-200px);     -ms-transform:translate(0px,-200px);     -o-transform:translate(0px,-200px);     transform:translate(0px,-200px); } 

this seems work fine when change locally try on site. , same change can applied .float-icon:hover well. changing .story-icon:hover .float-icon works wonders