Я хотел бы создать серию перекрывающихся, выбираемых изображений, похожих на изображения в верхней части этой страницы: https://www.onedrop.org/en/mission/
Есть ли плагин Wordpress, который я могу использовать для этого, или это так?лучше всего написать код с нуля, используя Javascript / CSS?
Вы можете достичь этого, используя CSS position, :hover и z-index
CSS
position
:hover
z-index
Вот скрипка:
.main { position: relative; width: 500px; margin: 0 auto; margin-top: 50px; } .main img { position: absolute; border-radius: 20px; opacity: 0.8; width: 100%; } .main img:first-child { z-index: 4; left: -40px; opacity: 1; } .main img:nth-child(2) { z-index: 3; left: 40px; } .main img:nth-child(3) { z-index: 2; left: 0; top: -50px; } .main img:nth-child(4) { z-index: 1; top: 50px; } .main img:nth-child(2):hover, .main img:nth-child(3):hover, .main img:nth-child(4):hover { z-index: 99; opacity: 1; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="main"> <img src="https://cdn.pixabay.com/photo/2019/05/04/22/41/atomium-4179270_960_720.jpg" /> <img src="https://cdn.pixabay.com/photo/2019/02/25/17/51/kittens-4020199_960_720.jpg" /> <img src="https://cdn.pixabay.com/photo/2015/11/18/15/44/france-1049333_960_720.jpg" /> <img src="https://cdn.pixabay.com/photo/2016/03/17/23/07/abstract-1264071_960_720.png" /> </div> </body> </html>
Примечание: Пожалуйста, настройте изображение width height и positions согласно вашему требованию:)
width
height
positions
Дайте все изображения position: relative и укажите, какое из них впереди (по умолчанию), с помощью z-index.Установите z-index для изменения на hover, чтобы изображение в кадре вышло вперед.
position: relative
hover