Pure CSS realizes the mouse hover image rises to display the description

foreword

When we want to place some text content on the picture, we find that no matter how we place it, either the picture will affect the look and feel of the text, or the text will block the details of the picture, so how can we see both the details of the picture and the details of the picture? What about text descriptions? Let's take a look together below.

---

achieve effect

---

Implementation ideas

We need to set the relative positioning of the outer box, and set the absolute positioning of its sub-boxes to form a child-like relationship. When we touch the picture, we can use bottomthe property transition.

---

full source code

<template>
  <div class="parentBox">
    <div class="imgBox">
      <img src="https://i.postimg.cc/4xxZNsL6/1677486088618.png">
    </div>
    <div class="contantBox">详细内容</div>
  </div>
</template>
<style scoped>
.parentBox {
    
    
  box-shadow: 2px 2px 8px -1px cornflowerblue;
  width: 200px;
  height: 200px;
  position: relative;
  cursor: pointer;
}

.imgBox {
    
    
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 20;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  bottom: 0;
}
img {
    
    
  width: 100%;
  height: 100%;
}

.parentBox:hover .imgBox {
    
    
  bottom: 60px;
}

.contantBox {
    
    
  padding: 4px;
  color: white;
  width: 100%;
  height: 60px;
  background: cornflowerblue;
  position: absolute;
  bottom: 0;
}
</style>