Question

当有人悬停在图像上方时，我有图像和文本显示在图像的中心。

HTML看起来像这样：

test_string = 'a, b, , c, , , d, , , e, , , , , , , f'
test_string_parts = test_string.split(',')
test_string_parts = [part.strip() for part in test_string_parts if part != ' ']
print ', '.join(test_string_parts)
>>> a, b, c, d, e, f

CSS：

<article>
<div class="entry-content">
<a href="http://www.linktopost.com">
<h3 class="entry-title">Ring #1</h3>
<img width="620" height="387" src="http://i.telegraph.co.uk/multimedia/archive/02725/scotch-whisky_2725818b.jpg" class="aligncenter" alt="Platzhalter_3">
</a>
</div>
</article>

你可以在这里看到它： http://codepen.io/anon/pen/rOXOez

有没有机会不在CSS中使用固定像素值 - 这样悬停效果是有效的，适用于任何图片？在这个例子中，我不得不使用CSS中图片的宽度和高度来实现我想要的效果。

谢谢！

Answer 1

解决方案1：

相对/绝对定位并以transform: translate()

为中心

https://jsfiddle.net/94efk8kz/

article {
  position: relative;
}

.hover-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  color: black;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hover-content h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

解决方案2 ：

Flexbox

https://jsfiddle.net/94efk8kz/1/

article {
  position: relative;
}

img {
  width: 100%;
}

.hover-content {
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  background: white;
  color: black;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

解决方案3

CSS表

https://jsfiddle.net/94efk8kz/2/

.entry-content  a {
  float: left;
  width:30%;
  position: relative;
  height: 100%;
}


.hover-content {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: white;
  color: black;
  opacity: 0;
  bottom: 0;
  right: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}


.v-align {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.hover-content h3 {
  display: table-cell;
  vertical-align: middle;
}

Answer 2

尝试这些更改

Dingo\Api\Provider\LaravelServiceProvider::class

垂直居中显示图像上的文本 - 动态显示

2 个答案: