JavaScript | When Life Gives You Lemons (Pug, Stylus) ...

USER LOGIN:

VIDEOS

How to Enable Secure Boot

How to Skip 'Let's

Make Windows 11 LIGHTNING FAS

How to Add the Quick Launch T

Make Windows 11 Look Better

YES! You can keep Windows 10

Popular:

TOP

POPULAR

VIDEO

NEWS

LINKS

IMAGES

RADIO

Guest | Registration

SCRIPTS

PHP

TIPS

ICONS

MUSIC

TRAINERS

TORRENTS

FREEWARE

UPDATES

JAVA SCRIPTS: 55 scripts / 1 comments ...

A-Z | # A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

When Life Gives You Lemons (Pug, Stylus)

CSS Image Effects

August 15, 2024

560 views,

0

JavaScript | When Life Gives You Lemons (Pug, Stylus) ...

Author: Collin Smith

Publiser Software Listings

License: Freeware

Compatibility: Chrome IE

Language: English

DEMO

Similar versions: (38)

Views:

FastStone Image Viewer 8.3 Portable

567

FastStone Image Viewer 8.2 Portable

139

Image Hover Effect - 4 (Pug, SCSS, JS)

653

THREE Image Transition (HTML, CSS, JS)

404

Animated CSS Image (Slim, SCSS)

682

Colorful shadows (HTML, CSS, JS)

662

show 38 similar results

Hover animation could be used for links to categories or post types. Also deals with skewing container while keeping background image straight. Take a look!

Author: Collin Smith (collinscode)

Created on: April 12, 2018

Made with: Pug, Stylus

CSS Pre-processor: Stylus

JS Pre-processor: None

HTML Pre-processor: Pug

Tags: hover, animation, ui, links, transform

ENTIRE CODE

<style>
* {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
html {
  background: #ece9e6;
  background: linear-gradient(to top, #ece9e6, #fff);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
html body {
  margin: 0;
  height: 100%;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}
html body h1 {
  text-align: center;
  padding: 2rem 0 1rem;
  margin: 0;
  color: #373f51;
}
html body h6 {
  font-size: 1.2rem;
  margin: 0;
  font-weight: 300;
}
html body p {
  margin-bottom: 2rem;
}
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 3rem;
  padding: 2rem 4rem 4rem;
}
.container .wrapper {
  transform: skew(-10deg);
  transition: 0.25s;
}
.container .wrapper:before {
  content: '';
  left: 0;
  top: 0;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  border-radius: 40px;
  opacity: 0;
  border: 2px solid #ece9e6;
  position: absolute;
  z-index: -1;
  transition: 0.5s 0.05s;
}
.container .wrapper:hover:before {
  opacity: 1;
  transform: translateY(1.5rem) translateX(1.5rem);
}
.container .wrapper:nth-child(1) .card:after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("https://images.pexels.com/photos/953219/pexels-photo-953219.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: cover;
  background-color: #373f51;
  background-blend-mode: screen;
  transform: skew(10deg) scale(1.2);
  transition: 0.25s;
}
.container .wrapper:nth-child(2) .card:after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("https://images.pexels.com/photos/316891/pexels-photo-316891.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: cover;
  background-color: #373f51;
  background-blend-mode: screen;
  transform: skew(10deg) scale(1.2);
  transition: 0.25s;
}
.container .wrapper:nth-child(3) .card:after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("https://images.pexels.com/photos/3303/water-drink-fresh-lemons.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: cover;
  background-color: #373f51;
  background-blend-mode: screen;
  transform: skew(10deg) scale(1.2);
  transition: 0.25s;
}
.container .wrapper:nth-child(4) .card:after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("https://images.pexels.com/photos/635537/pexels-photo-635537.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: cover;
  background-color: #373f51;
  background-blend-mode: screen;
  transform: skew(10deg) scale(1.2);
  transition: 0.25s;
}
.container .wrapper:nth-child(5) .card:after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("https://images.pexels.com/photos/6478/tree-lemon-fruit.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: cover;
  background-color: #373f51;
  background-blend-mode: screen;
  transform: skew(10deg) scale(1.2);
  transition: 0.25s;
}
.container .wrapper:nth-child(6) .card:after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("https://images.pexels.com/photos/709816/pexels-photo-709816.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: cover;
  background-color: #373f51;
  background-blend-mode: screen;
  transform: skew(10deg) scale(1.2);
  transition: 0.25s;
}
.container .wrapper:hover {
  transform: translateX(-1rem) translateY(-1rem) skew(-10deg);
}
.container .wrapper:hover .card {
  box-shadow: 0.5rem 0.5rem 1rem rgba(0,0,0,0.1);
}
.container .wrapper:hover .card:after {
  background-blend-mode: normal;
}
.container .wrapper:hover .card .fal {
  bottom: 4rem;
  background-color: rgba(255,255,255,0.8);
}
.container .card {
  background-color: #fff;
  border-radius: 40px;
  height: 15rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.container .card:after {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.container .card .fal {
  position: absolute;
  bottom: -1rem;
  right: 3rem;
  border-radius: 100%;
  padding: 1rem;
  font-size: 1.5rem;
  color: #373f51;
  z-index: 1;
  transform: skew(10deg) translateY(50%);
  text-align: center;
  transition: 0.25s;
}
</style>

<script>
  window.console = window.console || function(t) {};
</script>

</head>

<body translate="no">
  <div class="container">
  <div class="wrapper">
    <div class="card"><i class="fal fa-arrow-right"></i></div>
  </div>
  <div class="wrapper">
    <div class="card"><i class="fal fa-arrow-right"></i></div>
  </div>
  <div class="wrapper">
    <div class="card"><i class="fal fa-arrow-right"></i></div>
  </div>
  <div class="wrapper">
    <div class="card"><i class="fal fa-arrow-right"></i></div>
  </div>
  <div class="wrapper">
    <div class="card"><i class="fal fa-arrow-right"></i></div>
  </div>
  <div class="wrapper">
    <div class="card"><i class="fal fa-arrow-right"></i></div>
  </div>
</div>

How to use this HTML Script on your website?

First you need to open the page with a HTML editor such as dream weaver or front page or even note pad , notice that if you using any other page making (ASP, PHP , etc.) languages it doesn't matter. Just open it and access to source file.

When you Open it, there are some codes in HTML called tags:

you have to find something called "BODY"

In HTML code it's like

When you find it just skip a line and copy and paste after body tag the codes which we offered you in this website
Anyways if you couldn't find that just paste the codes in the end of the source file.

Comments 0

There are no comments ...

Note:
Guests comments are allowed ...

POST YOUR COMMENT

Last added codes

Responsive Animated Login Webpag

HTML Audio Player (HTML, CSS, JS

HTML5 Audio Player with Playlist

Style outline buttons with (CSS)

Link with gradient background on

Link Fill On Hover (HTML, SCSS)

Pure CSS Dropdown Menu (HTML, SC

Full CSS3 Dropdown Menu (HTML, S

Nice dropdown menu! (HTML, CSS,

Dropdown menu (HTML, SCSS)

Super Simple CSS Dropdown Menu (

Dino Drop Down (HTML, CSS)

Dropdown Dark/light - Pure CSS (

Rating:

SOCIJAL MEDIA:

ADD THIS TO FACEBOOK

RATE:

1 2 3 4 5

Recent Comments

Re: Animated CSS Image (Slim, SCSS)

Guest: OOO THIS IS COOL ...

Site Author 1998 - 2025 ©, All rights reserved | For your question klik here

EU-SEARCH | EU-SEARCH Images | FILESI (english) | NEWS