div 占据页面全宽

Question

我已经实现了一个悬停状态，当 div 悬停时，该状态会覆盖文本。

这是代码 -

.desktop-image {
  position: relative;
}

.img_description {
  position: absolute;
  top: -13%;
  bottom: 0;
  left: 0;
  right: 0;
  color: #000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .7s, visibility .7s;
}

.desktop-image:hover .img_description {
  visibility: visible;
  opacity: 1;
}

<div id="images" class="misma">
  <div class="desktop-image">
    <img src="http://via.placeholder.com/200x200">
    <p class="img_description">This image looks super neat.</p>
  </div>
  <div class="mobile-image-misma">
    <img src="http://via.placeholder.com/100x100">
  </div>
</div>

问题 当我检查页面时，我注意到 div.desktop-image占据了屏幕的整个宽度（见图）。

问题 我怎样才能使这个 div 换行到实际图像的大小，以便仅当该图像悬停时才实现悬停状态，而不是悬停在蓝色部分内的任何位置时。

谢谢

Answer 1

默认情况下，div是用 定义的display: block，这意味着它们将占据整个可用宽度。

您可以指定，.desktop-image您display: inline-block;将得到想要的结果。

我给你的建议是使用语义HTML，有 2 个元素专门用于你想要实现的figure和Figcaption。

添加了一个例子。

.desktop-image {
  position: relative;
  display: inline-block;
}

.desktop-image img {
  vertical-align: middle;
}

.img_description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .7s, visibility .7s;
}

.desktop-image:hover .img_description {
  visibility: visible;
  opacity: 1;
}

<div id="images" class="misma">
  <div class="desktop-image">
    <img src="http://via.placeholder.com/200x200">
    <p class="img_description">This image looks super neat.</p>
  </div>
  <div class="mobile-image-misma">
    <img src="http://via.placeholder.com/100x100">
  </div>

  <figure class="desktop-image">
    <img src="http://via.placeholder.com/200x200">
    <figcaption class="img_description">This image looks super neat.</figcaption>
  </figure>
</div>