html - css pause slideshow on hover -


i'm trying make when hover mouse on slideshow, pause animation.

secondly, i'm trying make pause/resume buttons work have same effect.

i'm struggling on this. appreciated. this have far:

body {    font-family: "helveticaneue-light", "helvetica neue light", "helvetica neue", helvetica, arial, "lucida grande", sans-serif;    font-weight: 300;  }  .css-slideshow {    position: relative;    max-width: 495px;    height: 370px;    margin: 5em auto .5em auto;  }  .css-slideshow figure {    margin: 0;    max-width: 495px;    height: 370px;    background: #000;    position: absolute;  }  .css-slideshow:hover figure {    /*transition: opacity .5s;*/    /*opacity: 1;*/    -webkit-animation-play-state: paused;    -moz-animation-play-state: paused;    -o-animation-play-state: paused;    animation-play-state: paused;  }  .css-slideshow img {    box-shadow: 0 0 2px #666;  }  .css-slideshow figcaption {    position: absolute;    top: 370px;    color: #000;    /*background: rgba(0,0,0, .3);*/    font-size: .8em;    padding: 8px 12px;    opacity: 1;    /*transition: opacity .5s;*/  }  .pauseplay {    position: relative;    margin: 5em auto .5em auto;  }  .css-slideshow:hover figure figcaption {    /*transition: opacity .5s;*/    opacity: 0.5;    -webkit-animation-play-state: paused !important;    -moz-animation-play-state: paused !important;    -o-animation-play-state: paused !important;    animation-play-state: paused !important;  }  .css-slideshow-attr {    max-width: 495px;    text-align: right;    font-size: .7em;    font-style: italic;    margin: 0 auto;  }  .css-slideshow-attr {    color: #666;  }  .css-slideshow figure {    opacity: 0;  }  figure:nth-child(1) {    animation: xfade 48s 42s infinite;  }  figure:nth-child(2) {    animation: xfade 48s 36s infinite;  }  figure:nth-child(3) {    animation: xfade 48s 30s infinite;  }  figure:nth-child(4) {    animation: xfade 48s 24s infinite;  }  figure:nth-child(5) {    animation: xfade 48s 18s infinite;  }  figure:nth-child(6) {    animation: xfade 48s 12s infinite;  }  figure:nth-child(7) {    animation: xfade 48s 6s infinite;  }  figure:nth-child(8) {    animation: xfade 48s 0s infinite;  }  @keyframes xfade {    0% {      opacity: 1;    }    10.5% {      opacity: 1;    }    12.5% {      opacity: 0;    }    98% {      opacity: 0;    }    100% {      opacity: 1;    }  }  .css-slideshow.paused figure {    -webkit-animation-play-state: paused !important;    -moz-animation-play-state: paused !important;    -o-animation-play-state: paused !important;    animation-play-state: paused !important;  }  .css-slideshow.playing figure {    -webkit-animation-play-state: running !important;    -moz-animation-play-state: running !important;    -o-animation-play-state: running !important;    animation-play-state: running !important;  }
<div class="css-slideshow">    <figure>      <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-css3.jpg" alt="class-header-css3" width="495" height="370" class="alignnone size-full wp-image-172" />      <figcaption><strong>css3:</strong> css3 delivers wide range of stylization , effects, enhancing web app without sacrificing semantic structure or performance. additionally web open font format (woff) provides typographic flexibility , control far        beyond web has offered before.</figcaption>    </figure>    <figure>      <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-semantics.jpg" alt="class-header-semantics" width="495" height="370" class="alignnone size-full wp-image-179" />      <figcaption><strong>semantics:</strong> giving meaning structure, semantics front , center html5. richer set of tags, along rdfa, microdata, , microformats, enabling more useful, data driven web both programs , users.</figcaption>    </figure>    <figure>      <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-offline.jpg" alt="class-header-offline" width="495" height="370" class="alignnone size-large wp-image-178" />      <figcaption><strong>offline &amp; storage:</strong> web apps can start faster , work if there no internet connection, html5 app cache, local storage, indexed db, , file api specifications.</figcaption>    </figure>    <figure>      <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-device.jpg" alt="class-header-device" width="495" height="370" class="alignnone size-full wp-image-177" />      <figcaption><strong>device access:</strong> beginning geolocation api, web applications can present rich, device-aware features , experiences. incredible device access innovations being developed , implemented, audio/video input access        microphones , cameras, local data such contacts &amp; events, , tilt orientation.</figcaption>    </figure>    <figure>      <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-connectivity.jpg" alt="class-header-connectivity" width="495" height="370" class="alignnone size-large wp-image-176" />      <figcaption><strong>connectivity:</strong> more efficient connectivity means more real-time chats, faster games, , better communication. web sockets , server-sent events pushing (pun intended) data between client , server more efficiently ever before.</figcaption>    </figure>    <figure>      <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-multimedia.jpg" alt="class-header-multimedia" width="495" height="370" class="alignnone size-large wp-image-175" />      <figcaption><strong>multimedia:</strong> audio , video first class citizens in html5 web, living in harmony apps , sites. lights, camera, action!</figcaption>    </figure>    <figure>      <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-3d.jpg" alt="class-header-3d" width="495" height="370" class="alignnone size-large wp-image-174" />      <figcaption><strong>3d, graphics &amp; effects:</strong> between svg, canvas, webgl, , css3 3d features, you're sure amaze users stunning visuals natively rendered in browser.</figcaption>    </figure>    <figure>      <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-performance.jpg" alt="class-header-performance" width="495" height="370" class="alignnone size-large wp-image-173" />      <figcaption><strong>performance &amp; integration:</strong> make web apps , dynamic web content faster variety of techniques , technologies such web workers , xmlhttprequest 2. no user should ever wait on watch.</figcaption>    </figure>    </div>  <br>  <br>  <br>  <br>  <center>    <div id="css-slideshow">        <button onclick="runslide();">resume</button>      <button onclick="stopslide();">pause</button>      </div>  </center>

for pausing slideshow on hover, have set animation-play-state: pause on figure , not on figurecaption on line 36, so:

.css-slideshow:hover figure{   /*transition: opacity .5s;*/   opacity: 0.5;   -webkit-animation-play-state: paused;    -moz-animation-play-state: paused;    -o-animation-play-state: paused;   animation-play-state: paused; }

(you don't need .figure:hover declarations , not !important)

for buttons work can write javascript add class on click, different animation-play-state value. see you're calling runslide , stopslide functions these not defined anywhere in js. there different ways depending on preferences, etc. simple code achieves want , goes along write this:

var btn = document.getelementbyid('css-slideshow');  function runslide(){   var btnclass = btn.classname;   btn.classname = btnclass.concat(" playing"); }  function stopslide(){   var btnclass = btn.classname;   btn.classname = btnclass.concat(" paused"); }

in case don't forget add id="css-slideshow" div container, extend selector above .css-slideshow.paused figure , create .css-slideshow.playing figure animation-play-state: running


Comments

Post a Comment

Popular posts from this blog

c# - Validate object ID from GET to POST -

i have method allows user access comment have made on site. have post method lets them update comment. my normal solution send entire comment model through, let them update it, update on database when post back. involve sending commentid through in hiddenfor , can manipulated. how can verify commentid sent in get method same i'm getting in post , not able alter comment wish? how can verify commentid sent in method same i'm getting in post? basically have validate following things in post - user logged-in user. authenticated users post comments. commentid in post , should valid commentid , should present in database. userid associated logged-in user should same userid associated comment . comment should contain userid column, can check @ time of update. to make sure update happens comment has been sent in get - hold commentid in session , in post action compare commentid value in session .
Read more

node.js - Custom Model Validator SailsJS -

when using custom model validator checks record within model. return within spread doesn't seem end control flow. //post.js model /** * custom validator **/ types: { isuservalid: function(user_id) { var promise = require('bluebird'); promise.all([ user.findone({id: user_id}) ]) .spread(function(user) { console.log(user); if (user === null || user === undefined) { console.log('failed'); return false; }else{ console.log('passed'); return true; } }); } }, my response standard validation failed response. { "error": "e_validation", "status": 400, "summary": "1 attribute invalid", "model": "post", "invalidattributes": { "owner": [ { "rule": "isuservalid", ...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more