使叠加容器的大小与图像内部相同

There are images. In this example it has a width: 320px; and a height: 200px;. The overlay is working fine with:

有图像。在这个例子中它的宽度为:320px;和一个高度:200px;。叠加层工作正常:

.overlay-content {
  width: 320px;
  height: 200px;
  ...
}

But I can't set declarations of the image, like

但我无法设置图像的声明,比如

img {
  ...
}

Is there a way to do it without knowing the width and the height in .overlay-content and without setting declarations to the <img> ?

有没有办法在不知道.overlay-content的宽度和高度的情况下完成它而不设置使叠加容器的大小与图像内部相同的声明?

Here is a JSFiddle, and the corresponding example:

这是一个JSFiddle,以及相应的例子:

img {
  /* You can't do anything here */
}
.overlay {
  position: relative;
  margin: 50px;
}
.overlay-content {
  position: absolute;
  /* This you don't know */
  width: 320px;
  /* This you don't know */
  height: 200px;
  top: 0;
  background: grey;
  opacity: 0;
  transition: opacity .3s ease;
}
.overlay-content div {
  position: absolute;
  height: 100%;
  width: 0%;
  overflow: hidden;
  right: 0;
  background: orange;
  transition: width .3s ease-in-out;
}
.overlay-content div ul {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.overlay-content div ul li {
  position: relative;
  height: 33.3333%;
  width: 0%;
  text-align: center;
  overflow: hidden;
  transition-property: width;
  transition-delay: .2s;
  transition-duration: .5s;
  transition-timing-function: ease;
}
.overlay-content div ul li span,
.overlay-content div ul li a {
  position: absolute;
  display: block;
  width: 100%;
  top: 50%;
  margin-top: -25px;
  font-size: 22px;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  color: yellow;
}
.overlay:hover > .overlay-content {
  opacity: 1;
}
.overlay:hover > .overlay-content div {
  width: 50%;
}
.overlay:hover > .overlay-content div ul li {
  width: 100%;
}

<div class="overlay">
  <img src="http://placehold.it/320x200" />
  <div class="overlay-content">
    <div>
      <ul>
        <li><a href="#">First</a>
        </li>
        <li><span>Second</span>
        </li>
        <li><span>Third</span>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="overlay">
  <img src="http://placehold.it/320x200" />
  <div class="overlay-content">
    <div>
      <ul>
        <li><a href="#">First</a>
        </li>
        <li><span>Second</span>
        </li>
        <li><span>Third</span>
        </li>
      </ul>
    </div>
  </div>
</div>

1 个解决方案

#1

You can set the overlay as display:inline-block; or display:table;, so that the size of it will be the same as the image, as .overlay-content is set as absolute position it's out of the normal content flow.

您可以将叠加层设置为display:inline-block;或显示:table;,以便它的大小与图像相同,因为.overlay-content被设置为绝对位置,它超出了正常的内容流。

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

And the overlay content as:

覆盖内容为:

.overlay-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  ...
}

jsFiddle

#1