Css 3D Product Card Hover Effects
 |
| Css 3D Product Card Hover Effects |
HTML PART
Here's a breakdown of the code:
The outermost div element has a class of "card". This class could be used to apply a specific style to all cards on a website or application.
Within the "card" div, there are two child div elements: one with a class of "cover" and one with a class of "details". These child elements could be used to display a cover image and the details of the item being showcased on the card, respectively.
The "cover" div contains an img element with a src attribute that specifies the URL of an image file ("img/img2.png") to be displayed as the cover image for the card.
The "details" div contains another div element that wraps several child elements that represent the details of the item being showcased on the card. These child elements include:
An img element with a src attribute that specifies the URL of another image file ("img/img1.png") to be displayed alongside the item details.
Two h elements with tags "h3" and "h2" respectively that display the name of the item and its price with a dollar sign.
An a element that links to a page or action where the user can purchase the item ("#").
CSS PART
The following is a block of CSS code that defines styles for a card component. Here is a breakdown of what each part does:
1. The first section sets some global styles that apply to all elements on the page. The * selector targets all elements and applies the following rules:
margin: 0; sets the margin to 0 for all elements
padding: 0; sets the padding to 0 for all elements
box-sizing: border-box; changes the box model to use the border-box model, which includes the padding and border in the element's total width and height
font-family: 'Poppins', sans-serif; sets the default font family to 'Poppins', which is a sans-serif font
2. The body selector targets the body element and applies the following rules:
display: flex; sets the display property to flex, which allows for easy centering of child elements
justify-content: center; centers the child elements horizontally
align-items: center; centers the child elements vertically
min-height: 100vh; sets the minimum height of the body to 100% of the viewport height, ensuring that the content will always fill the screen
background: #09383e; sets the background color of the body to a dark blue-green color
3. The .card selector targets a specific element with the class name card and applies the following rules:
position: relative; sets the positioning of the element to relative, which means that it will be positioned relative to its normal position
width: 300px; sets the width of the element to 300 pixels
height: 400px; sets the height of the element to 400 pixels
background: #fff; sets the background color of the element to white
transform-style: preserve-3d; enables 3D transformations and ensures that child elements are rendered in 3D space
transform: perspective(2000px); sets the perspective of the element to 2000 pixels, which gives it a 3D effect
transition: 1s; specifies that any changes to the element's properties will be animated over a period of 1 second
box-shadow: inset 300px 0 50px rgba(0,0,0,0.15),0 20px 20px rgba(0,0,0,0.15); sets a box shadow on the element that gives it a raised appearance
4. The .card:hover selector targets the same element when the user hovers over it and applies the following rules:
transform: perspective(2000px) translateX(50%); moves the element 50% of its width to the right, giving it a sliding effect
box-shadow: inset 20px 0 50px rgba(0,0,0,0.15),0 10px 10px rgba(0,0,0,0.15); changes the box shadow to give the element a pressed appearance.
5. .card .cover: This is a CSS selector that selects the cover element of a card element. The cover element is a child element of the card element.
position: relative;: This sets the positioning of the cover element to be relative to its parent card element.
width: 100%; height: 100%;: This sets the width and height of the cover element to be 100% of its parent card element.
background: #fff;: This sets the background color of the cover element to be white.
z-index: 2;: This sets the stacking order of the cover element to be above its parent card element.
display: flex; justify-content: center; align-items: center;: This sets the display of the cover element to be flex and centers its content both horizontally and vertically.
transform-style: preserve-3d;: This sets the transform style of the cover element to preserve its 3D positioning.
overflow: hidden;: This sets the overflow of the cover element to be hidden, so any content that goes beyond its bounds will be hidden.
transition: 1s ease-in-out;: This sets the transition effect of the cover element to be 1 second with an ease-in-out timing function.
transform-origin: left;: This sets the origin point of the cover element's transformation to be the left side.
6. .card:hover .cover: This is a CSS selector that selects the cover element of a card element when the card element is being hovered over with the mouse.
transform: rotateY(-180deg);: This sets the transformation of the cover element to rotate along the Y-axis by 180 degrees when the card element is being hovered over with the mouse.
7. .card .cover img: This is a CSS selector that selects the image element within the cover element of a card element.
max-width: 100%; height: 320px; z-index: 1;: This sets the maximum width of the image element to be 100% of the cover element's width, sets its height to be 320 pixels, and sets its stacking order to be below the cover element.
8. .card .cover::before selects a pseudo-element ::before that is a child of an element with the class cover that is a child of an element with the class card. This pseudo-element is used to create a white triangle shape that overlays the cover of the card. It has a width of 10px, a background color of white, a height of 150%, and is rotated 36.7 degrees using the transform property. It also has a box shadow with a blue color and a transition effect that lasts 0.5 seconds with a delay of 1 second.
9. .card:hover .cover::before applies a hover effect to the same pseudo-element when the user hovers over the card. This changes the width of the triangle to 0px, increases the box shadow's spread to 250px, and rotates the triangle to 143.5 degrees.
10. .card .details selects an element with the class details that is a child of an element with the class card. This sets the position of this element to absolute, making it positioned relative to its parent element. It also sets the element to take up the full width and height of its parent element, and centers its contents using the display, justify-content, and align-items properties. Additionally, it sets the element to have hidden overflow, and applies text centering and a high z-index value.
11. .card .details img Sets the width and height of the image within the "details" class to be 200 pixels and 250 pixels respectively. This will make sure that all images with this class will have the same size.
12. .card .details h3: Sets the font-weight to 500 and a top and bottom margin of 5 pixels for all h3 tags within the "details" class. This will make the text within the h3 tags more readable and spaced out.
13. .card .details h2: Sets the font size to 1.5em, font weight to 600, and text color to #e82a5b for all h2 tags within the "details" class. This will make the h2 tags stand out and attract the viewer's attention.
14. .card .details a: Sets the display to inline-block, padding to 8 pixels on top and bottom and 20 pixels on the sides, background color to #47bfce, text color to white, and removes the text decoration. It also sets the letter spacing to 1 pixel and border-radius to 25 pixels. This will style the anchor tags within the "details" class as a button with a rounded shape and a color scheme that matches the overall design of the page.
.png)
.png)
0 Comments