Illustratr – Change hover over colour of images on home page

  • Unknown's avatar
    benjamesmills · Member ·

    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: (visible only to logged in users)

  • kathrynwp · Staff ·

    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.

  • The topic ‘Illustratr – Change hover over colour of images on home page’ is closed to new replies.