html - 如何使用里面的内容为 div 设置动画？

Question

好的，这就是我想要做的。

绿页里面有div一张图片，文字和背景都是图片，不是制作的CSS。

我想要做的是当鼠标悬停在 上时div，我希望照片在左上角缩小，并且我希望在 div 所在的位置出现一些文本。

所以这就是我到目前为止所做的。

.projectcard {
  position: relative;
  border-radius: 20px;
  margin-bottom: 20px;
}

.projectcard:hover {
  width: 150px;
  height: 150px;
  border-radius: 100px;
}

<!-- Project Card -->
<div class="col-md-4">
  <div class="projectcard wow fadeInLeft">
    <img src="assets/images/projects/traversebg.png" style="border-radius: 20px;" class="imgs">
  </div>
  <div>
    Random Text.
  </div>
</div>
<!-- End Project Card -->

从理论上讲，这应该可以使照片在左上角缩小，但是当div缩小时，它会检测到鼠标离开并再次变满。不知道如何制作它的视频/gif，但它每秒闪烁 50 次。

我的目标是尽可能少地完成它javascript，但我愿意承担任何责任。

有什么建议么？

标签： htmlcss

Answer 1

.projectcard {
  position: relative;
  border-radius: 20px;
  margin-bottom: 20px;
}

projectcard img{
    width:100%;
    
}    

.projectcard:hover img {
  width: 150px;
  height: 150px;
  border-radius: 100px;
  float:left;
  
}

   .projectcard:hover .textTest{
   float:left;
   width:300px
   }

<!-- Project Card -->
<div class="col-md-4">
  <div class="projectcard wow fadeInLeft">
    <img src="assets/images/projects/traversebg.png" style="border-radius: 20px;" class="imgs">
  <div class="textTest">
    Random Text.Random Text.Random Text.Random Text.Random Text.Random Text.Random Text.Random Text.Random Text.Random Text.Random Text.Random Text.Random Text.Random Text.Random Text.
  </div>
  </div>

</div>
<!-- End Project Card -->