Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
Like Tree1Likes
  • 1 Post By ipbr21054

Thread: Two class but mouse over inoperative

  1. #1
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times

    Two class but mouse over inoperative

    Hi,
    I would like to have a insert border show when an image is hovered over.
    Below is the code in use but has no affect on mouse over etc.

    Please could you advise my mistake.

    Url The Attic Banwell
    I have provided part of the HTML where i have added the class along with another "icons border"

    HTML
    Code:
    						<ul class="icons border">
    						<li><a href="mailto:theatticbanwell@gmail.com"><img src="icons/email.png" alt="The Attic Banwell" class="shadow"></a>
                            <a href="https://www.facebook.com/TheAtticBanwell/" target="_new"><img src="icons/facebook.png" alt="The Attic Banwell" class="shadow"></a>
                            <a href="tel:+447749151893"><img src="icons/gerry.png" alt="The Attic Banwell" class="shadow"></a>
                            <a href="tel:+447899827427"><img src="icons/ian.png" alt="The Attic Banwell" class="shadow"></a>
                            </ul>
                          <ul class="googlemap">
                            <li><a href="http://maps.google.com/?q=IVY HOUSE FARM,BS29 6LB" target="new"><img src="icons/find-us.png" alt="The Attic Banwell" width="260" height="65" class="findus" ></a>
            <p><strong>Click Photos's For Info</strong><p/>
    		</ul>
    		</header>
    
    		<!-- Thumbnail -->
    		<section id="thumbnails">
    		<article>
    		<a class="thumbnail" href="images/fulls/WELCOME.jpg"><img src="images/thumbs/WELCOME.jpg" alt="The Attic Banwell Shabby Chic Items" /><figcaption>Welcome</figcaption></a>
    		<h2>WELCOME TO THE ATTIC</h2>
    		<p>Stock added regularly</p>
            </article>
    CSS
    Code:
      #border:hover{
      box-shadow: inset 0 0 0 25px #53a7ea;
    }

  2.  

  3. #2
    Member Matt @ BSH's Avatar
    Join Date
    Jan 2018
    Location
    Liverpool, UK
    Posts
    60
    Member #
    58134
    Liked
    5 times
    Box-shadow doesn't work on the inset of the image unless it's transparent as far as I'm aware.

    Try using outline:

    HTML Code:
        outline: solid 3px #e3145c;
        outline-offset: -10px;

  4. #3
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    HTML ?
    Do you mean CSS

  5. #4
    Member Matt @ BSH's Avatar
    Join Date
    Jan 2018
    Location
    Liverpool, UK
    Posts
    60
    Member #
    58134
    Liked
    5 times
    Quote Originally Posted by ipbr21054 View Post
    HTML ?
    Do you mean CSS
    Yes it's CSS, I've just wrapped it in HTML BBCode by mistake haha.

  6. #5
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    That didnt work or i applied it wrong BUT if you check my page now i have it so when its clicked it works.

    The Attic Banwell

  7. #6
    Member Matt @ BSH's Avatar
    Join Date
    Jan 2018
    Location
    Liverpool, UK
    Posts
    60
    Member #
    58134
    Liked
    5 times
    Quote Originally Posted by ipbr21054 View Post
    That didnt work or i applied it wrong BUT if you check my page now i have it so when its clicked it works.

    The Attic Banwell
    Is the CSS rule like this:

    Code:
    #thumbnails article .thumbnail:hover img {
    outline: solid 3px #fff;
    outline-offset: -10px;
    }

  8. #7
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Hi,
    It is now,ha ha

    Thanks
    Matt @ BSH likes this.

  9. #8
    Member Matt @ BSH's Avatar
    Join Date
    Jan 2018
    Location
    Liverpool, UK
    Posts
    60
    Member #
    58134
    Liked
    5 times
    Not a problem!

  10. #9
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Did you see my other post about the slider ?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:48 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com