頑張った自分です。

私は今WEBデザイナーの勉強をしているけど、

cssでアニメーションをつけていたけど、

レスポンシブデザインだとcssじゃ効率が悪いかなと思って、

 jQuery変えてみた。

<!-- HTML -->

<h3>シルバーピアス</h3>
   <div class="group">
     <div class="prodict">
       <img class="img"src="オリジナル/商品/ピアス/シルバーピアス/アクアマリンしずく.jpg">
     <div class="text"><p><b>アクアマリンの雫ピアス</b></p><p>minne/メルカリ/ラクマ 820円</p><p>creema 840円</p><p>iichi 800円</p>
     </div></div>
   <div class="prodict">
     <img class="img"src="オリジナル/商品/ピアス/シルバーピアス/透明.jpg">
     <div class="text"><p><b>透明なの？</b></p>minne/creema 520円<p></p>
     </div></div>
   <div class="prodict">
     <img class="img"src="オリジナル/商品/ピアス/シルバーピアス/ローズクォーツ雫.jpg">
     <div class="text"><p><b>ローズクォーツのシズク</b></p><p>minne/creema 620円</p>
     </div></div>
   </div>

   <h3>リング</h3>

 <div class="group">
   <div class="prodict">
     <img class="img"src="オリジナル/商品/リング/笑顔.jpg">
     <div class="text">
       <p><b>ガラクタの笑顔</b></p>
       <p>minne 900円</p>
       <p>creema 590円</p>
       <p>iichi 500円</p>
     </div>
     </div>
   </div>
 </main>

<!-- CSS -->

.group{
 display: inline-block;
}

.prodict{
   position: relative;
     overflow: hidden;
 float: left;
 border: solid 1em #d6e9ca;
}

.img{
 position: relative;
 margin: 0 10px;
}

.text{
   position: absolute;
   color:white;
   width: 300px;
   height: 200px;
   margin: 10px;
}

h3{
  background-color:#d6e9ca;
  color:white;
  width: 100%;
}

@media (max-width:1024px) and (min-width:320px) {

  .prodict {
    display: flex;
  }

  .img{
    width: 50%;
  }

  .text{
    width: 50%;
  }
}
 
 
 <!-- jQuery -->

<script>
$(function(){
$('.prodict').hover(
 function(){
   $(this).find('.text').css('background-color','#d6e9ca').animate({
     bottom:"-50"
   });
 },
 function(){
   $(this).find('.text').css('background-color','#d6e9ca').animate({
   bottom:"-200px"
   });
 }
);

});
</script>


​

（HTMLも出した方がいいと思うけど）

※思考回路中でネットにはあげてません。