.elementor-kit-63{--e-global-color-primary:#2A2A2A;--e-global-color-secondary:#FAFAFA;--e-global-color-text:#7A7A7A;--e-global-color-accent:#2A2A2A;--e-global-color-fcb6644:#02010100;--e-global-color-9334a70:#E35A0A;--e-global-color-d4c6d70:#E24A01;--e-global-color-f83a5ae:#F1F1F1;--e-global-color-268a312:#B4B4B4;--e-global-color-0b00ea7:#D1D1D1;--e-global-color-856d892:#363636;--e-global-typography-primary-font-family:"Open Sans";--e-global-typography-primary-font-size:1rem;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Raleway";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:500;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Open Sans";--e-global-typography-accent-font-size:1rem;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1em;--e-global-typography-c8afd0b-font-family:"Open Sans";--e-global-typography-c8afd0b-font-size:5rem;--e-global-typography-c8afd0b-font-weight:700;--e-global-typography-c8afd0b-line-height:1.1em;--e-global-typography-c8afd0b-letter-spacing:-1.5px;--e-global-typography-fdef4d1-font-family:"Open Sans";--e-global-typography-fdef4d1-font-size:3.4rem;--e-global-typography-fdef4d1-font-weight:700;--e-global-typography-fdef4d1-line-height:1.1em;--e-global-typography-fdef4d1-letter-spacing:-1.5px;--e-global-typography-3a736eb-font-family:"Open Sans";--e-global-typography-3a736eb-font-size:2rem;--e-global-typography-3a736eb-font-weight:700;--e-global-typography-3a736eb-line-height:1.3em;--e-global-typography-941e87c-font-family:"Open Sans";--e-global-typography-941e87c-font-size:1.5rem;--e-global-typography-941e87c-font-weight:700;--e-global-typography-941e87c-line-height:1.2em;--e-global-typography-5bd828e-font-family:"Open Sans";--e-global-typography-5bd828e-font-size:1.3rem;--e-global-typography-5bd828e-font-weight:700;--e-global-typography-5bd828e-line-height:1.2em;--e-global-typography-6d7b5f9-font-family:"Open Sans";--e-global-typography-6d7b5f9-font-size:1rem;--e-global-typography-6d7b5f9-font-weight:600;--e-global-typography-6d7b5f9-line-height:1rem;--e-global-typography-8c6b611-font-family:"Open Sans";--e-global-typography-8c6b611-font-size:1rem;--e-global-typography-8c6b611-font-weight:700;--e-global-typography-8c6b611-line-height:1em;--e-global-typography-8c6b611-letter-spacing:5px;--e-global-typography-8cffa09-font-family:"Raleway";--e-global-typography-8cffa09-font-size:1.2rem;--e-global-typography-8cffa09-font-weight:500;--e-global-typography-8cffa09-line-height:1.6em;--e-global-typography-a9a9cf2-font-family:"Open Sans";--e-global-typography-a9a9cf2-font-size:4rem;--e-global-typography-a9a9cf2-font-weight:700;--e-global-typography-a9a9cf2-line-height:1em;--e-global-typography-377ed00-font-family:"Raleway";--e-global-typography-377ed00-font-size:0.9rem;--e-global-typography-377ed00-font-weight:400;--e-global-typography-377ed00-line-height:1.2em;background-color:var( --e-global-color-secondary );color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-63 button,.elementor-kit-63 input[type="button"],.elementor-kit-63 input[type="submit"],.elementor-kit-63 .elementor-button{background-color:var( --e-global-color-9334a70 );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );color:var( --e-global-color-accent );border-radius:8px 8px 8px 8px;padding:15px 30px 15px 30px;}.elementor-kit-63 button:hover,.elementor-kit-63 button:focus,.elementor-kit-63 input[type="button"]:hover,.elementor-kit-63 input[type="button"]:focus,.elementor-kit-63 input[type="submit"]:hover,.elementor-kit-63 input[type="submit"]:focus,.elementor-kit-63 .elementor-button:hover,.elementor-kit-63 .elementor-button:focus{background-color:var( --e-global-color-d4c6d70 );color:var( --e-global-color-accent );border-radius:8px 8px 8px 8px;}.elementor-kit-63 e-page-transition{background-color:#FFBC7D;}.elementor-kit-63 a{color:var( --e-global-color-9334a70 );}.elementor-kit-63 a:hover{color:var( --e-global-color-268a312 );}.elementor-kit-63 h1{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-c8afd0b-font-family ), Sans-serif;font-size:var( --e-global-typography-c8afd0b-font-size );font-weight:var( --e-global-typography-c8afd0b-font-weight );line-height:var( --e-global-typography-c8afd0b-line-height );letter-spacing:var( --e-global-typography-c8afd0b-letter-spacing );}.elementor-kit-63 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-fdef4d1-font-family ), Sans-serif;font-size:var( --e-global-typography-fdef4d1-font-size );font-weight:var( --e-global-typography-fdef4d1-font-weight );line-height:var( --e-global-typography-fdef4d1-line-height );letter-spacing:var( --e-global-typography-fdef4d1-letter-spacing );}.elementor-kit-63 h3{color:var( --e-global-color-primary );font-family:var( --e-global-typography-3a736eb-font-family ), Sans-serif;font-size:var( --e-global-typography-3a736eb-font-size );font-weight:var( --e-global-typography-3a736eb-font-weight );line-height:var( --e-global-typography-3a736eb-line-height );}.elementor-kit-63 h4{color:var( --e-global-color-primary );font-family:var( --e-global-typography-941e87c-font-family ), Sans-serif;font-size:var( --e-global-typography-941e87c-font-size );font-weight:var( --e-global-typography-941e87c-font-weight );line-height:var( --e-global-typography-941e87c-line-height );}.elementor-kit-63 h5{color:var( --e-global-color-primary );font-family:var( --e-global-typography-5bd828e-font-family ), Sans-serif;font-size:var( --e-global-typography-5bd828e-font-size );font-weight:var( --e-global-typography-5bd828e-font-weight );line-height:var( --e-global-typography-5bd828e-line-height );}.elementor-kit-63 h6{color:var( --e-global-color-9334a70 );font-family:var( --e-global-typography-6d7b5f9-font-family ), Sans-serif;font-size:var( --e-global-typography-6d7b5f9-font-size );font-weight:var( --e-global-typography-6d7b5f9-font-weight );line-height:var( --e-global-typography-6d7b5f9-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-63{--e-global-typography-primary-font-size:0.9rem;--e-global-typography-text-font-size:0.9rem;--e-global-typography-accent-font-size:0.9rem;--e-global-typography-c8afd0b-font-size:4.5rem;--e-global-typography-fdef4d1-font-size:2.8rem;--e-global-typography-3a736eb-font-size:1.7rem;--e-global-typography-941e87c-font-size:1.3rem;--e-global-typography-5bd828e-font-size:1.2em;--e-global-typography-6d7b5f9-font-size:0.9rem;--e-global-typography-8c6b611-font-size:0.9rem;--e-global-typography-8c6b611-line-height:1em;--e-global-typography-8cffa09-font-size:1.1em;--e-global-typography-a9a9cf2-font-size:3.5rem;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-63 h1{font-size:var( --e-global-typography-c8afd0b-font-size );line-height:var( --e-global-typography-c8afd0b-line-height );letter-spacing:var( --e-global-typography-c8afd0b-letter-spacing );}.elementor-kit-63 h2{font-size:var( --e-global-typography-fdef4d1-font-size );line-height:var( --e-global-typography-fdef4d1-line-height );letter-spacing:var( --e-global-typography-fdef4d1-letter-spacing );}.elementor-kit-63 h3{font-size:var( --e-global-typography-3a736eb-font-size );line-height:var( --e-global-typography-3a736eb-line-height );}.elementor-kit-63 h4{font-size:var( --e-global-typography-941e87c-font-size );line-height:var( --e-global-typography-941e87c-line-height );}.elementor-kit-63 h5{font-size:var( --e-global-typography-5bd828e-font-size );line-height:var( --e-global-typography-5bd828e-line-height );}.elementor-kit-63 h6{font-size:var( --e-global-typography-6d7b5f9-font-size );line-height:var( --e-global-typography-6d7b5f9-line-height );}.elementor-kit-63 button,.elementor-kit-63 input[type="button"],.elementor-kit-63 input[type="submit"],.elementor-kit-63 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:90%;}.e-con{--container-max-width:90%;}}@media(max-width:767px){.elementor-kit-63{--e-global-typography-primary-font-size:0.8rem;--e-global-typography-text-font-size:0.8rem;--e-global-typography-accent-font-size:0.8rem;--e-global-typography-c8afd0b-font-size:2.6rem;--e-global-typography-fdef4d1-font-size:2rem;--e-global-typography-3a736eb-font-size:1.3rem;--e-global-typography-941e87c-font-size:1.2rem;--e-global-typography-5bd828e-font-size:1.1em;--e-global-typography-6d7b5f9-font-size:0.8rem;--e-global-typography-8c6b611-font-size:0.8rem;--e-global-typography-8cffa09-font-size:1em;--e-global-typography-a9a9cf2-font-size:2.5rem;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-63 h1{font-size:var( --e-global-typography-c8afd0b-font-size );line-height:var( --e-global-typography-c8afd0b-line-height );letter-spacing:var( --e-global-typography-c8afd0b-letter-spacing );}.elementor-kit-63 h2{font-size:var( --e-global-typography-fdef4d1-font-size );line-height:var( --e-global-typography-fdef4d1-line-height );letter-spacing:var( --e-global-typography-fdef4d1-letter-spacing );}.elementor-kit-63 h3{font-size:var( --e-global-typography-3a736eb-font-size );line-height:var( --e-global-typography-3a736eb-line-height );}.elementor-kit-63 h4{font-size:var( --e-global-typography-941e87c-font-size );line-height:var( --e-global-typography-941e87c-line-height );}.elementor-kit-63 h5{font-size:var( --e-global-typography-5bd828e-font-size );line-height:var( --e-global-typography-5bd828e-line-height );}.elementor-kit-63 h6{font-size:var( --e-global-typography-6d7b5f9-font-size );line-height:var( --e-global-typography-6d7b5f9-line-height );}.elementor-kit-63 button,.elementor-kit-63 input[type="button"],.elementor-kit-63 input[type="submit"],.elementor-kit-63 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:90%;}.e-con{--container-max-width:90%;}}/* Start custom CSS */<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: black; /* 设置页面背景色为黑色 */
}

