A better approach to certain kinds of iris wipe effect, previously created in another pen. Creates "in-to-out" iris wipes, discussed in detail on my blog.
Forked from Dudley Storey's Pen Super-Easy Iris Wipe in CSS3.
Created
June 18, 2015 08:06
-
-
Save IgnetStudio/93e73239b9d440bbdda7 to your computer and use it in GitHub Desktop.
Super-Easy Iris Wipe in CSS3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a href=# id=alicia title="Contact Us"></a> | |
| <span id=contact>Contact Us</span> | |
| <a href=# id=ash></a> | |
| <a href=# id=vamp><span>⤴</span></a> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| a { | |
| width: 150px; height: 150px; | |
| margin-right: 120px; display: block; | |
| border-radius: 50%; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -moz-transition: .3s all ease-in; | |
| -webkit-transition: .3s all ease-in; | |
| -o-transition: .3s all ease-in; | |
| transition: .3s all ease-in; | |
| float: left; text-decoration: none; | |
| border: 75px solid rgba(0,0,0,1); | |
| font-family: "Bauhaus 93", fantasy; | |
| margin-top: 30px; | |
| } | |
| a:hover { border: 0px solid rgba(0,0,0,1); } | |
| a#alicia { | |
| background: url(http://demosthenes.info/assets/images/alicia-demerson.jpg); | |
| background-position: center; | |
| background-size: 150px 150px; | |
| margin-left: 30px; | |
| } | |
| a#alicia + span { | |
| opacity: 1; | |
| -moz-transition: .3s color linear; | |
| -webkit-transition: .3s color linear; | |
| -o-transition: .3s color linear; | |
| transition: .3s color linear; | |
| margin-left: 30px; margin-top: 20px; | |
| } | |
| a#alicia:hover + span { opacity: 0; } | |
| a#ash { | |
| background-image: url(http://demosthenes.info/assets/images/ash-s.jpg); | |
| background-size: contain; | |
| } | |
| a#vamp { | |
| background: url(http://demosthenes.info/assets/images/vamp.jpg); background-position: center; | |
| background-size: 150px 150px; | |
| font-size: 60px; position: relative; | |
| margin-right: 0; | |
| } | |
| a#vamp span { | |
| position: absolute; | |
| top: -12px; left: 0px; font-size: 70px; | |
| -webkit-transform-origin: 5px 10px; | |
| -moz-transform-origin: 5px 10px; | |
| -ms-transform-origin: 5px 10px; | |
| transform-origin: 5px 10px; | |
| line-height: 70px; | |
| -webkit-transition: 1s all; | |
| -moz-transition: 1s all; | |
| transition: 1s all; | |
| color: rgba(255,255,255,0.5); | |
| } | |
| a#vamp:hover span { | |
| -webkit-transform: rotate(-360deg); | |
| -moz-transform: rotate(-360deg); | |
| -o-transform: rotate(-360deg); | |
| transform: rotate(-360deg); | |
| } | |
| span#contact { | |
| position: absolute; | |
| font-family: "Bauhaus 93", fantasy; | |
| color: #fff; left: 28px; top: 73px; | |
| font-size: 22px; pointer-events: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment