Hover over effect in blask theme pictures

• 

  pauladdydesigner · Member · Feb 8, 2018 at 12:25 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I’ve been able to do some customizations via css, like adding a border radius to my images, see here: https://pauladdy.com.

  Now, I want the same circle border radius to appear when we hover over an image. I would also like to modify the background color of when we hover over.

  Can someone help?

  Thanks,

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 8, 2018 at 7:56 pm

  • Copy link

  Hi there, see what you think with this. You can edit the background-color code as desired. You will notice a transition where the color extends out past the edges when you first hover and then shrinks down to the white area. I was thinking of removing that transition, but when I played with it, I kind of liked the effect. See what you think.

  .portfolio-thumbnail a:hover img {
   opacity:.65;
  }
  .portfolio-thumbnail a:hover {
    background-color: #cc0000;
    border-radius: 50%;
  }
  .portfolio-thumbnail a::after {
    bottom: auto;
  }

• 

  pauladdydesigner · Member · Feb 9, 2018 at 2:04 am

  • Copy link

  Hello @thesacredpath,

  Yes, I stumbled upon that effect yesterday, and did want to keep it! I’ve used your code snippets and adapted them to my colours.

  BTW, do you know how to access the four social media icons in the bottom left? I’m now trying to make them have either a white tint color or their brand color. Let me know if you want me to create a new topic for this.

  Thank you for the response,

• 

  thesacredpath · Member · Feb 9, 2018 at 7:58 pm

  • Copy link

  Super, it is looking great.

  For the social icons, if you wish to change the color of all of them to the same color, you can use this.

  .social-links ul a::before {
      color: #cc0000;
  }

  If you are wanting to change each to a different color, then for Blask, we need to use the li element unique CSS class, like this.

  .social-links ul .menu-item-21 a::before {
    color: blue;
  }
  .social-links ul .menu-item-22 a::before {
    color: lime;
  }
  .social-links ul .menu-item-23 a::before {
    color: yellow;
  }
  .social-links ul .menu-item-24 a::before {
    color: purple;
  }

  You can also add a background-color declaration to the above four rules to add a background color to them.

• 

  pauladdydesigner · Member · Feb 10, 2018 at 4:33 am

  • Copy link

  Thats great! I love how its coming along.

  I’ve been able to adjust the first 3 social icons to their brand colours. But for Instagram, I need to apply a gradient to it’s icon. Any idea as to how to do this?

  Also, the icon itself should be updated to their new one, is WordPress going to update it?

  Finally, you are helping me a lot. But, I wish I could help myself more haha! Presently, I am trying to see the elements name and class in Safari’s “View as source” option, “Elements” tab. I cannot see all the available properties and methods for each element. Any tips, web page, blog you recommend I read in order to discover an elements properties?

  Thanks a bundle again!

• 

  kpartica · Member · Feb 12, 2018 at 1:34 am

  • Copy link

  I am trying to change the color of the “hover border” on all images with links on my website http://www.ironcastle.ca , i can not find code

• 

  thesacredpath · Member · Feb 14, 2018 at 10:54 pm

  • Copy link

  Hi @kpartica, it looks like you are using WordPress but you are not hosted here at WordPress.com. These forum are for those hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help directly from the theme author/vendor you bought your theme from, or ask in the volunteer-based WordPress.org forums.

  The differences between WordPress.com and WordPress.org.

• 

  pauladdydesigner · Member · Feb 15, 2018 at 7:10 am

  • Copy link

  Hello @thesacredpath,

  Have you had the chance to look into how to have the instagram icon with a gradient colouring?

• 

  thesacredpath · Member · Feb 15, 2018 at 8:16 pm

  • Copy link

  The instagram logo will at some point be updated, but on some themes, that updated logo may not appear. Some themes us the Genericon icon font, which is not being updated anymore and is depreciated in favor of using an SVG images, and to convert the themes using the icon font to the SVG may not be done for older themes. That’s sort of a round about way of saying “maybe and maybe not on some themes”.

  I looked at the Instagram site and the only logo I can see is still a simplified line drawing: https://help.instagram.com/search/?query=logo.

  If you can get a copy of the logo image, you can use the following to replace the existing logo though. It should be about 20px square, otherwise it will be quite a bit of work to swap it out.

  .social-links ul a[href*="instagram.com"]::before {
  content: url('URL_OF_IMAGE');
  }