Services customization

The service section, I want the material UI shape that appear when mouse is hovered on the section to remain permanent with or without hover and apply to all the sections in the service. I will be happy if this is achieveable

see screenshot for example


  • Hi 
    Thanks for contacting to us.
    To make hover effect permanently in  service section. 
    Add the below css code  inside the Customizer >>  Additional css box. 

    .services .post {
        background-color: #fff;
        -webkit-transform: translateY(-7px);
        -ms-transform: translateY(-7px);
        transform: translateY(-7px);
        -webkit-box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1);
    .services .post:after, .services .post:before {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);

    Let me know for any confusion.

  • Worked thanks prime. 

    What about here?? i want to do the same
    Screenshot (7).png
    762 x 429 - 21K
  • Hi @swiftspeedtech
    If possible share your website url, So that we can take a look and assist you better.

  • Hi prime, It in maintenance mode and except you are logged you cant see the actual page

    The area displayed in the above screeenshot is the funfact section
    what ccode do i put in additional css to make the hover shape permanent

  • Hi am patiently waiting for your help

  • Hi 
    For this use the below css code inside the  Additional css box.

    @media (max-width: 768px) {
     .funfact-inner{ transform: scale(1); } 

    border: 5px solid rgba(255, 255, 255, 0.7);
    -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.4);
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -o-transform: scale(1.03);
    transform: scale(1.03);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;

    let  me know for any confusion.
  • Worked Thanks there has been a problem on the Page section the text overlapped

  • Hi @swiftspeedtech
    Sure we will assist you. 
    Never bundle multiple query in single thread bz it create complexity to handle better support query.
    So  pls create separate ticket for each query.
    I am closing this ticket.

This discussion has been closed.