css 最简单的淡出淡出

实现的效果，鼠标放上去之后，图片放大。父级div设置宽度高度，并添加 overflow: hidden;

img里面添加 transition: transform 1s;  

.imges{

      width: 100%;

      height: 150px;

      overflow: hidden;

      img{

      width: 100%;

      height: 100%;

       transition: transform 1s;  

      }

    }

 

立即学习那个按钮隐藏

.studys { 

    color: #ffffff;

    position: absolute;

    bottom: 52%;

    left: 30%;

    border-radius: 5px;

    font-size: 18px;

    padding: 8px 40px;

    background-color: #188eee;

     transition: opacity 1s;

    opacity: 0;

  }

 

鼠标放上去时图片放大，然后透明度由0变成1

.imges>img{

          transform: scale(1.1)

      }

.studys {

        opacity: 1; 

        cursor: pointer;

      }