diff --git a/src/assets/styles/apartmentDetail.css b/src/assets/styles/apartmentDetail.css index a2a15f5..2f3615f 100644 --- a/src/assets/styles/apartmentDetail.css +++ b/src/assets/styles/apartmentDetail.css @@ -152,21 +152,21 @@ .content .header .header-content .header-left .slideshow-across .box .item::after { content: ""; position: absolute; - top: 50%; - left: 50%; + top: 0; + left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.50196078); - transform: translate(-50%, -50%); - transition: width 0.3s, height 0.3s; + transition: all 0.3s; + transform: scale(1); } .content .header .header-content .header-left .slideshow-across .box .item:hover::after { - width: 0; - height: 0; + transform-origin: center; + transform: scale(0); } .content .header .header-content .header-left .slideshow-across .box .item.pitch::after { - width: 0; - height: 0; + transform-origin: center; + transform: scale(0); } .content .header .header-content .header-left .slideshow-across .box .item .video-icon { width: 44px; diff --git a/src/assets/styles/apartmentDetail.less b/src/assets/styles/apartmentDetail.less index 592e89f..f3fb6ea 100644 --- a/src/assets/styles/apartmentDetail.less +++ b/src/assets/styles/apartmentDetail.less @@ -180,24 +180,24 @@ &::after { content: ""; position: absolute; - top: 50%; - left: 50%; + top: 0; + left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.501960784313725); - transform: translate(-50%, -50%); - transition: width 0.3s, height 0.3s; + transition: all 0.3s; + transform: scale(1); } &:hover::after { - width: 0; - height: 0; + transform-origin: center; + transform: scale(0); } &.pitch { &::after { - width: 0; - height: 0; + transform-origin: center; + transform: scale(0); } }