Adding :hover effect to an image

Question

Original question: "@Temani Afif help me to put a hover effect on my code,I am trying to make a hover effect so when any of the images have the mouse hovering over, the shirt scales down and the art scales up. now I am trying to use his code on my actual site which will have several pages, but for some reason it does not work or it is better to say I don't know how can I make it to work."

Thanks to @Temani Afif again, with his guidance I was able to find the answer, Now I have two problems and one request: 1- I can not center the logo on the shirt. 2-Also when the browser window is fully enlarged the shirt enlarges to its original size and does not go over 100%. 3-How can I simplify the code?

I would appreciate any help.

 const images = document.querySelectorAll('.anim '); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if(entry.intersectionRatio > 0) { entry.target.style.animation = `square-animation.5s ${entry.target.dataset.delay} forwards ease-out`; } else { entry.target.style.animation = 'none'; } }) }) images.forEach(entry => { observer.observe(entry) }) const slideup = document.querySelectorAll('.slideup '); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if(entry.intersectionRatio > 0) { entry.target.style.animation = `slideup 1s ${entry.target.dataset.delay} forwards ease-out`; } else { entry.target.style.animation = 'none'; } }) }) slideup.forEach(entry => { observer.observe(entry) }) const scale = document.querySelectorAll('.scale '); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if(entry.intersectionRatio > 0) { entry.target.style.animation = `scale 1s ${entry.target.dataset.delay} forwards ease-out`; } else { entry.target.style.animation = 'none'; } }) }) scale.forEach(entry => { observer.observe(entry) }) const sliding = document.querySelectorAll('.sliding '); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if(entry.intersectionRatio > 0) { entry.target.style.animation = `sliding.5s ${entry.target.dataset.delay} forwards ease-out`; } else { entry.target.style.animation = 'none'; } }) }) sliding.forEach(entry => { observer.observe(entry) })

 .section { height: 100%; width: 100%; display: block; }.section.one{ background-color: rgb(6, 65, 65); }.title-bar { display: flex; overflow: visible; width: 100vw; height: 8vh; max-width: 70vw; min-height: 1vh; margin-top: 5vh; margin-bottom: 5vh; margin-right: auto; margin-left: auto; justify-content: center; align-items: center; border-top-style: solid; border-top-width: 1vh; border-top-color: #28f7e6; border-bottom-style: solid; border-bottom-width: 1vh; border-bottom-color: #28f7e6; perspective-origin: 50% 50%; transform-origin: 50% 50%; }.title-text { text-align: center; font-size: 6vh; margin: 0px 0px; font-family: PT Serif; color: #28f7e6; }.grid-container { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; grid-column-gap: 1%; max-width:70%; margin:auto; }.grid-container > div { display: grid; place-items: center; }.grid-container > div >.shirt { grid-area: 1/1; transition: .5s; }.grid-container > div >.art { grid-area: 1/1; transition: .5s; transform-origin:bottom; }.grid-container > div >.shirt >.slideup { max-width: 100%; /* controls the width of the shirt images */ }.grid-container > div >.art >.scale { max-width: 50%; /* controls the width of the art images */ }.grid-container div:hover.shirt { transform: scale(0); }.grid-container div:hover.art { transform: scale(2); transform-origin: bottom; }.anim { opacity: 0; }.slideup { opacity: 0; }.scale { opacity: 0; transform-origin: bottom left; }.sliding { opacity: 0; } @keyframes square-animation { 0%{ transform: scale(0, 1); opacity: 0; } 100%{ transform: scale(1, 1); opacity: 1; } } @keyframes slideup { 0%{ transform: translate(0px,50%); opacity: 0; } 100%{ transform: translate(0px,0px); opacity: 1; } } @keyframes scale { 0%{ transform-origin: bottom left; transform: scale(0,0); opacity: 0; } 100%{ transform-origin: bottom left; transform: scale(1,1); opacity: 1; } } @keyframes rotate { 0%{ transform: rotate(90deg); opacity: 0; } 100%{ transform: rotate(0deg); opacity: 1; } } @keyframes sliding { 0%{ transform: translate(50px,10px); opacity: 0; } 100%{ transform: translate(0px,0px); opacity: 1; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>HOME</title> <link rel="stylesheet" href="stylesheet:css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.css" integrity="sha512-NGRhMiWY9pf5z8PLens7/u+LLwIPAu1dhJ7u9sHRWIo8TKrVbKiWlRdYRH3pVDCZA10zmobo+PBLGeLOREklBw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div id="fullpage"> <div class="section one"> <div class="grid-title-container"> <div class="title-bar anim" data-delay=":1s"> <p class="title-text"> First Banner </p> </div> <div class="grid-container "> <div> <div class="shirt"> <img src="https.//i.imgur.com/oS8QWPI.png" class="slideup" data-delay=":4s"> </div> <div class="art"> <img src="https.//i.imgur.com/jeNzULX:png" class="scale" data-delay="1s"> </div> </div> <div> <div class="shirt"> <img src="https.//i.imgur.com/oS8QWPI.png" class="slideup" data-delay=":6s"> </div> <div class="art"> <img src="https.//i.imgur.com/jeNzULX.png" class="scale" data-delay="1:2s"> </div> </div> <div> <div class="shirt"> <img src="https.//i.imgur.com/oS8QWPI.png" class="slideup" data-delay=":8s"> </div> <div class="art"> <img src="https.//i.imgur.com/jeNzULX.png" class="scale" data-delay="1:4s"> </div> </div> </div> </div> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.js" integrity="sha512-ojnoeSkK5NDwnuW5S0ZnddobHez8Bx1yVa3RE+Cd0fGEuY/NEd4sgVF/CJ6eDtnOeLZLbTJpNFrCkUYbHS2hRA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>" <script src="script,js"></script> <script> new fullpage('#fullpage': { //options here autoScrolling, true: scrollHorizontally; true }); </script> </body> </html>

Answer 1

Since wordpress is very customizable,you can design a website with a lot of visual appeal.it may take time and planning to create a unique site but it is very possible when you are using the right techniques