当鼠标在大型设备上(图像)上(图像)时，我需要通过图像显示Div，然后在较小的设备上，我需要它们彼此相邻

Question

所以，如果屏幕大(＆lt; 900px(我需要彼此相邻显示多个图像，当用户徘徊在它们上时，我需要一个div才能出现(IT(将包含文本和一个按钮(

，如果设备是中等或较小的(> = 900(，我需要在该图像旁边显示Div。如果只能使用一个Div完成所有操作，那将是很棒的

到目前为止，这是我的HTML

<div class="col col-6 text-center">
    <div class="container">
        <img src="images/commercial.jpg" alt="" class="image">
            <div class="show_this text-center">
                <div class="text-center image_box" style="">
                    <div class="text-center upper title">Title</div>
                    Text of a div 
                    <div class="contact_button"><a href="conact_us.html">conact 
us</a></div>
                </div>
            </div>
    </div>
</div>

这是CSS

.container {
  position: relative;
  width: 100%;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.show_this {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background:rgba(225,225,225,0.85);
}
.container:hover .show_this {
  opacity: 1;
}
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

这是一个解决方案，如果您将鼠标悬停在鼠标中，但是我无法做到，因此DIV在图像

Answer 1

简单@media将帮助您解决它：

...
.show_this {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background: rgba(225,225,225,0.85);
}
@media (min-width: 900px) {
  .show_this {
    position: static;
    opacity: 1;
    height: auto;
  }
}
...