How to add image borders on hover ?

[WychWay]

Hello,

I’m currently building a portfolio website for a photographer (using Cento personal theme).  I have been very pleased with the functionality of the drag & drop method of site-building and have now created several galleries of images.  As each of these will be a clickable link through to a Print-On-Demand site I thought it would be useful for each image to have an obvious white border on hover, and looked online for some code to achieve this.

I have found several promising suggestions both here on Weebly community and on Youtube with helpful snippets of code, each of which I have carefully pasted into whichever part of the Weebly Editor is suggested and have also tried pasting it into various parts of the CSS code within Weebly – without success.
I read somewhere along the way that CSS and LESS should not be used within the same site structure, so I’ve also tried again by converting the CSS code snippets to LESS before pasting but none of this seems to work.

 I found one community member asking about a very similar problem and they ultimately discovered that although their changes didn’t show up within Weebly Editor they were visible on the published version of the site.  Unfortunately this was not the case for me.

However, while viewing the site in Google Chrome I have used the Inspect function to find the correct place, amend the code, and successfully managed to achieve the effect I wanted!   Unfortunately I cannot find those same code sections anywhere within Weebly’s html / CSS Editor.

Could someone please tell me how to either transfer those changes that I was able to make in Chrome to my theme within Weebly, or perhaps where within Weebly I should look to make the same change?

[BJ5]

Some code is contained within different CSS or LESS files that are global and not included with the theme itself. You can add your own rules to override them, though. For example, if the class .wsite-image has border:none on the live site and you don't see that in your theme, you can add this to the header/footer code field to override it:

<style>
    .wsite-image
    {
        border:1px solid #000 !important;
    }
</style>

The actual code you add will be different, but the principle is the same. One thing to remember to include is the !important declaration, just to make sure that this rule is applied since you might not know what order will come first.

[Steev]

Thank you so much for this advice BJ  - I'll work on it over the weekend and let you know the outcome!

[Steev]

Hi BJ,

Well, thanks to your information I’ve made huge progress with my border design problem this weekend ! 

Happily the photographer (site owner) has said he likes the resulting white image border but doesn’t need the border increase effect, so I’ve no need to tackle that any further !

For the benefit of anyone else who’s having the similar problems here’s what I did:-

I discovered that it’s necessary to first apply a border to the image from within Weebly Editor (on the theme I’m using there’s only the option for grey or black;  as my site background is black I chose grey here).

I adapted the code that BJ suggested, adding in the code which seemed to be relevant from looking at my site through Google Chrome Inspect) and put this new snippet into the Header Code field on the page’s SEO setting:

<style>

    .wsite-theme-dark .wsite-image-border-thick a img {

    border-width: 5;

    border-style: solid;

    border-color: #444;

    border-color: rgba(255,255,255,255);

    {img {: .5s ease;

   0 0 0 10px #ffffff;

    transition: .5s ease !important;

    } } }: ;

</style>

I’m sure this isn’t the tidiest code ever, but it seems to work so I’ll stick with it!

It’s also important to alter this code so that the border thickness you chose for your image matches the code e.g.  in this snippet it says  ‘border-thick’.

I also found out that these changes don’t show up in Weebly Editor at all – but viewing the site on the free weebly subdomain I can see that my borders are indeed now white !

Many thanks to you BJ – I was completely stuck, but your advice was brilliant!

[BJ5]

Nice! It's always rad when things end up being easier than you think. Thanks for sharing your changes, too!