Adding small images in between and in line with text (example image attached)

Site URL: https://falkirk.squarespace.com/

Can anyone tell me how to create this same effect ensuring it is responsive? I have tried playing around with html and the code block but I can't get it to quite sit in line with the text. Thank you!

Hi,

What is password?

And hover text/image, what will happen? or nothing?

Hi @tuanphan

They're static images. It's not my site but something I'd like to do.

Password is demo. Thanks!

6 hours ago, ADC1570048538 said:

Hi @tuanphan

They're static images. It's not my site but something I'd like to do.

Password is demo. Thanks!

 

They used Code BLock with this code

<div class="pic-in-text">
<h3 class="word1"> NO CENDER </h3><img src="https://static1.squarespace.com/static/606ef7779f1eed48fbe21e85/t/606f04c092b9210d1dd91719/1617888448974/Stocksy_comp_2507616.jpeg">

  <h3 class="word2"> MEIDO  <img src="https://static1.squarespace.com/static/606ef7779f1eed48fbe21e85/t/606f04ed64151f35a2115d26/1617888493449/1692031-A.jpeg">  </h3><h3> ! DE</h3>
  
<h3 class="word3"><img src="https://static1.squarespace.com/static/606ef7779f1eed48fbe21e85/t/606f04dc04881570f5044aa6/1617888476945/AURSK%C3%98G+Images.jpeg"> PERFERECTIO⏤ </h3>  
  
  <h3 class="word4"> TU NUOVAE 
     <img src="https://static1.squarespace.com/static/606ef7779f1eed48fbe21e85/t/606f05000d9e817fa22f268f/1617888512877/Jewelry_Lifestyle_2_7635-sm.jpeg">  </h3> 
  
    <h3 class="word5"> <img src="https://static1.squarespace.com/static/606ef7779f1eed48fbe21e85/t/606f0595a3500b6186816e99/1617888668687/joeyy-lee-OibaEuEfpeg-unsplash.jpg"> ALACANTINO 
       </h3> 

</div>
<style>
  .pic-in-text h3 {
    display: inline-block !important;
    font-size: 15vh;
    line-height: 100%;
    text-align: center !important;
    margin: 0;
    transition: all .3s ease-in-out;
}
  .pic-in-text img {
    height: 10.5vh;
    width: auto;
    margin-left: 1.6vh;
    margin-right: 4px;
}
</style>

Hi @tuanphan

I found something similar on a website and they've used gif, can you help me out with this? Want to do it for my site. The website I'm talking about : https://mindynguyen.me/

I'm not familiar with codes too, it'll be great if you can help me how to execute this. TIA🙏🏼

They used a Markdown Block with syntax

# Mindy Nguyen is an Art Director &amp; Designer living in sunny <img src="/s/sunny-flowers.png" alt="flowers"> Los Angeles. Her goal is to collaborate <img src="/s/collaborate.gif" alt="handshake"> with nice people and create intentional <img src="/s/chef-kiss.gif" alt="chef kiss"> brands with them. In her free time, you can find her cooking <img src="/s/cooking.gif" alt="hamster chopping"> and creating playlists <img src="/s/vibe.gif" alt="cat dancing">  to vibe to.

See Markdown Image guide: https://support.squarespace.com/hc/en-us/articles/206543587-Markdown-cheat-sheet#toc-images