Pepsi Landing Page using Elementor | Elementor Pro Tutorial

262SHARES

Thumbnails Centered CSS

selector{
    position: absolute;
    left: 0;
    bottom: -10vh;
    width: 200px;
    transform: translateX(-50%);
}

Thumbnails hover animation CSS

selector{
    cursor: pointer;
    transition: 0.5s;
}
selector:hover{
    transform: translateY(-12px)
}

JavaScript snippet for thumbnails

Thumbnail Custom Attribute

data-jim|image_url

BG Color Custom Attribute

data-color|color_code

Background Transition CSS

.pepsi-section{
    -webkit-transition: all 1s !important;
    transition: all 1s !important;
}

Thumbnail Media Query

@media (max-width:767px){
selector{
    left: 50%;
    bottom: 0;
}
}