How can I add this specific link hover effect to a WP site? [closed]

Question

I’m guessing you weren’t using the compiled version. That’s not normal css in the example you provided, it’s scss. SCSS is a type of file for SASS, a program that assembles CSS. SASS adds lots of additional functionality to CSS ( variables, nesting, ect ) which makes writing CSS faster. If you’re new to all this, you’ll want to learn css basics before diving into something like sass/scss.

However, you can still use it quite easily you just have to compile it (there’s a button in codepen.io that says “view compiled”).

Add the css (I’ve included compiled css below) to the end of your themes style.css file. You’ll be able to find this file by visiting this link (changing example.com to the name of your site):

http://www.example.me/wp-admin/theme-editor.php

If for some reason that file is not being loaded in your theme you can enqueue it the same way you did the font above. There’s a generator you can use to make adding stylesheets, scripts, etc. easier.

Here is the compiled CSS:

a.hovereffect {
    color: #e84b82;
    display: inline-block;
    text-decoration: none;
    overflow: hidden;
    vertical-align: top;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -ms-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    box-shadow: none!important;
}

a.hovereffect:hover span {
    background: #e84b82;
    -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    -moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    -ms-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}

a.hovereffect span {
    display: block;
    position: relative;
    padding: 0 4px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

a.hovereffect span:after {
    content: attr(title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 4px;
    color: #fff;
    background: #e84b82;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
    -moz-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
    -ms-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
    transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
}

One last thing to note, is that it’s possible to add css without enqueueing it by adding it to wp_head. To use this method you would add the following to your functions.php.

function mytheme_load_hover_css_effect() {
    ?>
    <style>
    /* custom css goes here */

    </style>
    <?php
}
add_action('wp_head'. 'mytheme_load_hover_css_effect');

Hope this helps and have fun learning wp!

Update: I was in a good mood and put together a plugin to do this

https://github.com/bryanwillis/hovereffect-shortcode

Just download that and upload it as a plugin.

Useage:

[hovereffect url="http://google.com" text="google"]

You can also just use [hovereffect] by itself which will link to the current page and use the page title.

Update: I was in a good mood and put together a plugin to do this

Related Posts: