✨ Paste and use mouse through image effect ✨

Time:2021-1-26

Image Hover Effects 🐶

No JavaScript, pureCSSA set you’ve been looking forPaste and useMouse over image effect.Fast experience →

✨ Paste and use mouse through image effect ✨

1. Birth background

When writing a page, especially the marketing page, official website, blog home page, we usually need the above effect.

according toMDNHtm5 semantic specification in,<figure>As a web page illustration,<figcaption>Use the text in the web page illustration to describe:

<figure>
  <img />
  <figcaption>
    Hello World ! 🐶
  </figcaption>
</figure>

Using thetransformDeformation properties andtransitionTransition properties can be easily implemented

figure {
  position: relative;
  display: inline-block;
  margin: 0;
  max-width: 100%;
  background-color: #2266a5;
  color: #fff;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

figure > img {
  vertical-align: top;
  max-width: 100%;
}

figure figcaption {
  background-color: #135796;
  padding: 30px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

figure,
figure:before,
figure:after,
figure *,
figure *:before,
figure *:after {
  box-sizing: border-box;
  transition: all 0.35s ease;
}

/** fade **/
figure figcaption {
  opacity: 0;
}

figure:hover figcaption {
  opacity: 1;
}

figure:hover > img, figure:hover figcaption{
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

Why don’t you package it like thisxx.min.cssLibrary?

In most application scenarios, we only need one or two effects. There is no need to introduce an entire CSS library. The original purpose of this project is to provide you with aPaste and use, go after use, highly customized“CSS effect fragment.

If you need to introduce a CSS library into your project, useimagehover.ioperhapsIzmirLibrary.

2. Dynamic effect of classified transition combination

Some friends may be curious about how to achieve the cool classification switching effect?

Vue official website, entry / Exit & list transition section,Please refer to flip interleaving effect →

<transition-group name="cell">
  // your block ...
</transition-group>

uselodashIn the library_.shuffleArrange in disorder:

_.shuffle(effects)

Using theArray.prototype.sort()Sort: when switching classification, bubble the effect with the same prefix to the front row

.sort((a, b) => b.name.includes(id) ? 1 : -1)

4. Day / night theme

Darkmode is a popular design element at present. The web page supports switching between daytime and nighttime themes, because I prefer to use itTailwindCSSThis framework, so the ecological plug-in is directly used in the projecttailwindcss-themingTo achieve this function.

People who are interested in darkmode can watch thisCodepen example, using CSS by yourself:root { --dark: #111111; }Variable to implement a.

Another more innovative solution isDarkmode.js, which is done by setting up the pageMixed color valueImplementation, but the complex page effect is not very ideal.

5. Github Page

As we all know, the front-end students can deploy a work to GitHub page for free for preview. But the problem is that domestic visits to GitHub pages are very slow. Are we going to buy servers for these HTML, CSS, JS, IMG static resources?

Here is a better way to modifyvue.config.jsSet the static resources on the production environment to CDN:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
  ? 'https://cdn.jsdelivr.net/gh/turkyden/[email protected]/'
  : '/'
}

When you run the Vue cli commandyarn buildYou can pack it upbuild/index.htmlAs follows:

<body>
  <div id=app></div>
  <script src=https://cdn.jsdelivr.net/gh/turkyden/[email protected]/js/chunk-vendors.ebbcc743.js></script>
  <script src=https://cdn.jsdelivr.net/gh/turkyden/[email protected]/js/app.5ecdb9ff.js></script>
</body>

[jsdelivr] () is a record holder in Chinese mainland, so we do not have to worry about the wall problem, and there are still many nodes in our country, which are very fast.

6. CI / CD automation

The code of development environment and production environment should not be stored together

  • Main branch of Master: store source code, resource file containing all source code;
  • GH pages branch: stores the compiled code, that is, the code in the master branch/buildAll resources in the folder;

So how to automate this process? GitHub action provides a complete set of solutions, which are as follows:

Take a look at the.github/workflows/ci.yml

name: build-and-deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/[email protected]

    - name: Build and Deploy
      uses: JamesIves/[email protected]
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: build
        BUILD_SCRIPT: npm install && npm run build

7. Summary

I hope you can combine your daily work, remember not to repeat the wheel, give play to your imagination and produce works. If you think about it carefully, there are so many things you can play in a project, even if it is a pure front-end project. If a tool helps others, it is valuable. Come on, bring different colors to the world!

Finally, thank youimagehover.ioThe original author and the entire open source community. welcomeGithub Star✨ Collect!

8. References

Pure CSS Image Hover Effect Library

Izmir – An image hover mini CSS library

Recommended Today

Don’t be a tool man. Touching hands teaches you Jenkins!

Hello everyone, I’m a piece of cake, a piece of cake eager to be Cai Bucai in the Internet industry. Soft or hard, praise is soft, white whoring is just!Ghost ~ remember to give me a third company after watching it! This article mainly introducesJenkins If necessary, please refer to If it helps, don’t forgetgive […]