• Resolved violasrose

    (@violasrose)


    Hi,

    I have removed the hover effect from the 3 featured page images, however, it left the image too small. How can I increase the size of those images, and make it closer to each other? My page: https://capturedesign.pro

    Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • You took the code to remove the hover effect on customizr code snippets, I presume.
    It looks like this:

    .widget-front.hover .round-div, article.hover .round-div {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    }

    Right?
    Get rid of that, and add this to your custom style.css

    .widget-front .round-div, article .round-div {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
    }

    Then you have to take care of @media queries (for responsiveness). I’ll use the scale value used in the default css.

    @media (max-width: 979px) {
    .widget-front .round-div,
      article .round-div {
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3);
    }

    Should work.
    Maybe this will clarify you how to use media queries also for that other problem you have with the slider.
    Hope this helps.

    @violasrose , I saw you solved. Pleas mark this topic solved, you know when you go in the theme description, you can see how the Support is, so would be nice of you..

    Thread Starter violasrose

    (@violasrose)

    Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Featured page image: Remove hover effect-Keep big size’ is closed to new replies.