[QUOTE=eldritchBLAST,Mar 26 2023, 04:28 AM][dohtml]<style>#peridotmood {width:250px;
height:400px;
margin:0 auto;
position:relative;
background: linear-gradient(140deg, #DFEC4A, #F9FBDB, #DFEC4A);
border-radius:20px;
 transition:0.8s ease;
overflow:hidden;}

#peridotmood:hover  {width:500px;}
#peridotmood:hover .profpic{width:450px;
filter: grayscale(100%) brightness(150%) contrast(40%);
object-fit:none;}
#peridotmood:hover .overlay{width:450px;}
#peridotmood:hover .overlay2{width:450px;
opacity:1;}

#peridotmood .extended {width:100%;
}

#peridotmood .profpic {height:360px;
width:200px;
  margin-top:20px;
  border-radius:20px;
  margin-left:25px;
  object-fit:cover;
  filter: grayscale(100%) brightness(200%) contrast(70%);
  transition:0.8s ease;
}

#peridotmood .overlay {height:360px;
width:200px;
position: relative;
  margin-left:25px;
  margin-top:-360px;
  border-radius:20px;
  background:#ECF492;
  mix-blend-mode: multiply;
  transition:0.8s ease;
  
}

#peridotmood .overlay2 {height:360px;
width:200px;
  margin-top:-360px;
  margin-left:25px;
    border-radius:20px;
position:relative;
opacity:0;
transition:0.7s ease;
display: flex;
  flex-direction:column;
  flex-wrap: nowrap;
  justify-content:center;
  align-items:center;
  align-content:center;
   gap: 8px;
overflow:hidden;}

#peridotmood .title {position:relative;
transition:0.7s ease;
line-height:45px;
font-size:40px;
  font-style: italic;
letter-spacing: 4px;
padding:0px;
color:#F9FBDB;
font-family: 'Cinzel', serif;
font-weight:800;}

#peridotmood .pics {position:relative;
transition:0.7s ease;}

#peridotmood .iconpics {width:0px;
height:0px;
position:relative;
transition:0.8s ease;
 filter: grayscale(60%) brightness(200%) contrast(80%);
border-radius:100px;
padding:10px;
object-fit:cover;}

#peridotmood:hover .iconpics{width:120px;
height:120px;}

</style>

<div id="peridotmood">
  <div class="extended">
  <img src="https://i.pinimg.com/originals/ed/34/c7/ed34c7311ed8704008c9895d79e2de12.gif" class="profpic">
    <div class="overlay">    </div>
    <div class="overlay2">
      <div class="pics"><img src="https://i.etsystatic.com/24202844/r/il/d494d0/3166343718/il_fullxfull.3166343718_o27a.jpg" class="iconpics"> <img src="https://cdn.vox-cdn.com/thumbor/IPX6SdmXBKaSiNbO6GCK9H3qxtU=/1400x1400/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/22463672/ShadowandBone_Season1_00_00_40_00R.jpg" class="iconpics"> <img src="https://64.media.tumblr.com/3d60b9ff12b840b150afa2cda79a950b/08ae4e7da0ed46eb-ae/s540x810/68c0e49e42480839c16748c90881e951b56fdb6d.jpg" class="iconpics"></div>
      <div class="title">alina</div>      
      <div class="pics"><img src="https://findthatlocation.com/image/w1066_and_h600_bestv2/g3forV45sl6FyKWsez8syW2oYdo.jpg" class="iconpics"> <img src="https://64.media.tumblr.com/ad6b7743281d27cf93b09b04e083711f/24c06619a358320d-0f/s1280x1920/70cc795976f07769895bd2c61bdb86c0818af733.jpg" class="iconpics"> <img src="https://64.media.tumblr.com/17166499a41a9dd7a7d722f11a9e08f4/f88ea393e71fbcc8-93/s250x250_c1/83056f94103c56a036ee5aa7da08b0f7107f7ce2.jpg" class="iconpics"></div>    
      
      </div>
  </div></div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">[/dohtml][/QUOTE]