Created
November 12, 2012 18:08
-
-
Save jasondavis/4060899 to your computer and use it in GitHub Desktop.
3d hover boxes
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
| /* 3d hover boxes */ | |
| .ch-grid { | |
| /*margin: 20px 0 0 0;*/ | |
| padding: 0; | |
| list-style: none; | |
| display: block; | |
| width: 100%; | |
| margin-bottom: 30px; | |
| } | |
| .ch-grid:after, | |
| .ch-item:before { | |
| content: ''; | |
| display: table; | |
| } | |
| .ch-grid:after { | |
| clear: both; | |
| } | |
| .ch-grid li { | |
| width: 205px; | |
| height: 209px; | |
| display: inline-block; | |
| margin: 0 17px 20px 0; | |
| } | |
| .ch-grid li:nth-child(4n+4) { | |
| margin-right: 0px; | |
| } | |
| /* end common.css */ | |
| .ch-item { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 0; | |
| position: relative; | |
| cursor: pointer; | |
| -webkit-perspective: 1000px; | |
| -moz-perspective: 900px; | |
| -o-perspective: 900px; | |
| -ms-perspective: 900px; | |
| perspective: 1000px; | |
| } | |
| .ch-info{ | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| -webkit-transform-style: preserve-3d; | |
| -moz-transform-style: preserve-3d; | |
| -o-transform-style: preserve-3d; | |
| -ms-transform-style: preserve-3d; | |
| transform-style: preserve-3d; | |
| } | |
| .ch-info > div { | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-position: center center; | |
| -webkit-transition: all 0.4s linear; | |
| -moz-transition: all 0.4s linear; | |
| -o-transition: all 0.4s linear; | |
| -ms-transition: all 0.4s linear; | |
| transition: all 0.4s linear; | |
| -webkit-transform-origin: 50% 0%; | |
| -moz-transform-origin: 50% 0%; | |
| -o-transform-origin: 50% 0%; | |
| -ms-transform-origin: 50% 0%; | |
| transform-origin: 50% 0%; | |
| } | |
| .ch-info .ch-info-front { | |
| text-align: center; | |
| box-shadow: 0 0 3px rgba(0,0,0,0.2); | |
| } | |
| .ch-info .ch-info-back { | |
| -webkit-transform: translate3d(0,0,-350px) rotate3d(1,0,0,90deg); | |
| -moz-transform: translate3d(0,0,-350px) rotate3d(1,0,0,90deg); | |
| -o-transform: translate3d(0,0,-350px) rotate3d(1,0,0,90deg); | |
| -ms-transform: translate3d(0,0,-350px) rotate3d(1,0,0,90deg); | |
| transform: translate3d(0,0,-350px) rotate3d(1,0,0,90deg); | |
| opacity: 0; | |
| } | |
| .ch-img-1 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_seomgmt_over.png); | |
| } | |
| .ch-seo-manage { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_seomgmt.png); | |
| } | |
| .ch-img-2 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_smmgmt_over.png); | |
| } | |
| .ch-smmgmt { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_smmgmt.png); | |
| } | |
| .ch-img-3 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_ppcmgmt_over.png); | |
| } | |
| .ch-ppcmgmt { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_ppcmgmt.png); | |
| } | |
| .ch-img-4 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_metrics_over.png); | |
| } | |
| .ch-metrics { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_metrics.png); | |
| } | |
| .ch-img-5 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_seolinkbuilding_over.png); | |
| } | |
| .ch-seolink { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_seolinkbuilding.png); | |
| } | |
| .ch-img-6 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_smmon_over.png); | |
| } | |
| .ch-smmon { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_smmon.png); | |
| } | |
| .ch-img-7 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_ppcresearch_over.png); | |
| } | |
| .ch-ppcresearch { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_ppcresearch.png); | |
| } | |
| .ch-img-8 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_reporting_over.png); | |
| } | |
| .ch-reporting { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_reporting.png); | |
| } | |
| .ch-img-9 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_seorank_over.png); | |
| } | |
| .ch-seorank { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_seorank.png); | |
| } | |
| .ch-img-10 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_seoresearch_over.png); | |
| } | |
| .ch-seoresearch { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_seoresearch.png); | |
| } | |
| .ch-img-11 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_seocompanalysis_over.png); | |
| } | |
| .ch-seocompanalysis { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_seocompanalysis.png); | |
| } | |
| .ch-img-12 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_content_over.png); | |
| } | |
| .ch-content { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_content.png); | |
| } | |
| .ch-img-13 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_adminmeasure_over.png); | |
| } | |
| .ch-adminmeasure { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_adminmeasure.png); | |
| } | |
| .ch-img-14 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_adminreporting_over.png); | |
| } | |
| .ch-adminreporting { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_adminreporting.png); | |
| } | |
| .ch-img-15 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_adminmgmt_over.png); | |
| } | |
| .ch-adminmgmt { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_adminmgmt.png); | |
| } | |
| .ch-img-16 { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_admintasks_over.png); | |
| } | |
| .ch-admintasks { | |
| background-image: url(http://raventools.com/wp-content/themes/raven2/images/home_admintasks.png); | |
| } | |
| .ch-info h3 { | |
| color: #2c3439; | |
| font-size: 21px; | |
| margin: 0 15px; | |
| padding: 120px 0 0 0; | |
| font-family: 'Lato', Arial, sans-serif; | |
| font-weight: 300; | |
| } | |
| .ch-info p { | |
| color: #fff; | |
| padding: 30px 0; | |
| font-style: italic; | |
| margin: 0 30px; | |
| font-size: 18px; | |
| } | |
| .ch-info p a { | |
| display: block; | |
| color: #fff; | |
| color: rgba(255,255,255,0.7); | |
| font-style: normal; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| font-size: 9px; | |
| letter-spacing: 1px; | |
| padding-top: 4px; | |
| } | |
| .ch-info p a:hover { | |
| color: #fff222; | |
| color: rgba(255,242,34, 0.8); | |
| } | |
| .ch-item:hover .ch-info-front { | |
| -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); | |
| -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); | |
| -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); | |
| -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); | |
| transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); | |
| opacity: 0; | |
| } | |
| .ch-item:hover .ch-info-back { | |
| -webkit-transform: rotate3d(1,0,0,0deg); | |
| -moz-transform: rotate3d(1,0,0,0deg); | |
| -o-transform: rotate3d(1,0,0,0deg); | |
| -ms-transform: rotate3d(1,0,0,0deg); | |
| transform: rotate3d(1,0,0,0deg); | |
| opacity: 1; | |
| } | |
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
| <ul class="ch-grid"> | |
| <li> | |
| <a class="ch-item" href="http://raventools.com/tasks/seo-campaign-management/"> | |
| <div class="ch-info"> | |
| <div class="ch-info-front ch-seo-manage"> | |
| <h3>SEO <br>Management</h3> | |
| </div> | |
| <div class="ch-info-back ch-img-1"> | |
| <p>Command your SEO campaigns with authority</p> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="ch-item" href="http://raventools.com/tasks/social-campaign/"> | |
| <div class="ch-info"> | |
| <div class="ch-info-front ch-smmgmt"> | |
| <h3>Social Media <br>Management</h3> | |
| </div> | |
| <div class="ch-info-back ch-img-2"> | |
| <p>Maximize success from a single social media inbox</p> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="ch-item" href="http://raventools.com/tasks/ppc-management/"> | |
| <div class="ch-info"> | |
| <div class="ch-info-front ch-ppcmgmt"> | |
| <h3>PPC <br>Management</h3> | |
| </div> | |
| <div class="ch-info-back ch-img-3"> | |
| <p>Navigate your PPC campaigns to profitability</p> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="ch-item" href="http://raventools.com/tasks/metrics/"> | |
| <div class="ch-info"> | |
| <div class="ch-info-front ch-metrics"> | |
| <h3>Metrics</h3> | |
| </div> | |
| <div class="ch-info-back ch-img-4"> | |
| <p>Measure the progress and success of your campaigns</p> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="ch-item" href="http://raventools.com/tasks/link-building/"> | |
| <div class="ch-info"> | |
| <div class="ch-info-front ch-seolink"> | |
| <h3>SEO <br>Link Building</h3> | |
| </div> | |
| <div class="ch-info-back ch-img-5"> | |
| <p>Research, organize and monitor with ease</p> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="ch-item" href="http://raventools.com/tasks/social-media-monitoring/"> | |
| <div class="ch-info"> | |
| <div class="ch-info-front ch-smmon"> | |
| <h3>Social Media <br>Monitoring</h3> | |
| </div> | |
| <div class="ch-info-back ch-img-6"> | |
| <p>Track conversations and mentions on dozens of social networks</p> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="ch-item" href="http://raventools.com/tasks/ppc-research/"> | |
| <div class="ch-info"> | |
| <div class="ch-info-front ch-ppcresearch"> | |
| <h3>PPC <br>Research</h3> | |
| </div> | |
| <div class="ch-info-back ch-img-7"> | |
| <p>Discover your keyword pot of gold</p> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="ch-item" href="http://raventools.com/tasks/reporting/"> | |
| <div class="ch-info"> | |
| <div class="ch-info-front ch-reporting"> | |
| <h3>Reporting</h3> | |
| </div> | |
| <div class="ch-info-back ch-img-8"> | |
| <p>Impress your clients with comprehensive campaign reports</p> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="ch-item" href="http://raventools.com/tasks/rank-checking/"> | |
| <div class="ch-info"> | |
| <div class="ch-info-front ch-seorank"> | |
| <h3>SEO <br>Rank Checking</h3> | |
| </div> | |
| <div class="ch-info-back ch-img-9"> | |
| <p>Go beyond rankings</p> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="ch-item" href="http://raventools.com/tasks/seo-research/"> | |
| <div class="ch-info"> | |
| <div class="ch-info-front ch-seoresearch"> | |
| <h3>SEO <br>Research</h3> | |
| </div> | |
| <div class="ch-info-back ch-img-10"> | |
| <p>Target keywords and links with precision</p> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="ch-item" href="http://raventools.com/tasks/competitor-analysis/"> | |
| <div class="ch-info"> | |
| <div class="ch-info-front ch-seocompanalysis"> | |
| <h3>SEO Competitor<br>Analysis</h3> | |
| </div> | |
| <div class="ch-info-back ch-img-11"> | |
| <p>Analyze – and beat – your competition</p> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="ch-item" href="http://raventools.com/tasks/content/"> | |
| <div class="ch-info"> | |
| <div class="ch-info-front ch-content"> | |
| <h3>Content</h3> | |
| </div> | |
| <div class="ch-info-back ch-img-12"> | |
| <p>Fuel your SEO and social media campaigns with content</p> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| </ul> |
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
| {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment