Как анимировать 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, но я открыт для любой ответственности.

Есть предложения?

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 -->