Image Opacity on Hover- Home page Modern Portfolio Theme

Community Forums Forums General Discussion Image Opacity on Hover- Home page Modern Portfolio Theme

This topic is: resolved

This topic contains 4 replies, has 2 voices, and was last updated by  Beau H 1 year, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #42776

    Beau H
    Participant
    Post count: 2

    I have inserted images (which link to other pages) within the “about” widgetized area on the home page of the Modern Portfolio theme.  I am trying to make the opacity of the images change in the same way the blog and portfolio images change opacity with mouse over.

    http://cactusandhill.com

    I know very little code so any help is greatly appreciated.

    Thanks, Beau

    http://cactusandhill.com
    #43647

    sangfroidweb
    Participant
    Post count: 38

    Hi!

    In style.css, you can add a rule to apply those same styles to the images in the #about section as in #portfolio and #blog as noted below.

    Line 1394 of style.css

    #blog img,
    #portfolio img,
    #about img  {
    margin-bottom: 1.5rem;
    opacity: 0.8;
    }

    Line 1401 of style.css

    #blog img:hover,
    #portfolio img:hover,
    #about img:hover {
    opacity: 1;
    }

    Hope this helps!

    Liz


    Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com :)

    #43770

    Beau H
    Participant
    Post count: 2

    Hi Liz,

    Thanks so much for your response.

    I’ve updated the child theme style.css as per your advice above but still no opacity change!

    The images were inserted into the page via a text widget in the #about section.

    Any other thoughts?

    Thanks

    #43809

    sangfroidweb
    Participant
    Post count: 38

    Hi!

    I am seeing the opacity change on the banner style images in the upper part of the home page (.’Click here to win’ banner, etc.)…so I’m thinking you may just need to clear your cache and refresh your browser to clear the cached version of the stylesheet – ?

    Also, also …I found another place where you should add a rule for the #about section image hovers to add the slight effect that you see when you hover on one of the portfolio images. Around line 115 of style.css,

    a,
    a:visited,
    button,
    input[type="button"],
    input[type="submit"],
    .btn,
    #blog img,
    #portfolio img,
    #about img {
    -moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    }

    Let me know how it goes… :)

    Liz


    Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com :)

    #43936

    Beau H
    Participant
    Post count: 2

    Hi,

    YES! Cleared the cache and made the additional update you recommended.

    Brilliant advice.  It works perfectly!

    Thank You

    Beau

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.