├── images ├── 1.png └── 2.png ├── README.md ├── index.html └── style.css /images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Card-Hover-Book-Effects-Animation/HEAD/images/1.png -------------------------------------------------------------------------------- /images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Card-Hover-Book-Effects-Animation/HEAD/images/2.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![ramkrishna](https://github.com/codeaashu/Card-Hover-Book-Effects-Animation/assets/130897584/c073331f-5b19-46f5-a6ec-7dab3230794d) 2 | # Card-Hover-Book-Effects-Animation 3 | Creating Animating Card hover effect with book effects using HTML & CSS. 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Card Hover Book Effects Animation | CODE AASHU 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | 18 |
19 |
20 |

जय श्री राम

21 |

22 | Jai Shri Ram is a Hindu devotional phrase that means "Victory to 23 | Lord Rama." It is a popular greeting and expression of faith among 24 | Hindus. Ram is a major deity in Hinduism, and he is revered for his 25 | righteousness, courage, and compassion. The Jai Shri Ram chant is 26 | often used during Hindu religious festivals and ceremonies
27 |
28 | --codingaashu 29 |

30 |
31 |
32 |
33 |
34 | 35 |
36 |
37 |

जय श्री कृष्णा

38 |

39 | Radha and Krishna are two of the most beloved Hindu deities. Their 40 | relationship is often seen as the epitome of love, devotion, and 41 | sacrifice. Radha and Krishna's love story is told in many different 42 | Hindu scriptures, including the Bhagavata Purana and the Gita 43 | Govinda. Their relationship is often seen as a metaphor for the 44 | relationship between the soul and God.
--codingaashu 45 |

46 |
47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* ===( CODE AASHU )=== */ 2 | body{ 3 | margin: 0; 4 | padding: 0; 5 | background: #f2f2f2; 6 | font-family: "Acme"; 7 | background: #000; 8 | } 9 | 10 | .container{ 11 | max-width: 1000px; 12 | margin: 100px auto; 13 | display: flex; 14 | flex-wrap: wrap; 15 | justify-content: space-around; 16 | } 17 | 18 | .codingaashu:hover:nth-child(2) { 19 | box-shadow: 10px 10px 50px rgb(15, 55, 231); 20 | 21 | } 22 | 23 | .codingaashu{ 24 | position: relative; 25 | margin: 20px 0; 26 | width: 300px; 27 | height: 400px; 28 | background: #fff; 29 | transform-style: preserve-3d; 30 | transform: perspective(2000px); 31 | transition: 1s; 32 | } 33 | 34 | .codingaashu:hover{ 35 | z-index: 1111; 36 | transform: perspective(2000px) rotate(-10deg); 37 | box-shadow: 10px 10px 50px rgb(223, 62, 17); 38 | } 39 | 40 | .codingaashu .img-container{ 41 | position: relative; 42 | width: 100%; 43 | height: 100%; 44 | border: 1px solid #000; 45 | box-sizing: border-box; 46 | transform-origin: left; 47 | z-index: 1; 48 | transition: 1s; 49 | } 50 | 51 | .codingaashu .img-container img{ 52 | position: absolute; 53 | left: 0; 54 | top: 0; 55 | height: 100%; 56 | width: 100%; 57 | object-fit: cover; 58 | } 59 | 60 | .codingaashu:hover .img-container{ 61 | transform: rotateY(-135deg); 62 | } 63 | 64 | .codingaashu .codingaashu-details{ 65 | position: absolute; 66 | left: 0; 67 | top: 0; 68 | box-sizing: border-box; 69 | padding: 20px; 70 | color: #000; 71 | } 72 | 73 | .codingaashu .codingaashu-details h2{ 74 | margin: 0; 75 | padding: 0.5em 0; 76 | text-transform: uppercase; 77 | font-size: 2em; 78 | color: #ed363a; 79 | } 80 | 81 | .codingaashu .codingaashu-details p{ 82 | margin: 0; 83 | padding: 0; 84 | line-height: 25px; 85 | font-size: 1.1em; 86 | } --------------------------------------------------------------------------------