I would like to ask how to achieve the following effect, move the mouse over the picture to show a complete text description

as shown in the picture, the effect is that the mouse moves over the picture, the picture is hidden, and the corresponding introduction is displayed. 

<li>
    <div><img src=""/></div>
    <div></div>
</li>
<li>
    <div><img src=""/></div>
    <div></div>
</li>

the method used now is to set the parent element li to position:relative;2 child elements to set absolute positioning position:absolute;, when the mouse moves over the parent element to change the child element zmuri index, the text part is displayed. But where there is a lot of text, it will be blocked by the following li element, which is only the size of the parent element, because the other li positioning is position:relative.

excuse me: how can the text display be completely unblocked when the mouse is moved up?

Javascript html css
Mar.05,2021

is it true that the width of a text box is twice as large as that of a picture box, and should be placed on top of it?
if yes, you need to change the previous layout.
as you said, set li to relative , then the text box inside will be obscured by the following elements.
so you can take a li as a whole row, that is, directly accommodate the first three li elements, and set it to relative . 

<ul>
  <li>
    <div>
      <div class="img-box"></div>
      <div class="info-box"></div>
    </div>
    <div>
      <div class="img-box"></div>
      <div class="info-box"></div>
    </div>
    <div>
      <div class="img-box"></div>
      <div class="info-box last"></div>
    </div>
  </li>
</ul>

<style>
  li {
    position: relative;
    width: 600px;
    height: 200px;
  }
  li>* {
    display: inline-block;
  }
  li .img-box {
    width: 200px;
    height: 200px;
    background: -sharpeee;
  }
  li .info-box {
    position: absolute;
    top: 0;
    width: 400px;
  }
  li .info-box.last {
    right: 0;
  }
</style>

Previous: How can jenkins be accessed through the public network?

Next: Kafka.common.KafkaException: Wrong request type 18

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu