Javascript div背景轻松，悬停时覆盖

我在我的页面上设置了一个div，当用户将鼠标悬停在div上时，该div上会显示一个覆盖图。在其他网站上，例如在这里：有一个非常好的效果，也可以简化后面div的背景。我似乎无法像我所看到的那样有效地实现这一目标，我正在寻求一些支持和指导

HTML

---

我稍微改变了你的小提琴，这样当你悬停在图像上时，背景图像会稍微放大，如示例所示

可以使用以下css缩放/拉伸悬停时div的背景图像：

.portfolio-project-image:hover {
    background-size: 102% 102%;
    background-repeat: no-repeat;
    background-position: center center;
}

---

你可以在下面的链接中找到你更新的背景图片示例：

你在找这样的东西吗？我只想在覆盖打开时背景中的图片稍微放大。我有六个div，都用.portfolio project image one等进行分类。当我将上面的css应用到这些类时，它没有工作当我将其应用于class.portfolio项目映像时，它会起作用。有什么想法吗？

.portfolio-project {
    width: 32%;
    height: 373px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    margin-left:15px;
    float:left;
}


.portfolio-project-image{
    width: 100%;
    height: 373px;
}

.portfolio-project-image-one{
    width: 100%;
    height: 373px;
    background-image:url(../images/flyer_mock_up.jpg);
    background-position:center;

}



.portfolio-project-image-one:hover{
    width: 100%;
    height: 373px;
    background-image:url(../images/flyer_mock_up.jpg);
    background-position:center;
    display:block;

}

.portfolio-overlay {
  width:100%;
  height:100%;
  opacity: 0.75;
  position:absolute;
  background-color:black;
  transition: top 0.3s ease-in-out;
  display:block;
  -webkit-transition: top 0.3s ease-in-out;
            transition: top 0.3s ease-in-out;

}
.portfolio-overlay div {
    position:relative;
  display:inline-block;;

}

ul.portfolio-project-image { 
    list-style: none; 
    width:100% 

}

ul.portfolio-project-image li {
    position: relative;
    display: inline-block;
    width:100%;
  height: 100%;
  overflow: hidden;
  transition: 2s;
    -moz-transition: 2s;
    -webkit-transition: 2s;
    }


li:hover .portfolio-overlay {
  top: 0;
  display:block;
   transition: 2s;
    -moz-transition: 2s;
    -webkit-transition: 2s;}


.bt4 {
    text-align: center;
    margin-top: 160px;
    font: 200 12px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color:#FFF;
    width:100%;
    height:10px;
    margin-left:auto;
    margin-right:auto;
}
.bt5 {
    text-align: center;
    font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 16px;
    font-weight: 200;
    color:#FFF;
    width:100%;
    height:10px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 10px;
}

.bt5 a {
    text-align: center;
    font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 16px;
    font-weight: 200;
    color:#FFF;
    width:100%;
    height:10px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 10px;
    text-decoration:none;
}

.bt6 {
    text-align: center;
    font: 200 12px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 30px;
    font-weight: 200;
    color:#FFF;
    width:100%;
    height:10px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 30px;
}

.portfolio-project-image:hover {
    background-size: 102% 102%;
    background-repeat: no-repeat;
    background-position: center center;
}