css3样式总结

1. css(鼠标悬停时，图片缓缓变大)

.templatelist .content a.logo >img {
    transition: all 0.6s;
    width: 432px;
    height: 280px;
    overflow: hidden;
}

.templatelist .content a.logo >img:hover {
    transform: scale(1.05);
}

2. css、vue、jQuery(鼠标悬停时，显示遮照层)

html

<a href="{{subv.url}}" class="logo" download="" @mouseover="changeMask($event)" @mouseout="changeMask($event)">
   						<img :src="subv.thumb"><h4>{{subv.title}}</h4>
   						<span class="hide"><img src="static/images/ico_04.png"></span>
   					</a>

css

.logolist .content a.logo span {
   position: absolute;
   background: rgba(0,0,0,0.6);
   width: 210px;
   height: 190px;
   top: 0;
   padding-top: 70px;
   margin: 0 auto;
   text-align: center;
   transition: opacity 1s,transform 1s;
}

vue

methods: {


   	    changeMask: function(event){
   	    	$(event.currentTarget).find('span').toggle();      
   	    },
}