Need help? Check out our Support site, then


Illustratr - Change hover over colour of images on home page

  1. I was wondering if it is possible to change the hover over colour of the box that appears when mousing over the images on the main page.
    Ideally I would like to change the colour independently of the main background colour, as well as the opacity and shape.
    Thank You

    The blog I need help with is benjamesmills.com.

  2. You can change the way the red hover box looks by overriding some of the styles in its class:

    .portfolio-thumbnail a:before {
        background: none repeat scroll 0 0 padding-box content-box #E06D5E;
        content: "";
        display: block;
        height: 100%;
        opacity: 0;
        padding: 20px;
        position: absolute;
        top: 0;
        transition: all 250ms ease 0s;
        width: 100%;
        z-index: 1;
    }

    For example, to change the colour and opacity, you can add this to your custom CSS. Change bb00bb (purple) cto whatever colour code you like.

    portfolio-wrapper .portfolio-thumbnail a:before {
        background: none repeat scroll 0 0 padding-box content-box #bb00bb;
        opacity: 0.5;
    }

    Changing the background shape is a little more complicated. Here's a whole site devoted to CSS shapes if you'd like to explore: http://www.css3shapes.com/

    You'll need the Custom Design upgrade to make custom CSS changes.

Topic Closed

This topic has been closed to new replies.

About this Topic