[分享]css3图片hover滚动效果

CSS3图片hover滚动效果是一种可以使你的网站更加生动、吸引人的效果。 使用CSS3技术可以轻松的实现这种效果，以下是一些代码示例： .container { display: flex; fle...

CSS3图片hover滚动效果是一种可以使你的网站更加生动、吸引人的效果。 使用CSS3技术可以轻松的实现这种效果，以下是一些代码示例：

 .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .item {
    width: 200px;
    height: 200px;
    margin: 10px;
    background-image: url(images/item1.png);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    transition: transform ease-out 0.5s;
  }
  
  .item:hover {
    transform: translateY(-20px) scale(1.1);
  }
  
  .item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity ease-out 0.5s;
  }
  
  .item:hover:before {
    opacity: 1;
  }
  
  .item:hover:after {
    content: "VIEW MORE";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    opacity: 1;
    transition: opacity ease-out 0.5s;
  }
  
  .item:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    opacity: 0;
  } 

以上代码实现了鼠标悬停时图片向上移动并放大的效果，同时图片上覆盖了一个半透明黑色背景和一个查看详情的文字。你可以根据自己的需要进行修改和调整。

总之，CSS3技术可以为你的网站添加很多动态、漂亮的效果，若你还没有尝试过，赶快动手试试吧。