دایره دنبال کننده - فراغیب
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۳۳: | خط ۳۳: | ||
/* کادر مربعی دور عکس */ | /* کادر مربعی دور عکس */ | ||
.product-box{ | .product-box{ | ||
position:relative; | |||
width: | width:250px; | ||
height: | height:250px; | ||
max-width:100%; | max-width:100%; | ||
margin:auto; | margin:auto; | ||
border:0 !important; | |||
border-radius:26px; | border-radius:26px; | ||
display:flex; | display:flex; | ||
| خط ۴۳: | خط ۴۴: | ||
justify-content:center; | justify-content:center; | ||
box-sizing:border-box; | box-sizing:border-box; | ||
} | } | ||
/* دو گوشه هایلایت */ | |||
.product-box::before, | |||
.product-box::after{ | |||
content:""; | |||
position:absolute; | |||
width:48px; | |||
height:48px; | |||
border-color:transparent; | |||
border-style:solid; | |||
pointer-events:none; | |||
opacity:0; | |||
} | |||
/* گوشه بالا راست */ | |||
.product-box::before{ | |||
top:0; | |||
right:0; | |||
border-top:3px solid #1479ff; | |||
border-right:3px solid #1479ff; | |||
border-radius:0 18px 0 0; | |||
} | |||
/* گوشه پایین چپ */ | |||
.product-box::after{ | |||
bottom:0; | |||
left:0; | |||
border-bottom:3px solid #1479ff; | |||
border-left:3px solid #1479ff; | |||
border-radius:0 0 0 18px; | |||
} | |||
/* فقط هنگام هاور */ | |||
@media (hover:hover) and (pointer:fine){ | |||
.product-link:hover .product-box::before, | |||
.product-link:hover .product-box::after{ | |||
opacity:1; | |||
} | |||
} | |||
/* موبایل: بدون موشن، فقط همان هایلایت */ | |||
@media (hover:none){ | |||
.product-link:active .product-box::before, | |||
.product-link:active .product-box::after{ | |||
opacity:1; | |||
} | |||
/* دایره عکس */ | /* دایره عکس */ | ||
