Architecture & Interior Website Using Elementor | WordPress 2024

419SHARES

Hero Banner Heading CSS

selector{
    min-width: 1200px;
}

@media screen and (max-width: 1300px) and (min-width: 1025px){
    selector .elementor-heading-title{
        font-size: 100px !important;
    }
}

Button Object CSS

selector .elementor-button-content-wrapper:after{
    content: "";
    height: 1px;
    display: inline-block;
    background-color: #fff;
    position: absolute;
    top: 31px;
    margin-left: 40px;
    width: 32px;
    transition: width .6s ease;
}


selector:hover  .elementor-button-content-wrapper:after{
    width: 70px;
}

Gallery Item CSS

selector .box-1, 
selector .box-2{
    opacity: 0 !important;
    transition: all 0.5s ease-out;
}

selector:hover .box-1, 
selector:hover .box-2{
    opacity: 1 !important;
    
}

Gallery Content CSS

selector{
    transform: rotate(-90deg);
    width: 320px;
}

selector:hover .item-2 .elementor-heading-title{
    color: #000;
}

selector:hover .item-1 .elementor-icon-list-text,
selector:hover .item-1 .elementor-icon-list-icon i{
    color: #000;
}

Gallery View CSS

selector:hover .elementor-icon{
    transform: rotate(45deg);
    
}

selector:hover .elementor-icon svg{
    fill: #000 !important;
}

Gallery Item CSS Classes

box-1
box-2
item-1
item-2
icon

Video Button CSS

selector i{
    font-size: 45px;
}

selector:after{
    content: "";
    height: 1px;
    display: inline-block;
    background-color: #fff;
    position: absolute;
    top: 44px;
    margin-left: 280px;
    width: 32px;
    transition: width .6s ease;
}


selector:hover:after{
    width: 100px;
}


@media screen and (max-width: 1023px){
    selector:after{
        top: 75px;
    }
}

@media screen and (max-width: 767px){
    selector:after{
        top: 60px;
        margin-left: 145px;
    }
    selector:hover:after{
    width: 60px;
}
}

Testimonial Hover Effect CSS

selector:hover .box-1 .elementor-heading-title{
        -webkit-text-stroke-color: #fff;
    stroke: #fff;
}

selector:hover .box-1 p{
    color: #fff;
    
}


selector:hover .box-2 .elementor-heading-title,
selector:hover .box-3 .elementor-heading-title{
    color: #fff;
}

selector:hover .box-2 .elementor-divider-separator{
    border-top-color: #fff;
}

Testimonial Quotation Mark

(“ “)

Blog Grid Hover Effect CSS

selector:hover .blog-item{
    background-color: #000!important;
}


selector:hover .blog-item .elementor-icon-list-text, selector:hover .blog-item .elementor-heading-title{
    color: #fff !important;
}

Blog Grid Hover Effect CSS Class

blog-item

Contact Form CSS

selector .elementor-button:after{
    content: "";
    height: 1px;
    display: inline-block;
    background-color: #fff;
    position: absolute;
    top: 33px;
    margin-left: 40px;
    width: 32px;
    transition: width .6s ease;
}



selector .elementor-button:hover:after{
    width: 80px !important;
}


selector .elementor-field-textual:focus {
    box-shadow: inset 0 0 0 0px rgba(0,0,0,.1);
    outline: 0;
}

Body Overflow-X Hidden