html5 - Rotating Image in List Format, Caption Needs to be Stationary -

-

got image in list other images. want caption remain fixed image rotates away original position. once it's inside

  • has 'obey' transition rules.

    https://jsfiddle.net/k8k5kkkj/

    the reason why images going in list format because that's way can use pure ccs 'flip' effect. can't images transition way in other formats.

    heres code.

        <!doctype html> <html lang="en"> <head>  <style> ul.images {     width:60%;     /*background:#ccc;*/     list-style:none;     float:left;     /*padding:0 0 2.5% 0;*/     margin-top:5px; }  ul.images li {     width:30%;     float:left;     margin:2.5% 0 0 2.5%;     position:relative; }  ul.images li img {     max-width:100%;     float:left;     border:2px solid #eee;     -webkit-box-sizing:border-box;     -moz-box-sizing:border-box;     box-sizing:border-box; }  .images li {     -moz-transition:all 1s ease;     -webkit-transition:all 1s ease;     -o-transition:all 1s ease;     -ms-transition:all 1s ease;     transition:all 1s ease;     position:relative; }  .images li:hover {opacity:1;}  .images li:target {     -moz-transform:scale(2) rotatey(360deg);     -webkit-transform:scale(2) rotatey(360deg);     -o-transform:scale(2) rotatey(360deg);     -ms-transform:scale(2) rotatey(360deg);     transform:scale(2) rotatey(360deg);     z-index:2;     opacity:1; }  .images li:nth-of-type(even):target {     -moz-transform:scale(2) rotatex(360deg);     -webkit-transform:scale(2) rotatex(360deg);     -o-transform:scale(2) rotatex(360deg);     -ms-transform:scale(2) rotatex(360deg);     transform:scale(2) rotatex(360deg); }  .images li:target img {     -moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);     -webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);     box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3); }  .close {     display:none;     font:0.3em/1em arial, helvetica, sans-serif;     text-transform:uppercase;     letter-spacing:0.3em;     text-decoration:none;     background:#c15252;     padding:2px 2px;     -moz-border-radius:2px;     -webkit-border-radius:2px;     border-radius:2px;     color:#fff;     position:absolute;     top:-3px;     right:0;     -moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);     -webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);     box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2); }  .close:hover {background:#d06464;}  .images li:target .close {display:inline;}  figcaption{font-family:arial;padding-top:3px;font-size:96%;}  #wrapper{width:80%;margin:200px auto 0 auto;}  a:link {text-decoration: none;} a:visited {text-decoration: none;} a:hover {text-decoration: none;} a:active {text-decoration: none;}  </style>  </head> <body> <div id="wrapper">          <ul class="images">             <li id="onea"><a class="close" href="#gal-six">close</a><a href="#onea"><img src="http://d2o0t5hpnwv4c1.cloudfront.net/871_dryee/dry-ee.png" alt="">             <figcaption>caption etc goes here...</figcaption></a>             </li>         </ul>  </div>    </body> </html>


    Comments

    Post a Comment

    Popular posts from this blog

    Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12:test (default-test) on project.Error occurred in starting fork -

    -
    i searched on internet provided answers did not in building project. the error starting fork. tried following methods: mvn clean install -u when searched, people said because of java 7 , should work java 6. using java 6 only. some said set surefire plugin this: <groupid>org.apache.maven.plugins</groupid> <artifactid>maven-surefire-plugin</artifactid> <version>2.5</version> <configuration> <skiptests>false</skiptests> <testfailureignore>true</testfailureignore> <forkmode>once</forkmode> </configuration> the actual error is: [error] failed execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12:test (default-test) on project junitcategorizer.instrument: error occurred in starting fork, check output in log -> [help 1] org.apache.maven.lifecycle.lifecycleexecutionexception: failed execute goal org.apache.maven.plugins:maven-surefire-plugin:2...
    Read more

    windows - Debug iNetMgr.exe unhandle exception System.Management.Automation.CmdletInvocationException -

    -
    i fired windows 7 machine today , attempting start intemgr.exe process terminates immediately. started process under debugger. seems process terminating following exception: system.management.automation.cmdletinvocationexception . dumping exceptions on heap yields following results. heap has few more exception listed below. so based on research exception happens when cmdlet encounters terminating error. method call before processrecord(). provides record-by-record processing functionality cmdlet. windows powershell runtime calls method multiple times each instance of cmdlet in pipeline. how can inspect pipeline debugger? exception object: 0000000002702940 exception type: system.management.automation.itemnotfoundexception message: cannot find path 'c:\windows\system32\windowspowershell\v1.0\modules\applicationserver\applicationserver.dll' because not exist. innerexception: <none> stacktrace (generated): sp ip function 000000001...
    Read more

    configurationsection - activeMq-5.13.3 setup configurations for wildfly 10.0.0 -

    -
    hi new work on activemq, trying access messages send activemq in mdb onmsg() method unable things done here sample standalone-full.xml configuration. <subsystem xmlns="urn:jboss:domain:messaging-activemq:1.0"> <jms-queue name="favouritesqueue" entries="queue/favouritesqueue"/> </server> </subsystem> mdb configuration <mdb> <resource-adapter-ref resource-adapter-name="activemq-ra.rar"/> <bean-instance-pool-ref pool-name="mdb-strict-max-pool"/> </mdb> <subsystem xmlns="urn:jboss:domain:resource-adapters:4.0"> <resource-adapters> <resource-adapter id="activemq-ra.rar"> <archive> activemq-rar-5.13.3.rar </archive> <transaction-support>xatr...
    Read more