HTML+CSS实现Cocacola产品卡片悬停效果卡片UI设计！！附源码！！

效果展示

完整源码

HTML

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title>Css实现crad 悬停效果</title>  <link rel="stylesheet" href="css/style.css"></head><body>  <div class="card">    <div class="circle" style="--clr:#f40103;">      <img src="img/cocacola_logo.png" class="logo">    </div>    <div class="content">      <h2>Cocaola</h2>      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi magni laboriosam, aspernatur pariatur odit necessitatibus.        <a href="#">Explore More</a>      </p>    </div>    <img src="img/cocacola.png" alt="cocacola" class="product_img">  </div></body></html>

style.CSS

/* google front *//* @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); */@import './google-front.css';
*{  margin: 0;  padding: 0;  box-sizing: border-box;}body{  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;  background-color: #151515;  font-family: 'Poppins', sans-serif;}
.card{  position: relative;  width: 350px;  height: 350px;  display: flex;  justify-content: center;  align-items: center;  transition: 0.5s;  /* background-color: #333; */  transition-delay: 0.5s;}.card:hover{  width: 600px;  transition-delay: 0.5s;}
.card .circle{  position: absolute;  top:0;  left: 0;  width: 100%;  height: 100%;  border-radius: 20px;  display: flex;  justify-content: center;  align-items: center;}
.card .circle::before{  content: '';  position: absolute;  top:0;  left: 0;  width: 350px;  height: 350px;  border-radius: 50%;  background: #191919;  border: 8px solid var(--clr);  filter: drop-shadow(0 0 10px var(--clr)) drop-shadow(0 0 60px var(--clr));  transition: 0.5s, background 0.5s;  transition-delay: 0.75s, 1s;}
.card:hover .circle::before{  transition-delay: 0.5s;  width: 100%;  height: 100%;  border-radius: 20px;  background: var(--clr);}
.card .circle .logo{  position: relative;  width: 250px;  transition: 0.5s;  transition-delay: 0.5s;}.card:hover .circle .logo {  transform: scale(0);  transition-delay: 0s;}
.card .product_img{  position: absolute;  top:50%;  left: 50%;  transform: translate(-50%, -50%) scale(0) rotate(315deg);  height: 300px;  transition: 0.5s ease-in-out;}.card:hover .product_img {  transition-delay: 0.75s;  top:25%;  left: 92%;  transform: translate(-50%, -50%) scale(1) rotate(15deg);  height: 500px;}
.card .content{  position: absolute;  width: 50%;  left: 20%;  padding: 20px 20px 30px 40px;  opacity: 0;  transition: 0.5s;  visibility: hidden;}
.card:hover .content{  transition-delay: 0.75s;  opacity: 1;  visibility: visible;  left: 20px;}
.card .content h2{  color: #fff;  text-transform: uppercase;  font-size: 2.5em;  line-height: 1em;}.card .content p{  color: #fff;}
.card .content a{  position: relative;  color: #111;  background-color: #fff;  padding:10px 20px;  border-radius: 10px;  display: inline-block;  text-decoration: none;  font-weight: 600;  margin-top: 10px;}

google-front.CSS

/* devanagari */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 200;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLFj_Z11lFc-K.woff2) format('woff2');  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 200;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLFj_Z1JlFc-K.woff2) format('woff2');  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 200;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLFj_Z1xlFQ.woff2) format('woff2');  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* devanagari */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 300;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format('woff2');  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 300;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format('woff2');  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 300;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* devanagari */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 400;  font-display: swap;  src: url(../front/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 400;  font-display: swap;  src: url(../front/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 400;  font-display: swap;  src: url(../front/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* devanagari */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 500;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2');  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 500;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 500;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* devanagari */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 600;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2');  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 600;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 600;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* devanagari */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 700;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 700;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 700;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* devanagari */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 800;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLDD4Z11lFc-K.woff2) format('woff2');  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 800;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLDD4Z1JlFc-K.woff2) format('woff2');  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 800;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2) format('woff2');  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* devanagari */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 900;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLBT5Z11lFc-K.woff2) format('woff2');  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 900;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLBT5Z11lFc-K.woff2) format('woff2');  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {  font-family: 'Poppins';  font-style: normal;  font-weight: 900;  font-display: swap;  src: url(../front/pxiByp8kv8JHgFVrLBT5Z1xlFQ.woff2) format('woff2');  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

优网科技，优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。

优网知识库

探索行业前沿，共享知识宝库

智慧教育解决方案

智慧答题解决方案

智慧建材解决方案

智慧家装解决方案

智慧家居解决方案

智慧校园解决方案

企业微信解决方案

教育机构解决方案

家校互动解决方案

微信客服解决方案

智能收款解决方案

家装行业解决方案

建材行业解决方案

家居行业解决方案

家电行业解决方案

品牌网站设计

网页设计

APP开发

微信公众号定制开发

小程序开发

制作网站

企业建站

微网站

微官站

手机网站建设