Pohybové efekty – 3 obrázky

Nedávno jsem narazila na zajímavý hover efekt, který se mi tak zalíbil, že se stal dokonce součástí mého webu:

Návod

Sice mi nějakou dobu trvalo, než jsem udělala funkční kód, ale tady je:

1. Efekt je na míru dělaný pro struktury v DIVI. Stačí vytvořit řádek (s libovolným počtem sloupců),
2. do jednoho konkrétního sloupce dát pod sebe 3 obrázky (ideálně stejných rozměrů),
3. tomu samému sloupci pak přiřadit třídu “jk-three-moving-images”,
4. o vše ostatní se postárá kód níže, který stačí vložit kamkoli do CSS:

/* hover effect with three images BEGIN */

.jk-three-moving-images {
    position: relative;
    align-items: center;
    justify-content: center;

    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.jk-three-moving-images .et_pb_image{
    box-shadow: 0 10px 70px 0 rgb(103 151 255 / 22%), 0 15px 105px 0 rgb(103 151 255 / 22%);
	box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.15);
    margin: 0;
    padding: 0;
    overflow: hidden;
    transform: rotate(0deg);
    border-radius: 8px;
    background-color: #fff;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.jk-three-moving-images .et_pb_image:first-child {
    width: 200px;
    height: 230px;
    z-index: 3;   
    top: 0px;
}

.jk-three-moving-images .et_pb_image:nth-child(2) {
   left: 15px;
    position: absolute;
    top: 12px;
    width: 180px;
    height: 200px;
    opacity: .8;
    z-index: 2;
}

.jk-three-moving-images .et_pb_image:nth-child(3)  {
    margin-bottom: 0;
    position: absolute;
    top: 12px;
    width: 180px;
    height: 200px;
    opacity: .8;
    z-index: 2;
    right: 15px;
}

.jk-three-moving-images:hover .et_pb_image{
    padding: 0;
    overflow: hidden;
    box-shadow: 0 10px 70px 0 rgb(103 151 255 / 22%), 0 15px 105px 0 rgb(103 151 255 / 22%);
	box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);
}

.jk-three-moving-images:hover .et_pb_image:first-child{
    width: 160px;
}

.jk-three-moving-images:hover .et_pb_image:nth-child(2){
    left: 0;
    transform: rotate(-5deg);
    width: 160px;
    height: 220px;
    opacity: 1;
}

.jk-three-moving-images:hover .et_pb_image:nth-child(3){
    right: 0;
    transform: rotate(5deg);
    width: 160px;
    height: 220px;
    opacity: 1;
}

/* hover effect with three images END */

Zdroje

• https://www.elegantthemes.com/gallery/divi/