Declassified Hover Effect

First kind of declassification effect

Click on the text below to declassify it.

Surprise! I'm declassified now!

Now to test it on a div with multiple lines and see what it looks like.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Cursus vitae congue mauris rhoncus. Semper auctor neque vitae tempus. Nulla facilisi morbi tempus iaculis. Porta lorem mollis aliquam ut. Quis imperdiet massa tincidunt nunc pulvinar sapien. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Tincidunt nunc pulvinar sapien et ligula. Vitae turpis massa sed elementum. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero.

Downside to this method is that previous text will be re-declassified when selecting another group of text or clicking anywhere else on the page.

Amet mauris commodo quis imperdiet. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Senectus et netus et malesuada fames ac turpis egestas. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Gravida rutrum quisque non tellus orci ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ornare arcu odio ut sem. Luctus accumsan tortor posuere ac ut consequat semper viverra. Id volutpat lacus laoreet non curabitur gravida arcu ac. Ipsum dolor sit amet consectetur adipiscing elit ut.

Sample Wikidot Code

[[span class="declassification"]][# Surprise! I'm declassified now!][[/span]]

OR

[[div_ class="declassification"]]
[# Surprise! I'm declassified now!]
[[/div]]

Sample CSS Code

+ Show sample CSS

.declassification :-webkit-any-link {
    color: var(--class-color);
    text-decoration: none;
}
 
.declassification :-moz-any-link {
    color: var(--class-color);
    text-decoration: none;
}
 
.declassification :any-link {
    color: var(--class-color);
    text-decoration: none;
}
 
.declassification a {
    --class-color: rgb(var(--swatch-text-general));
    background: -webkit-gradient(linear, left top, left bottom, from(var(--class-color, currentcolor)), to(var(--class-color, currentcolor))) no-repeat 0% 50%;
    background: linear-gradient(var(--class-color, currentcolor), var(--class-color, currentcolor)) no-repeat 0% 50%;
    -webkit-animation: reverse-transition 1500ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
                    animation: reverse-transition 1500ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    background-size: 100% 100%;
    -webkit-transition: background-image 500ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: background-image 500ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
 
.declassification:focus-within :any-link,
.declassification :any-link:focus,
.declassification :any-link:active {
  -webkit-animation: forwards-transition 500ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  animation: forwards-transition 500ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}
 
@media (pointer: coarse) {
  .declassification :any-link:hover {
    -webkit-animation: forwards-transition 500ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    animation: forwards-transition 500ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
}
 
@-webkit-keyframes reverse-transition {
    from {
            background-size: 0% 100%;
    }
    to {
            background-size: 100% 100%;
    }
}
 
@keyframes reverse-transition {
    from {
            background-size: 0% 100%;
    }
    to {
            background-size: 100% 100%;
    }
}
 
@-webkit-keyframes forwards-transition {
    from {
            background-size: 100% 100%;
    }
    to {
            background-size: 0% 100%;
    }
}
 
@keyframes forwards-transition {
    from {
            background-size: 100% 100%;
    }
    to {
            background-size: 0% 100%;
    }
}

---

Second kind of declassification effect

Hover over the text below to declassify it.

Surprise! I'm declassified now!

Now to test it on multiple lines and see what it looks like.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Cursus vitae congue mauris rhoncus. Semper auctor neque vitae tempus. Nulla facilisi morbi tempus iaculis. Porta lorem mollis aliquam ut. Quis imperdiet massa tincidunt nunc pulvinar sapien. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Tincidunt nunc pulvinar sapien et ligula. Vitae turpis massa sed elementum. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero.

Sample Wikidot Code

[[span class="declassification-2"]][# Surprise! I'm declassified now!][[/span]]

OR

[[div class="declassification-2"]]
Surprise! I'm declassified now!
[[/div]]

Sample CSS Code

+ Show sample CSS

.declassification-2 p {
        --hover-color: rgb(var(--swatch-text-general));
        display: inline;
        -webkit-transition: -webkit-box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: -webkit-box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -webkit-box-shadow: inset 100vw 0 0 0 var(--hover-color, currentcolor);
                box-shadow: inset 100vw 0 0 0 var(--hover-color, currentcolor);
        -webkit-box-decoration-break: clone;
                box-decoration-break: clone;
}
 
.declassification-2 p:hover {
        -webkit-transition: -webkit-box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: -webkit-box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -webkit-box-shadow: inset 0 0 0 0.01px var(--hover-color, currentcolor);
                box-shadow: inset 0 0 0 0.01px var(--hover-color, currentcolor);
        text-decoration: none;
}

---

Third kind of declassification effect

Hover over the text below to declassify it.

Surprise! I'm declassified now!

Now to test it on multiple lines and see what it looks like.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Cursus vitae congue mauris rhoncus. Semper auctor neque vitae tempus. Nulla facilisi morbi tempus iaculis. Porta lorem mollis aliquam ut. Quis imperdiet massa tincidunt nunc pulvinar sapien. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Tincidunt nunc pulvinar sapien et ligula. Vitae turpis massa sed elementum. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero.

Sample Wikidot Code

[[span class="declassification-3"]][# Surprise! I'm declassified now!][[/span]]

OR

[[div class="declassification"]]
Surprise! I'm declassified now!
[[/div]]

Sample CSS Code

+ Show sample CSS

.declassification-3 p {
        --hover-color: rgb(var(--swatch-text-general));
        display: inline;
        background: -webkit-gradient(linear, left top, left bottom, from(var(--hover-color, currentcolor)), to(var(--hover-color, currentcolor))) no-repeat 0% 50%;
        background: linear-gradient(var(--hover-color, currentcolor), var(--hover-color, currentcolor)) no-repeat 0% 50%;
        background-size: 100% 100%;
        -webkit-transition: background-size 500ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: background-size 500ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
 
.declassification-3:hover p {
        background-size: 0% 100%;
        text-decoration: none;
}