jillyspence

Thanks

Ok Jan, but, I just want to know, how to see if the code is in, now that I used Footers and Header plugin. Will somebody answer me on that part here then.

Thanks, the site link, its a broken site. Do you mean coloumns block in the block editor of wordpress.

Thanks, my site is still local on my computer. But, I will try put it up soon, so I can give you a link to it. It will probably be better that way, when I need help.

Thanks, just found out from wordpress beginner, that I can change sidebar from right to left. Do not have a live site yet.
I would like to see though, how to add a new side bar, and have tried the following, but the sidebar is not showing, after doing so.
I put the following in function.php file in a child theme.

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'Homepage Sidebar',
'id' => 'homepage-sidebar',
'description' => 'Appears as the sidebar on the custom homepage',
'before_widget' => '<div style="height: 280px"></div><li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
}

Oh, I see, do you mean, that maybe the theme does not allow for a slideshow. That’s probably why I cant get any image effects to work at all.

It sort of worked, until I put the last css block in. But, the images just went underneath each other instead of next to each other. Is this what you mean.

.img:nth-of-type(1),
img:nth-of-type(3),
img:nth-of-type(3) {
  perspective: 3000px;
  width: 50%;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.image img:nth-of-type(1),
img:nth-of-type(2),
img:nth-of-type(3) {
  transform: rotateX(70deg) rotateZ(-60deg) translate3d(-120px, 0px, 70px);
  box-shadow: -80px 60px 15px 5px rgba(0,0,0,0.4);
  transition: all .4s;
  transform-style: preserve-3d;
}
.img:nth-child(1),
.img:nth-child(2),
.img:nth-child(3):hover {
  transform: rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}

No, soon as I put <div class=”image:nth-child(+n+3)”> then the following happens. Also, as I put </div> after the 3 image codes, then the closing </div> just goes away. It will not let me put that closing div after the third image code, whether I put the closing div after the <figure> element or before.

<figure class="wp-block-gallery columns-3 is-cropped>
<div class=" image:nth-child(-n+3)"="">
<li class=" blocks-gallery-item" =""="">
</li>
<li class="block-gallery-item">
<figure><img class="wp-image-612" src="https://backyardleathercraftcom.local/wp-content/uploads/2021/09/R300-2-1024x779.jpg" alt="" data-id="612" data-full-url="https://backyardleathercraftcom.local/wp-content/uploads/2021/09/R300-2-rotated.jpg" data-link="https://backyardleathercraftcom.local/?attachment_id=612"></figure>
<figure><img class="wp-image-604" src="https://backyardleathercraftcom.local/wp-content/uploads/2021/09/Red-sandals-R300-1024x665.jpg" alt="" data-id="604" data-full-url="https://backyardleathercraftcom.local/wp-content/uploads/2021/09/Red-sandals-R300-scaled.jpg" data-link="https://backyardleathercraftcom.local/?attachment_id=604"></figure>
<ul class="blocks-gallery-grid">
<li class="blocks-gallery-item">
<figure><img class="wp-image-600" src="https://backyardleathercraftcom.local/wp-content/uploads/2021/09/IMG_20210930_110044-1024x672.jpg" alt="" data-id="600" data-full-url="https://backyardleathercraftcom.local/wp-content/uploads/2021/09/IMG_20210930_110044-scaled.jpg" data-link="https://backyardleathercraftcom.local/?attachment_id=600"></figure>
</li>
</ul>
</li>
</figure>

Hi, I have put another image in, putting the action hook in function.php file and it worked, but I would like to change their image to my own image to do this effect if possible. I tried putting my image in place of their image, but it will not display: I put in

Here is the full code with there image.

<div class="container">
  <div class="image">
    <img src="https://pixelcurse.com/wpcontent/uploads/2011/02/minimalist_landscape_8.jpg" class="img" alt="">
  </div>
</div>

* {
  padding: 0;
  margin: 0;
}
.container {
  width: 100%;
  min-height: 100vh;
  background: #333;
}
.image {
  perspective: 3000px;
  width: 50%;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.image img {
  transform: rotateX(70deg) rotateZ(-60deg) translate3d(-120px, 0px, 70px);
  box-shadow: -80px 60px 15px 5px rgba(0,0,0,0.4);
  transition: all .4s;
  transform-style: preserve-3d;
}
.image:hover img {
  transform: rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}

Thanks, I do not have the site live, its local. I will try create another image animation instead, and try again and ask you later, if its alright. Thanks.

Hi, thanks. Well I would like to put this animation effect into my images in wordpress:
I have this shortcode in the visual editor: [gallery=”604″603″583″]

<style>
        h1 {
            font-family: monospace;
            font-size: 2.1em;
            color: #3399FF;
        }
        body {
            padding: 10px;
            background-color: #F4F4F4;
        }
        #imageContainer {
            background-color: #333;
            width: 450px;
            height: 300px;
            overflow: hidden;
            border: 2px #333 solid;
        }
#imageContainer img {
  animation: kenburns 20s infinite;
}

 0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
        transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px);
        opacity: 0;
    }
}

 </style>
</head>
 
<body>
 
    <h1>The Ken Burns Effect in CSS</h1>
 
    <div id="imageContainer">
        <img src=""https://backyardleathercraftcom.local/wp-content/uploads/2021/09/Red-sandals-R300-scaled.jpg" 

data-link="https://backyardleathercraftcom.local/?attachment_id=604" class="wp-image-604"/>
    </div>
 
    <script src="//www.kirupa.com/prefixfree.min.js"></script>
</body>

I apologise, but am a bit confused, because, I thought its a got to do with wordpress, as I am using wordpress, and want to know, how to do this in wordpress. Not in another cms.
Could you please kindly tell me, what forum, I can post and find out the answer to my question
Thanks

Thanks, I don’t seem to receive any replies, when I go there.

Thankyou

thanks