html - Sliding up content is not working properly -

-

i newbie in html , css. trying make portion in webpage, want image , text slide side side. used html , css that.

here link code in jsfiddle:

sliding code

    /* chrome, safari, opera */      @-webkit-keyframes mymove {         0% { top: 0%; }         20% { top: -0%; }         25% { top: -20%; }         45% { top: -25%; }         50% { top: -45%; }         70% { top: -50%; }         75% { top: -70%; }         95% { top: -75%; }         100% { top: -100%; }     }      /* standard syntax */     @keyframes mymove {         0% { top: 0%; }         20% { top: -0%; }         25% { top: -20%; }         45% { top: -25%; }         50% { top: -45%; }         70% { top: -50%; }         75% { top: -70%; }         95% { top: -75%; }         100% { top: -100%; }     }

actually sliding images not showing text. need both.

please check updated code. works fine.

#image_slider_right {    background-color: #ccff00;    width: 50%;    float: left;    height: 250px;    margin: 50px 0 0 50px;  }  /* chrome, safari, opera */    @-webkit-keyframes mymove {    0% {      top: 0%;    }    20% {      top: -0%;    }    25% {      top: -20%;    }    45% {      top: -25%;    }    50% {      top: -45%;    }    70% {      top: -50%;    }    75% {      top: -70%;    }    95% {      top: -75%;    }    100% {      top: -100%;    }  }  /* standard syntax */    @keyframes mymove {    0% {      top: 0%;    }    20% {      top: -0%;    }    25% {      top: -20%;    }    45% {      top: -25%;    }    50% {      top: -45%;    }    70% {      top: -50%;    }    75% {      top: -70%;    }    95% {      top: -75%;    }    100% {      top: -100%;    }  }  div#sliderup {    overflow: hidden;    position: relative;    height: 100%;    margin-left: 10px;    width: 98%;  }  div#sliderup figure .img_up {    width: 98%;    height: 100%;    float: left;    margin-bottom: 10px;    position: relative;  }  div#sliderup figure {    position: relative;    width: 98%;    margin: 0;    text-align: left;    animation: 20s mymove infinite;  }  .divimgslideup {    float: left;    width: 50%;  }  .divimgslideup_txt {    float: left;    width: 50%;  }
<div id="image_slider_right">      <div id="sliderup">      <figure>        <div class="img_up">          <div class="divimgslideup">            <img src="http://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" alt="" height="100px" width="100px">          </div>            <div class="divimgslideup_txt">            <strong>make best choice</strong>            <p>with 17 unique 1, 2 & 3 bedroom floor plans available, tap find the</p>          </div>        </div>          <div class="img_up">          <div class="divimgslideup">            <img src="http://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" alt="" height="100px" width="100px">          </div>            <div class="divimgslideup_txt">            <strong>get comfortable</strong>            <p>quality , exceptional value foundations of our philosophy. satisfaction home our</p>          </div>        </div>          <figure>    </div>  </div>    </div>

check working code on jsfiddle


Comments

Post a Comment

Popular posts from this blog

javascript - oscilloscope of speaker input stops rendering after a few seconds -

-
the following script reads audio user's microphone , renders oscilloscope on html canvas. the source taken example of mozilla developer network: visualizations web audio api and here fiddle: http://jsfiddle.net/b7j8pktp/ mozgetusermedia (note: code has no fork mechanism different browsers: works firefox) it works fine few seconds , stops rendering. whereas works totally stable: http://mdn.github.io/voice-change-o-matic/ the problem can reduced following code. microphone activation icon (next the address bar in firefox) disappears after 5 seconds: navigator.mozgetusermedia({audio: true}, function() {}, function() {} ); ( http://jsfiddle.net/b7j8pktp/2/ ) this known bug in firefox. take stream getusermedia call , hook window so: navigator.mozgetusermedia({audio: true}, function(stream) { window.stream = stream; // rest of code }, function err() { // handle error }); hopefully can fixed soon. problem we're f
Read more

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

-
i'm running nodejs 0.12.3 - gulp 3.10.8 , gulp-nodemon 2.0.3. gulpfile.js : gulp.task('serve', ['build'], function() { gulp.start('fb-flo'); nodemon({ script: paths.server, env: { 'node_env': 'development' }, // env: { 'node_env': 'production' }, execmap: { 'js': 'node_modules/babel/bin/babel-node --stage 1' //es7 cote server }, delay: '0ms', watch: ['src/shared/', 'src/server/'], ignore: ['src/shared/components'], tasks: function (changedfiles) { var tasks = []; changedfiles.foreach(function (file) { if (path.extname(file) === '.jsx' && !~tasks.indexof('bundlejs')) tasks.push('bundlejs'); if (path.extname(file) === '.less' && !~tasks.indexof('compileless')) tasks.push('compileless'); }); return tasks; }
Read more

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -

-
i trying make simple python program opening list of webpages user manually download reports site. don't have previous experience preparing exe files.. , i'm in learning process python coding. of done on windows 7 x64 this python code: #!c:/python34/python.exe -u splinter import * import time import os import csv #---------------------------------- raporty = [] open('../raporty.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') raporty.append(r) #--not implemented yet zmienne = [] open('../zmienne.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') zmienne.append(r) print("start") browser = browser(
Read more