效果
1：html部分
<el-col :span="8">
<div class="grid-content bg-purple" >
<div class='classroom_img' @mouseover="enter(1)" @mouseout="leave">
<img :class="{classEnter:isUp==1}" src="../image/about_b.jpg" alt="">
<transition name="fadeIn">
<div v-if="show==1" class="layer_t">
</div>
</transition>
</div>
</div>
</el-col>
2：js部分
<script>
export default {
data() {
return {
isUp: -1,
show: -1,
}
},
methods: {
enter(value) {
console.log(value)
this.isUp=value;
this.show=value;
},
leave(){
this.isUp=-1;
this.show=-1;
}
}
}
</script>
3：css
.classEnter {
transform: scale(1.1);
transition: all 0.3s;
}
.fadeIn-enter-active {
opacity: 1;
transition: all 0.5s;
}
.fadeIn-leave-active {
opacity: 0;
transition: all 0.5s;
}
.fadeIn-enter, .fadeIn-leave {
opacity: 0;
transition: all 0.5s;
}
.classroom_img {
height: 200px;
overflow: hidden;
position: relative;
}
.classroom_img>img {
width: 100%;
height:100%;
transition: all 0.3s;
}
.layer_t {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgb(140,182,221);
padding: 15px 20px;
color: rgb(255,255,255);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
