• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Modern Portfolio Pro: Image Hover Change

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Modern Portfolio Pro: Image Hover Change

This topic is: resolved

Tagged: #portfolio img:hover, css, genesis, hover, image opacity, Modern Portfolio Pro, opacity

  • This topic has 5 replies, 3 voices, and was last updated 6 years, 4 months ago by Mike Smart.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 19, 2015 at 11:20 am #156811
    James D
    Member

    I am using Modern Portfolio pro for 2 separate sites. One of the things I am not crazy about with the theme is that your feature images on both the blog post and portfolio pages are grayed out slightly, only to change to 100 percent on the roll over.

    I am really struggling to find where to change that in the css.

    I am guessing that it is somewhere around line 470 in the code were we have this tag:

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

    But I have tried to change a couple different parameters to make the change on this bit of code and it does't seem to do anything, so maybe I have the wrong bit of code here.

    Ideally, what I want is to have the feature images have a 1px color border on them that would change on the roll over. However, I can't tell if this is even the correct bit of code to be changing.

    You can view the site here

    http://motionGraphicsAcademy.com
    June 19, 2015 at 12:35 pm #156816
    Marcy
    Participant

    Yes, you're on the right track.

    I think you want a line near 325.
    Find this:

    #blog img, 
    #portfolio img {
          margin-bottom: 16px;
          margin-bottom: 1.6rem;
          opacity: 0.8;
    }

    and change opacity to 1.

    And then you can change the hover lines you listed above to be opacity 0.8 to reverse the effect.


    Marcy | Amethyst Website Design | Twitter

    June 19, 2015 at 2:12 pm #156839
    James D
    Member

    Thanks, that actually worked perfectly and it perfectly reversed the existing system.

    Here is the code now:

    embed, iframe, img, object, video, .wp-caption {
    max-width: 100%;
    }
    img {
    height: auto;
    }
    .featured-content img, .gallery img {
    width: auto; /* IE8 */
    }
    #blog img, #portfolio img {
    /* this tag controls the color and opacitiy of the feature image*/
    margin-bottom: 16px;
    opacity: 1;
    }
    #blog img:hover, #portfolio img:hover {
    /* this tag controls the color and opacitiy of the feature image HOVER*/
    opacity: .6;
    }
    /* Gallery

    If I wanted to add a stroke to the border that would then change color on the hover, this is what I have tried that did not work:

    ##blog img, #portfolio img {
    /* this tag controls the color and opacitiy of the feature image*/
    margin-bottom: 16px;
    opacity: 1;
    border-image-width: 2px;
    border-bottom-color: red;
    }
    #blog img:hover, #portfolio img:hover {
    /* this tag controls the color and opacitiy of the feature image HOVER*/
    opacity: .6;
    border-image-width: 2px;
    border-bottom-color: blue;
    }
    }

    Thanks

    June 19, 2015 at 2:35 pm #156843
    James D
    Member

    Solved it! BAM!

    #blog img, #portfolio img {
    /* this tag controls the color and opacitiy of the feature image*/
    margin-bottom: 16px;
    opacity: 1;
    margin-bottom: 1.6rem;
    border: 4px solid #830E20;
    }
    #blog img:hover, #portfolio img:hover {
    /* this tag controls the color and opacitiy of the feature image HOVER*/
    opacity: .9;
    border-image-width: 2px;
    border: 4px solid #65B5F0;
    }

    June 19, 2015 at 3:27 pm #156847
    Marcy
    Participant

    That's great!

    You can remove the border-image-width from the :hover section. It's being overwritten by
    border: 4px solid #65B5F0;


    Marcy | Amethyst Website Design | Twitter

    November 19, 2016 at 1:47 pm #196366
    Mike Smart
    Member

    Just wanted to say thanks for this thread, and for taking the time to post your solution in such detail. I wanted to do the same thing: reverse the hover effect on the modern portfolio theme.

    I was able to follow along and make the changes in just a few minutes. Much appreciated!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Modern Portfolio Pro: Image Hover Change’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble