Question

我使用Justified Gallery库来证明图像的合理性，我还在图像上使用CSS悬停效果，这些图像在悬停时显示FontAwesome图标。

问题是，图标出现在每个图像的不同位置，因为每个图像都有一个不同的尺寸，由Justified Gallery插件强加给它以适应网格。

我希望图标显示在每个图像中心的相同固定位置。

以下是网格的外观以及图标在缩小的缩略图上的显示方式。

JS Fiddle https://jsfiddle.net/halnex/3shtoyzz/3/

这是我的HTML

<div id="mygallery" class="global-height scrollable">
    <div class="hovereffect">
        <img alt="Title 1" src="assets/images/posts/thumbs/post-1.jpg"/>
        <div class="overlay">
            <a class="info" href="#"><i class="fa fa-info-circle fa-3x" style="color: white;"></i></a>
        </div>
    </div>

    <div class="hovereffect">
        <img alt="Title 1" src="assets/images/posts/thumbs/post-2.jpg"/>
        <div class="overlay">
            <a class="info" href="#"><i class="fa fa-info-circle fa-3x" style="color: white;"></i></a>
        </div>
    </div>
    <div class="hovereffect">
        <img alt="Title 1" src="assets/images/posts/thumbs/post-3.jpg"/>
        <div class="overlay">
            <a class="info" href="#"><i class="fa fa-info-circle fa-3x" style="color: white;"></i></a>
        </div>
    </div>
</div>

这是我的CSS

.hovereffect {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}

.hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,0.7);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
    background-color: rgba(48, 152, 157, 0.1);
}

.hovereffect img {
    display: block;
    position: relative;
}

.hovereffect h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
    -webkit-transform: translateY(45px);
    -ms-transform: translateY(45px);
    transform: translateY(45px);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.hovereffect:hover h2 {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
}

.hovereffect a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    text-transform: uppercase;
    color: #fff;
    background-color: transparent;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    font-weight: normal;
    margin: 100px 50px;
}

.hovereffect:hover a.info {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.hovereffect a.info:hover {
    /*box-shadow: 0 0 5px #fff;*/
}

Javascript

$(document).ready(function() {
    $("#mygallery").justifiedGallery({
        rowHeight : 155,
        lastRow : 'justify',
        margins : 0,
        captions: false
    });
});

Answer 1

尝试使用PINIT_ONCE

进行居中

https://jsfiddle.net/ramtob/3shtoyzz/4/

我添加了display: flex和.overlay这个弹性居中代码：

.hovereffect

我还将图像（而不是图标）定位为绝对图像，这样它们就不会干扰图标的居中。

Answer 2

player = new Texture(Gdx.files.internal("data/Sprites/sqr_blue.png"));

Answer 3

将margin value的{{1}}更改为自动，即class .info和margin-left。

margin-right

＆＃13;

.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  color: #fff;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-weight: normal;
  margin: 100px auto;/*Made changes over-here*/
}

＆＃13;

$(document).ready(function() {
    $("#mygallery").justifiedGallery({
        rowHeight : 155,
        lastRow : 'justify',
        margins : 0,
        captions: false
    });
});

＆＃13;

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  background-color: rgba(48, 152, 157, 0.1);
}

.hovereffect img {
  display: block;
  position: relative;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: translateY(45px);
  -ms-transform: translateY(45px);
  transform: translateY(45px);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover h2 {
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}

.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  color: #fff;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-weight: normal;
  margin: 100px auto;
}

.hovereffect:hover a.info {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect a.info:hover {
  /*box-shadow: 0 0 5px #fff;*/
}

＆＃13;

在对齐的画廊布局中的图像中间的中心图标

3 个答案: