javascript - element css animation - one element push other element higher -


i want make animation this: when hover on div contains image , text visible beginning, other div below text , image "fadeinup", (this animation taken animate.css https://daneden.github.io/animate.css/). when animate div fadeinup, text , image above jump up. want make text , image move smoothly div fadeinup. here code, hope more understandable:

    <div class="service_box_first" onmouseover="service();" onmouseleave="serviceout();">          <div class="text-vcenter">               <div class="index_service_heading" id="naslov">                    <img src="images/brandingikona.png"/>                     <div>branding</div>               </div>               <div class="index_service_description animated" id="text">                    text               </div>          </div>     </div>  .service_box_first {         display: table;         position: relative;     }  .text-vcenter {     display: table-cell;     text-align: center;     vertical-align: middle; }  .index_service_description {     line-height: 18px;     text-align: justify;     overflow: hidden;     padding: 20px;     font-size: 16px;     width: 80%;     max-width: 300px;      margin-left: auto;     margin-right: auto; }

classes .service_box_first , .text-vcenter used vertically center content inside div .text-vcenter class. functions service() , serviceout() used animate div text. animation here: 

    @-webkit-keyframes fadeinup {           0% {             opacity: 0;             -webkit-transform: translate3d(0, 100%, 0);             transform: translate3d(0, 100%, 0);             height: 0px;           }            100% {             opacity: 1;             -webkit-transform: none;             transform: none;               height: 150px;           }         }          @keyframes fadeinup {      0% {         opacity: 0;         -webkit-transform: translate3d(0, 100%, 0);         transform: translate3d(0, 100%, 0);       }        100% {         opacity: 1;         -webkit-transform: none;         transform: none;       }     }      .fadeinup {       -webkit-animation-name: fadeinup;       animation-name: fadeinup;     }


Comments

Post a Comment

Popular posts from this blog

node.js - Using Node without global install -

i'm working on few node & electron (atom shell) projects , i'm curious how them work without user having install node globally. i've seen few applications including node directory in project contains node.exe binary. how go setting node project use binary? edit: thought should add, i've searched everywhere answer this, unrelated results.
Read more

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

i've website developed using phpfox v3.0.7 . now i'm trying implement 'sse(server sent events)' 1 of php files. reference i'm giving below necessary code part of file. file titled process.class.php , present @ location /var/www/module/notification/include/service/process.class.php present on server having ip http://34.124.40.142/ . <?php /** * [phpfox_header] */ header('content-type: text/event-stream'); header('cache-control: no-cache'); defined('phpfox') or exit('no dice!'); /** * * * @copyright [phpfox_copyright] * @author raymond benc * @package phpfox_service * @version $id: service.class.php 67 2009-01-20 11:32:45z raymond_benc $ */ class notification_service_process extends phpfox_service { /** * class constructor */ public function __construct() { $this->_stable = phpfox::gett('notification'); } public function add($...
Read more

java - Null response to php query in android, even though php works properly -

Image
table i'm trying retrieve above data using 2 php files below. want pass email parameter , return bets user = email. work fine when tested advanced rest client, problem not php. however, when try through android 2 java classes below, null pointer exception (logcat below) , json object returned null. i'm not sure error is, think i'm not passing parameter php , that's why it's producing null response. logcat 05-31 15:10:50.227 26074-26074/com.example.albert.betterapp e/androidruntime﹕ fatal exception: main process: com.example.albert.betterapp, pid: 26074 java.lang.runtimeexception: unable start activity componentinfo{com.example.albert.betterapp/com.example.albert.betterapp.displayallbets}: java.lang.nullpointerexception @ android.app.activitythread.performlaunchactivity(activitythread.java:2292) @ android.app.activitythread.handlelaunchactivity(activitythread.java:2350) @ android.app.activitythread.acce...
Read more