Avatar image changes color on mouseover

Help
1

On my webpage, built using Minimal Mistakes, when I hover my mouse over my avatar image, the color changes. Could anyone help me disable this?

My page: https://jhall.github.io/
Others with same “issue”: Personal Website with Minimal Mistakes Jekyll Theme HOWTO - Part II | Cross-Validated

Thank you!

2

It all in _sidebar.scss try to search for Author profile and links. Class author__avatar and the sub class after

1 Like
3

I appreciate the help, but unfortunately, I am still not sure what to do. My entire author__avatar class is:

.author__avatar {
  display: table-cell;
  vertical-align: top;
  width: 36px;
  height: 36px;

  @include breakpoint($large) {
    display: block;
    width: auto;
    height: auto;
  }

  img {
    max-width: 200px;
    border-radius: 0%;

    @include breakpoint($large) {
      padding: 0px;
      border: 0px solid $border-color;
    }
  }
}

There is a sub class after for author__urls, which is:

&:after {
    display: block;
    content: "";
    position: absolute;
    top: -10px;
    left: calc(50% - 10px);
    width: 0;
    border-style: solid;
    border-width: 0 10px 10px;
    border-color: $background-color transparent;
    z-index: 1;

    @include breakpoint($large) {
      display: none;
    }
  }

Is there any further help you are able to provide?

4

really sorry for my short hint for your problem.
let me tell you more about change the hover black affect when your mouse over the avatar pic.
It not only the author__avatar CSS style, but it is also the whole site a href class hover style. So if you want to stop hover your avatar image, simple remove the <a href= on the avatar.

Let me correct this

Step 1. Go to _includes/ author-profile.html
Step 2.

Replace this line

  {% if author.avatar %}
    <div class="author__avatar">
      <a href="{{ author.home | default: '/' | absolute_url }}">
        <img src="{{ author.avatar | relative_url }}" alt="{{ author.name }}" itemprop="image" class="u-photo">
      </a>
    </div>
  {% endif %}

To this

  {% if author.avatar %}
    <div class="author__avatar">
      <!--<a href="{{ author.home | default: '/' | absolute_url }}">-->
        <img src="{{ author.avatar | relative_url }}" alt="{{ author.name }}" itemprop="image" class="u-photo">
      <!--</a>-->
    </div>
  {% endif %}

After this no one can click to avatar, no hover affect.

1 Like
5

I really appreciate your help. This does make the image no longer a link; however, it still changes color when hovering. Any further suggestions?

Thanks again for the help.

6

I found the solution. In _sidebar.css, change “opacity: 0.75” to “opacity: 1”

I appreciate the help.