|
|
| Line 1: |
Line 1: |
| − | {{LUBBOCK_TTU}}
| |
| | | | |
| − | <html>
| |
| − | <style>
| |
| − | HTML CSS Result
| |
| − | EDIT ON
| |
| − | h1,
| |
| − | p {
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .outer {
| |
| − | display:block;
| |
| − | width: 200px;
| |
| − | height: 200px;
| |
| − | margin: 20px auto;
| |
| − | border: 1px solid #000;
| |
| − | box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
| |
| − | overflow:hidden;
| |
| − | position:relative;
| |
| − | }
| |
| − |
| |
| − | .inner {
| |
| − | width: 800px;
| |
| − | height: 200px;
| |
| − | cursor:pointer;
| |
| − | display:block;
| |
| − | background: url(https://www.pmob.co.uk/temp/images/zimg1.jpg) 0 0, url(https://www.pmob.co.uk/temp/images/zimg2.jpg) 200px 0, url(https://www.pmob.co.uk/temp/images/zimg3.jpg) 400px 0, url(https://www.pmob.co.uk/temp/images/zimg4.jpg) 600px 0;
| |
| − | background-repeat: no-repeat;
| |
| − | background-size: 200px 200px;
| |
| − | }
| |
| − | .outer:hover .inner,.outer:focus .inner{
| |
| − | animation:swap 8s linear infinite;
| |
| − | }
| |
| − | .outer:focus{
| |
| − | border:2px solid red;
| |
| − | }
| |
| − | @keyframes swap{
| |
| − | 0%{transform:translateX(-200px)}
| |
| − | 24.999%{transform:translateX(-200px)}
| |
| − | 25%{transform:translateX(-400px)}
| |
| − | 49.999%{transform:translateX(-400px)}
| |
| − | 50%{transform:translateX(-600px)}
| |
| − | 74.999%{transform:translateX(-600px)}
| |
| − | 75%{transform:translateX(0)}
| |
| − | 99.999%{transform:translateX(0)}
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | <h1>Image swap</h1>
| |
| − | <p>Hover over the image to show various images</p>
| |
| − | <a href="#" class="outer">
| |
| − | <span class="inner">
| |
| − | </span>
| |
| − | </a>
| |
| − | </html>
| |
