hover加图层图放大

项目场景：

提示：这里简述项目相关背景：

在项目中有些需要再鼠标移入的时候加蒙砂效果，有些需要一些将图放大，有时候这两个都需要

 

---

原因分析：

提示：这里填写问题的分析：

在hover时添加两个效果

父:hover  子{

        要添加在子的效果

}

---

解决方案：

提示：这里填写该问题的具体解决方案：

<template><!-- 绿色商家log 点击进入商家详情--><div class="logBox poRe" ref="logInfo"><el-image style="" :src="props.imgUrl" fit="fit" class="zoom-on-hover":z-index="100"ref="imgRef"></el-image><div class="poAb colorW none padTB40"><div class="padLR30 fontS18 fontW5 hoverS" >{{props.title}}</div><div class="padLR30 fontS14 fontW5 hoverS"  >{{props.category}}</div></div></div>
</template><script lang="ts" setup>
import {// exporter,
} from '@/view/GreenTrade/imgInfo';
import {useRoute,useRouter,} from 'vue-router'
const route=useRoute();
const router=useRouter();
import {reactive,toRefs,ref,Ref,PropType,onMounted,onBeforeUnmount,
} from "vue"
const props=defineProps({imgUrl:{type:String,// default:true},title:{type:String,// default:true},category:{type:String,// default:true},
})onMounted(()=>{console.log()
})
onBeforeUnmount(()=>{console.log()
})</script><style lang="less" scoped>
.logBox{box-shadow: 0 0 6px 2px #cccccc;display: flex;overflow: hidden;
}
.poAb{position: absolute;
}
.none{visibility: hidden;opacity: 0;
}
.logBox:hover .zoom-on-hover{transform: scale(1.1);transition:transform 0.6s ease; /* 添加过渡效果 */;
}
.logBox:hover .poAb{visibility: visible;opacity: 1;background-color: rgba(51, 57, 130, 0.9);transition:opacity 0.6s ease; /* 添加过渡效果 */;
}</style>