hover 文字上移
Click here to add your own text
code
.hover_up{
transition: .3s ease-in-out;
}
.hover_up:hover{
transform:translateY(-10px);
}
圖片特效
code
/* Shine 效果 – 限制在容器內 */
.shine-pic {
position: relative;
overflow: hidden; /* 添加這行來限制子元素不超出容器 */
}
.shine-pic::before {
position: absolute;
top: 0;
left: -125%;
z-index: 2;
display: block;
content: ”;
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
/* 可以選擇性添加初始透明度 */
opacity: 0;
}
.shine-pic:hover::before {
-webkit-animation: shine .75s;
animation: shine .75s;
opacity: 1; /* 如果添加了初始透明度，在 hover 時需要設為可見 */
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
code
/* box hover +背景特效 */
.box-hover-bg { transition: all 0.3s ease-out 0s !important;}
.box-hover-bg:hover {transform: translateY(-10px); transition: all 0.3s ease-out 0s !important; background-image:linear-gradient(to right, #af884e, #d2b89b, #947047);}
.box-hover-bg:hover h5 {color: #575149;}
code
/*——————【圖片】——————*/
#top .Image-bg.avia-image-container, #top .Image img { border-radius: 10px; transition: all .3s ease;}
#top .Image-bg.avia-image-container:hover {box-shadow: 12px 12px 0 #77bd5a38; transform: scale(1.01);}