https://github.com/HeorhiiZemlianko/3D-Layer-Image-Hover-Effect

This program implements a simple scheme for implementing a 3D hover effect with overlaying shadows on an object. This screenshot was taken from a design that was developed for a fitness app. Link to the design of this project: Behance
https://github.com/HeorhiiZemlianko/3D-Layer-Image-Hover-Effect

Last synced: 3 months ago
JSON representation

This program implements a simple scheme for implementing a 3D hover effect with overlaying shadows on an object. This screenshot was taken from a design that was developed for a fitness app. Link to the design of this project: Behance

• Host: GitHub
• URL: https://github.com/HeorhiiZemlianko/3D-Layer-Image-Hover-Effect
• Owner: HeorhiiZemlianko
• Created: 2023-02-15T12:41:23.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-15T14:42:20.000Z (almost 2 years ago)
• Last Synced: 2024-07-31T08:18:48.617Z (6 months ago)
• Language: CSS
• Homepage: https://heorhiizemlianko.github.io/3D-Layer-Image-Hover-Effect/3dimaje.html
• Size: 309 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome - HeorhiiZemlianko/3D-Layer-Image-Hover-Effect - This program implements a simple scheme for implementing a 3D hover effect with overlaying shadows on an object. This screenshot was taken from a design that was developed for a fitness app. Link to the design of this project: Behance (CSS)

README

        
3D Layer Image Hover Effect


This program implements a simple scheme for implementing a 3D hover effect with overlaying shadows on an object. This screenshot was taken from a design that was developed for a fitness app. Link to the design of this project: Behance





  





  

  

  



## The goal of the work

The main goal of this project is to develop an effect that will create a 3D feel and be visually similar to the up and down fading effect.

This effect will show as one of the visualization effects of a product or object in a presentation or project.

## Task statement

A simple experiment with css & html and its possibilities.

A demo implementation of this template can be viewed at this link: 3D-Effect 


## Schematic representation of the HTML structure

```

html

├── head

│   ├── meta

│   ├── title

│   └── link

└── body

    ├── div.container

        ├── img

        ├── img

        ├── img

        └── img

```

## Schematic representation of the CSS structure

```

css

├── body

├── .container

├── .container img

├── .container:hover img: ntn-child(4)

├── .container:hover img: ntn-child(3)

├── .container:hover img: ntn-child(2)

└── .container:hover img: ntn-child(1)

```

## Code from the project

- HTML

```html

	

	3D Layer Image Hover Effect

	

	


		

		

		

		

	


```

- CSS

```css

body{

	margin: 0;

	padding: 0;

	height: 100vh;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

}

.container{

	position: relative;

	width: 250px;

	height: 415px;

	background: rgba(0,0,0,0.1);

	transform: rotate(-30deg) skew(25deg);

	transition: 0.5s;

}

.container img{

	position: absolute;

	width: 100%;

	transition: 0.5s;

}

.container:hover img:nth-child(4){

	transform: translate(120px, -120px);

	opacity: 1;

}

.container:hover img:nth-child(3){

	transform: translate(90px, -90px);

	opacity: .8;

}

.container:hover img:nth-child(2){

	transform: translate(60px, -60px);

	opacity: .6;

}

.container:hover img:nth-child(1){

	transform: translate(30px, -30px);

	opacity: .4;

}

```