Skip to content
Overlaying images with CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
less
sass
.editorconfig
.gitignore
README.md
bower.json
gulpfile.js
package.json

README.md

{ ovrly }

Overlaying images with CSS

Usage

LESS

.target-a{
    .ovrly('pixel'); // Default color #333
}

.target-b{
    .ovrly('batik', red);
}

.target-c{
    .ovrly('galaxy', #333);
}

SASS

.target-a{
    @include ovrly('pixel'); // Default color #333
}

.target-b{
    @include ovrly('batik', red);
}

.target-c{
    @include ovrly('galaxy', #333);
}

CSS

<div class="ovrly-pixel"></div>

Default background-color is #333. You can change background-color with this method :

/* Default color #333 */
.ovrly-pixel:after{
    background-color: rgba(255, 255, 255, .6); /* Change color */
}

Pattern type

  • ovrly-pixel
  • ovrly-horizontal
  • ovrly-vertical
  • ovrly-diagonal-left
  • ovrly-diagonal-righ
  • ovrly-zigzag-horizontal
  • ovrly-zigzag-vertical
  • ovrly-snake
  • ovrly-batik
  • ovrly-galaxy
  • ovrly-apolo
  • ovrly-skull

License

MIT

You can’t perform that action at this time.