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 6 of 6
Like Tree1Likes
  • 1 Post By Lylio

Thread: Links using graphics in a list

  1. #1
    Junior Member
    Join Date
    Jun 2013
    Posts
    5
    Member #
    36540
    Liked
    1 times

    Links using graphics in a list

    Hi everyone,

    I am trying to create a list of links using graphics. Like this:

    346xopy.jpg

    I would like the graphic to be the clickable link to the relevant website, and I would like the graphic link brightness to dip to 50% when the mouse hovers over it (using webkit-filter).

    The problem I've had is trying to centre the text underneath the icon, and so far I've only managed by placing a single div around both the graphic and text - but this results in the brightness dip occurring when the mouse touches the text. Here's an example of the code I have so far:

    HTML Code:
    <div class="linkscontainermiddle">
    
    <ul id="socialmedia">
    <li><div class="link"><a href="https://twitter.com/" target="_blank"><img src="img/twitter.png" width="48" height="48" alt="Twitter"></a>Twitter</div></li>
    <li><div class="link"><a href="https://www.facebook.com/" target="_blank"><img src="img/facebook.png" width="48" height="48" alt="Facebook"></a>Facebook</div></li>
    <li><div class="link"><a href="https://www.youtube.com/" target="_blank"><img src="img/youtube.png" width="48" height="48" alt="YouTube"></a>YouTube</div></li>
    </ul>
    
    </div>
    Code:
    .link {
    	height: 68px;
    	width: 88px;
    	transition: 0.5s;
    	padding: 0px;
    }
    
    .link:hover {
    	-webkit-filter: brightness(50%);
    	filter: brightness(50%);
    	ms-filter: brightess(50%);
    
    .linkscontainermiddle {
    	text-align: center;
    	display: inline-block;
    	width: 750px;
    	height: 137px;
    }
    .linkscontainermiddle ul li {
    	display: inline-block;
    	margin-right: 40px;
    	margin-left: 40px;
    }
    Perhaps I shouldn't use a list for this kind of thing? Any advice would be greatly appreciated, thanks.

  2.  

  3. #2
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times

    Links using graphics in a list

    A list is perfect for this. I'd wrap each set in a div too. Be sure to reset the padding on your Ul. I've never used filter, I would stick with opacity. I'd use flex box to layout to three links. Be sure to make your anchors inline-block items.

    If you need more information, don't hesitate to ask.


    My Web Design Business:
    http://brandwebdesign.ca/
    Last edited by brandMatt; Nov 12th, 2015 at 06:37 AM.

    My Web Site:
    brandwebdesign.ca
    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?

  4. #3
    Junior Member
    Join Date
    Jun 2013
    Posts
    5
    Member #
    36540
    Liked
    1 times
    Thanks for the reply brandMatt. Opacity would work too. If you have time, would you (or anyone else reading) be able to briefly show me the code for one icon so the text is centred underneath the icon, but only the graphic is clickable/linked. That's one part I'm having difficulty with. Thanks.

  5. #4
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    Sure I can, but I won't be free until late this afternoon.


    My Web Design Business:
    http://brandwebdesign.ca/

    My Web Site:
    brandwebdesign.ca
    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?

  6. #5
    Junior Member
    Join Date
    Jun 2013
    Posts
    5
    Member #
    36540
    Liked
    1 times
    Great, thanks Matt.
    brandMatt likes this.

  7. #6
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    I had a free minute before I started work, so here it is.
    I decided to do things a little differently than I previously thought.
    There is some stuff I didn't do. The html should be properly marked up for SEO. The css has no colour or general style assigned. I swapped out the img src so I could see a icon.
    I also added a simple transition, I put it on the non-hover so it's a smooth transition both ways.
    html:
    Code:
    <ul id="socialmedia">
    	<li>
    		<a class="link" href="https://twitter.com/" target="_blank">
    			<img src="https://pbs.twimg.com/profile_images/615680132565504000/EIpgSD2K.png" width="48" height="48" alt="Twitter">
    			<span>Twiiter</span>
    		</a>
    	</li>
    	<li>
    		<a class="link" href="https://www.facebook.com/" target="_blank">
    			<img src="https://www.facebook.com/images/fb_icon_325x325.png" width="48" height="48" alt="Facebook">
    			<span>Facebook</span>
    		</a>
    	</li>
    	<li>
    		<a href="https://www.youtube.com/" class="link" target="_blank">
    			<img src="https://s.ytimg.com/yts/img/yt_1200-vfl4C3T0K.png" width="48" height="48" alt="YouTube">
    			<span>YouTube</span>
    		</a>
    	</li>
    </ul>
    css:
    Code:
    #socialmedia {
    	padding:0px !important; /*removes user agent padding (padding-inline-start)*/
    	list-style: none;
    	display:block;
    	text-align: center;
    }
    #socialmedia li {
    	display:inline-block;
    }
    .link {
    	display:inline-block;
    	width:100px;
    	-webkit-transition: opacity 300ms linear;
    	-moz-transition: opacity 300ms linear;
    	-ms-transition: opacity 300ms linear;
    	-o-transition: opacity 300ms linear;
    	transition: opacity 300ms linear;
    }
    .link:hover {
    	opacity:.5;
    	-webkit-transition: opacity 300ms linear;
    	-moz-transition: opacity 300ms linear;
    	-ms-transition: opacity 300ms linear;
    	-o-transition: opacity 300ms linear;
    	transition: opacity 300ms linear;
    }
    .link img {
    	display: block;
    	margin:0px auto;
    }
    .link span {
    	display: block;
    	padding:10px;
    }
    Last edited by brandMatt; Nov 12th, 2015 at 07:59 AM. Reason: added transition

    My Web Site:
    brandwebdesign.ca
    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?


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 07:08 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com