CODE FOR SCROLLING IMAGES WITHIN FRAME!!

This is the code to make images scroll within a frame. Of course, you must adjust the image links, the sizing and the frame in order to personalise it:) If you need any help with this, feel free to comment!

!WARNING! In my experience, this code does NOT work in your interests table. You must put it into either your About Me section or your Who I’d like to meet section! !WARNING!

<style>

/*This is just your frame and should be quite simple to edit*/

.marquee-container {

  width: 100%;

  height: auto;

  margin: 0 auto;

  overflow: hidden;

  white-space: nowrap;

  border: 10px solid transparent;

  border-image-source: url('https://i.postimg.cc/Sx2TF3p6/IMG_1504.png');

  border-image-slice: 30;

  border-image-repeat: repeat;

  box-shadow: 0px 0px 5px #A6DCEF;

  background-image: url('https://i.postimg.cc/tCkFXL9h/IMG-1797.jpg');

  background-size: cover;

  z-index: 999999999;

  position: relative;

}

.marquee-track {

  display: inline-block;

  white-space: nowrap;

  animation: scroll-left 60s linear infinite;

}

.marquee-content {

  display: inline-block;

}

/*This makes an image stop when hovered on*/

.marquee-container:hover .marquee-track {

  animation-play-state: paused;

}

@keyframes scroll-left {

  0% { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}

.stamp-item {

  display: inline-block;

  height: 56px;

  width: 99px;

  background: none;

  vertical-align: top;

  margin-left: 0px;

  line-height: 14px;

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

}

</style>

/*these are your scrolling images!*/

<div class="marquee-container">

  <div class="marquee-track">

    <div class="marquee-content">

      <div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

     <div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

      <div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>    

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

    <div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>        

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

     <div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

     <div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

     <div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

    </div>

/*this is a repetition of your scrolling images so as to create the illusion of endless scrolling!^_^*/

    <div class="marquee-content">

           <div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

     <div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

      <div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>    

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

    <div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>        

<div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

     <div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

     <div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

     <div class="stamp-item" style="background-image: url('YOUR IMAGE URL HERE')"></div>

    </div>    </div>

  </div>

</div>