1. Home
  2. Docs
  3. Hardy
  4. SCSS Structure

SCSS Structure

SCSS Structure of Template

// project-section
            .project-section {
                .single-project {
                    position: relative;
                    z-index: 1;
                    margin-bottom: 30px;

                    img {
                        border-radius: 10px;
                    }

                    &::before {
                        content: "";
                        position: absolute;
                        background-color: var(--main-color-orange);
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0.8;
                        border-radius: 10px;
                        transform: scale(.3);
                        visibility: hidden;
                        transition: all linear 0.2s;
                    }

                    .hover-option {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%) scale(0.5);
                        text-align: center;
                        visibility: hidden;
                        transition: all linear 0.2s;
                        width: 100%;

                        a {
                            display: inline-block;
                            width: 50px;
                            height: 50px;
                            background-color: ivory;
                            font-size: 26px;
                            text-align: center;
                            border-radius: 8px;

                            i {
                                line-height: 50px;
                            }
                        }

                        h4 {
                            font-family: 'Poppins', sans-serif;
                            font-size: 22px;
                            font-weight: 600;
                            text-transform: capitalize;
                            margin-top: 20px;
                            color: #fff;
                        }
                    }

                    &:hover::before {
                        visibility: visible;
                        transform: scale(1);
                    }

                    &:hover .hover-option {
                        visibility: visible;
                        transform: translate(-50%, -50%) scale(1);
                    }
                }
            }
                
Was this article helpful to you? Yes No

How can we help?