Enlargement of all slide images before page loading

[costanzatarabella]

Hi!
I was looking for some troubleshooting about the adjustments of my personal blog on Blogspot/Blogger platform.
Here's the source link: https://landdownundercollects.blogspot.com/
I'm using Slick Slider by default template since I have downloaded it at that time.
There's some glitch about the loading of slider preventing its appearance, sorting all the categorized images at a time; then it goes right with the right fade in entry while auto scrolling of the image slides. How can I 'remove' that enlarging preview, only leaving the complete slick slider rightly fading in?
I'm leaving the attachments and codes for visual check below.
Thank you so much for helping.

`/* Slider */
.slick-slider
{
   
    position: relative;
    z-index: 1;
   

    display: block;

    -moz-box-sizing: border-box;
         box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: auto;
    cursor: auto;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: none;

    content: 'none';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: scale(1.3);
          transform: scale(1.3);

    display: none;
}
.slick-slide.slick-loading img
{ 
    -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-animation: cssAnimation 8s 1 ease-in-out forwards;
  animation: cssAnimation 8s 1 ease-in-out forwards;

    display: none;
}
.slick-slide.dragging img
{
    pointer-events: auto;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: visible;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
 }

@keyframes cssAnimation {
  from {
    -webkit-transform: scale(1) translate(0px);
  }
  to {
    -webkit-transform: scale(1.3) translate(0px);
  }
}
@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: scale(1) translate(0px);
  }
  to {
    -webkit-transform: scale(1.3) translate(0px);
  }

}`

[markvantilburg]

This happens mainly because of the way the browser loads these images:

• The images are applied as a background on a div rather than being loaded as actual image elements.
• The image files are much larger than the size at which they are displayed. Make sure to resize them appropriately for the slider.
  Quickest solution would be to resize them so they are the right size and include them using a <img src="image_url">

[costanzatarabella]

This happens mainly because of the way the browser loads these images:

• The images are applied as a background on a div rather than being loaded as actual image elements.
• The image files are much larger than the size at which they are displayed. Make sure to resize them appropriately for the slider.
  Quickest solution would be to resize them so they are the right size and include them using a <img src="image_url">

Hi!
Thank you so much for kind suggestions; I really appreciate.
I'm looking to adjust the parameters as suggested.
Thanks again!