Modern Portfolio Pro: Image Hover Change

[James D]

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

[Marcy]

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

[James D]

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

[James D]

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;
}

[Marcy]

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

[Mike Smart]

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