.image-container {
    position: relative;  /* 创建定位上下文 */
    width: 300px;       /* 根据实际图片尺寸修改 */
    height: 200px;      /* 根据实际图片尺寸修改 */
}

/* 基础图片样式 */
.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease; /* 添加过渡效果 */
    object-fit: cover;  /* 保持图片比例填充容器 */
}

/* 默认显示原始图片 */
.original-img {
    opacity: 1;
}

/* 悬停时显示的图片（默认隐藏） */
.hover-img {
    opacity: 0;
}

/* 悬停时的交互效果 */
.image-container:hover .original-img {
    opacity: 0;  /* 原始图片消失 */
}

.image-container:hover .hover-img {
    opacity: 1;  /* 新图片出现 */
    transform: scale(1.05); /* 添加放大效果（可选） */
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.3)); /* 添加阴影效果（可选） */
}
</style>
</head>
<body>

<!-- 图片容器 -->
<div class="image-container">
    <!-- 原始图片 -->
    <img src="https://vip.123pan.cn/1813307841/%E5%9B%BE%E5%BA%8A/dian-dong-cha-che-01.png" class="original-img" alt="原始图片">
    <!-- 悬停图片 -->
    <img src="https://vip.123pan.cn/1813307841/%E5%9B%BE%E5%BA%8A/dian-dong-cha-che-02.png" class="hover-img" alt="悬停效果图片">
</div>

</body>
</html>/* End custom CSS */