{"id":3868,"date":"2023-03-07T00:55:57","date_gmt":"2023-03-07T00:55:57","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3868"},"modified":"2023-06-10T13:01:29","modified_gmt":"2023-06-10T13:01:29","slug":"css-card-product-card-ui-hover-floating","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-card-product-card-ui-hover-floating\/","title":{"rendered":"CSS Card -Product Card UI Hover Floating"},"content":{"rendered":"<p>CSS Card &#8211; Product Card UI Hover Floating refers to a design style that can be applied to product cards on a webpage using CSS (Cascading Style Sheets).<\/p>\n<p>In this design style, when a user hovers over a product card with their mouse cursor, the card floats up and away from the rest of the content on the page, creating a sense of depth and interaction.<\/p>\n<p>To create this effect using CSS, you would typically use the transform property to apply a translate effect to the product card on hover.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"CSS Card -Product Card UI Hover Floating\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/OJopOao?default-tab=result&amp;theme-id=dark\" height=\"550\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/OJopOao\"><br \/>\nCSS Card -Product Card UI Hover Floating<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>Here&#8217;s an example of CSS code that could be used to create a product card with a hover floating effect:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap');\r\n\r\n\r\n*{\r\n  font-family: 'Poppins', sans-serif;\r\n}\r\n\r\nbody{\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  min-height: 100vh;\r\n  background: #131313;\r\n}\r\n\r\n.container{\r\n  position: relative;\r\n}\r\n\r\n.container .card{\r\n  position: relative;\r\n  width: 320px;\r\n  height: 450px;\r\n  background: #232323;\r\n  border-radius: 20px;\r\n  overflow: hidden;\r\n}\r\n\r\n.container .card:before{\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: #9bdc28;\r\n  clip-path: circle(150px at 80% 20%);\r\n  transition: 0.5s ease-in-out;\r\n}\r\n\r\n.container .card:hover:before{\r\n  clip-path: circle(300px at 80% -20%);\r\n}\r\n\r\n.container .card:after{\r\n  content: 'Nike';\r\n  position: absolute;\r\n  top: 30%;\r\n  left: -20%;\r\n  font-size: 12em;\r\n  font-weight: 800;\r\n  font-style: italic;\r\n  color: rgba(255,255,25,0.05)\r\n}\r\n\r\n.container .card .imgBx{\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: 10000;\r\n  width: 100%;\r\n  height: 220px;\r\n  transition: 0.5s;\r\n}\r\n\r\n.container .card:hover .imgBx{\r\n  top: 0%;\r\n  transform: translateY(0%);\r\n    \r\n}\r\n\r\n.container .card .imgBx img{\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%) rotate(-25deg);\r\n  width: 270px;\r\n}\r\n\r\n.container .card .contentBx{\r\n  position: absolute;\r\n  bottom: 0;\r\n  width: 100%;\r\n  height: 100px;\r\n  text-align: center;\r\n  transition: 1s;\r\n  z-index: 10;\r\n}\r\n\r\n.container .card:hover .contentBx{\r\n  height: 210px;\r\n}\r\n\r\n.container .card .contentBx h2{\r\n  position: relative;\r\n  font-weight: 600;\r\n  letter-spacing: 1px;\r\n  color: #fff;\r\n  margin: 0;\r\n}\r\n\r\n.container .card .contentBx .size, .container .card .contentBx .color {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 8px 20px;\r\n  transition: 0.5s;opacity: 0;\r\n  visibility: hidden;\r\n  padding-top: 0;\r\n  padding-bottom: 0;\r\n}\r\n\r\n.container .card:hover .contentBx .size{\r\n  opacity: 1;\r\n  visibility: visible;\r\n  transition-delay: 0.5s;\r\n}\r\n\r\n.container .card:hover .contentBx .color{\r\n  opacity: 1;\r\n  visibility: visible;\r\n  transition-delay: 0.6s;\r\n}\r\n\r\n.container .card .contentBx .size h3, .container .card .contentBx .color h3{\r\n  color: #fff;\r\n  font-weight: 300;\r\n  font-size: 14px;\r\n  text-transform: uppercase;\r\n  letter-spacing: 2px;\r\n  margin-right: 10px;\r\n}\r\n\r\n.container .card .contentBx .size span{\r\n  width: 26px;\r\n  height: 26px;\r\n  text-align: center;\r\n  line-height: 26px;\r\n  font-size: 14px;\r\n  display: inline-block;\r\n  color: #111;\r\n  background: #fff;\r\n  margin: 0 5px;\r\n  transition: 0.5s;\r\n  color: #111;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n}\r\n\r\n.container .card .contentBx .size span:hover{\r\n  background: #9bdc28;\r\n}\r\n\r\n.container .card .contentBx .color span{\r\n  width: 20px;\r\n  height: 20px;\r\n  background: #ff0;\r\n  border-radius: 50%;\r\n  margin: 0 5px;\r\n  cursor: pointer;\r\n}\r\n\r\n.container .card .contentBx .color span:nth-child(2){\r\n  background: #9bdc28;\r\n}\r\n\r\n.container .card .contentBx .color span:nth-child(3){\r\n  background: #03a9f4;\r\n}\r\n\r\n.container .card .contentBx .color span:nth-child(4){\r\n  background: #e91e63;\r\n}\r\n\r\n.container .card .contentBx a{\r\n  display: inline-block;\r\n  padding: 10px 20px;\r\n  background: #fff;\r\n  border-radius: 4px;\r\n  margin-top: 10px;\r\n  text-decoration: none;\r\n  font-weight: 600;\r\n  color: #111;\r\n  opacity: 0;\r\n  transform: translateY(50px);\r\n  transition: 0.5s;\r\n  margin-top: 0;\r\n}\r\n\r\n.container .card:hover .contentBx a{\r\n  opacity: 1;\r\n  transform: translateY(0px);\r\n  transition-delay: 0.75s;\r\n  \r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Card &#8211; Product Card UI Hover Floating refers to a design <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-card-product-card-ui-hover-floating\/\" title=\"CSS Card -Product Card UI Hover Floating\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3869,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,406],"tags":[461,462,464,103,392],"newstopic":[],"class_list":{"0":"post-3868","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-pickup","9":"tag-css-card","10":"tag-item-hover-color-background","11":"tag-product-card-ui-hover-floating","12":"tag-web-design","13":"tag-web-design-2023"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3868"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3868\/revisions"}],"predecessor-version":[{"id":3870,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3868\/revisions\/3870"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3869"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3868"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}