1

我终于很接近了，但我使用的是 Instafeed.js，我的 4 张图像完全水平居中，但我的悬停动作与文本颜色叠加在左侧。

不知道这是怎么回事，但是 flexbox 应该把这一切放在中心吗？

这是代码

<head>
    <style type="text/css">
        .container{
  margin: 0 auto;
}

#instafeed {
  display: flex;
  flex-wrap: wrap;
}

.gallery-item {
  width: 150px;
  height: 150px;
  margin: 10px;
  text-decoration: none;
}

.gallery-item img {
  position: absolute;
}

.caption_layer {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #fff;
  opacity: 0;
}

.caption_layer:hover {
  transition: all 0.8s ease;
  background: rgba(169,189,80,0.9);
  opacity: 1;
}

.instaCaption {
  font-size: 1.5em;
  color:#5D5855;
}
    </style>
</head>

<body>
<div class="container">
<div id="instafeed"></div>
</div>

$(document).ready(function() {
  var feed = new Instafeed({
    get: 'user',
    userId: '',
    clientId: '',
    accessToken: '',
    template: '<a class="gallery-item" target="_blank" href="{{link}}"><img class="image_img" src="{{image}}" /><div class="caption_layer"><p class="instaCaption">{{model.likes.count}} Likes</p></div></a>',
    useHttp: true
    });
  feed.run();
});

</body>

什么是让悬停工作的最佳方式，同时将所有图像保持在水平行的中心并确保叠加层始终是图像的大小？

4

0 回答 0