Can’t get 3 images to have effects, will only let me do 1

  • Hi, could somebody please help me. I am trying to put an image effect on 3 top images, but every time, but if I try take away the div element away from the first image, and try put it below all 3 images, then the div element just jumps back to after the first image code.
    However, this did work, when I had no images underneath underneath these 3 images, that I want to make effects with. But, as soon as I put images underneath, then this happens as well. Here is some of my image code, for nearly all my images. But, I just want this effect for the 3 first images. I have put the css here, and the html as well for this effect that I want.

    <div class=”image”>

    * {
  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);
}

    This in my code editor in wordpress

    <figure class="wp-block-gallery columns-3 is-cropped">
<ul class="blocks-gallery-grid">
<li class="blocks-gallery-item">
<div class="image">
<figure><img 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" class="wp-image-612"></figure>
</div></li>
<figure><img 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" class="wp-image-604"></figure>
<li class="blocks-gallery-item">
<figure><img 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" class="wp-image-600"></figure>
</li>
</ul>
</figure>
<p><!-- /wp:gallery --></p>
<p><!--wp:gallery {"ids":[612,604,603],"linkto":"none","className":"image img"} --></p>
<p><!-- wp:gallery {"ids":[1194,1195,1196,615,614],"linkTo":"none","className":"container"} --></p>
<figure class="wp-block-gallery columns-3 is-cropped container">
<ul class="blocks-gallery-grid">
<li class="blocks-gallery-item">
<figure><img src="https://backyardleathercraftcom.local/wp-content/uploads/blackbelt.jpg" alt="" data-id="1194" data-full-url="https://backyardleathercraftcom.local/wp-content/uploads/blackbelt.jpg" data-link="https://backyardleathercraftcom.local/my-products/blackbelt/" class="wp-image-1194"></figure>
</li>
<li class="blocks-gallery-item">
<figure><img src="https://backyardleathercraftcom.local/wp-content/uploads/kiddies-purses-R45-800x506.jpg" alt="" data-id="1195" data-full-url="https://backyardleathercraftcom.local/wp-content/uploads/kiddies-purses-R45-scaled.jpg" data-link="https://backyardleathercraftcom.local/my-products/kiddies-purses-r45/" class="wp-image-1195"></figure>
</li>
<li class="blocks-gallery-item">
<figure><img src="https://backyardleathercraftcom.local/wp-content/uploads/Pea-caps-R200-800x472.jpg" alt="" data-id="1196" data-full-url="https://backyardleathercraftcom.local/wp-content/uploads/Pea-caps-R200-scaled.jpg" data-link="https://backyardleathercraftcom.local/my-products/pea-caps-r200/" class="wp-image-1196"></figure>
</li>
<li class="blocks-gallery-item">
<figure><img src="https://backyardleathercraftcom.local/wp-content/uploads/2021/09/ugg-boots-R1500-1024x782.jpg" alt="" data-id="615" data-full-url="https://backyardleathercraftcom.local/wp-content/uploads/2021/09/ugg-boots-R1500-scaled.jpg" data-link="https://backyardleathercraftcom.local/?attachment_id=615" class="wp-image-615"></figure>
</li>
Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @jillyspence, to apply your CSS to the first 3 matching elements you can use this CSS pseudoselector :nth-child(-n+3).

    Example using your code snippet:

    
.image:nth-child(-n+3) {
  perspective: 3000px;
  width: 50%;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.image:nth-child(-n+3) 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:nth-child(-n+3):hover img {
  transform: rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}

    Let me know if this helps.

    If you are interested you can find more info here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

    Thread Starter jillyspence

    (@jillyspence)

    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>
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Can’t get 3 images to have effects, will only let me do 1’ is closed to new replies.