How do I add an image on hover. In a list. *then* style it afterwords - Photoshop

RichardPeterTargett
November 5, 2015
145 views
0 votes
2 Answers

In my list. Im trying to add an image. Beside to the right of the names on the nav bar. Below you can see a pic of what Im working with, its Photoshoped. Since I dont know how to code it atm.

On hover, Id like it to change.

I tried :

ul li: hover { image: url(images/etc.jpg) ; }

And even if that worked, how would I style the sucker…This is getting too complicated. remember Jedi’s. This is my first site.

Here’s the jsfiddle:

.left-nav-box {
    background-color: #fff;
    border: 2px solid #0B88D2; 
    box-sizing: border-box;
    float: left;   
    height: 1500px;
    margin: 0px;
    position: relative;
    width: 225px;
    
}

.left-nav-box:hover {
    background-color: #fff;
    box-sizing: border-box;
    float: left;   
    height: 1500px;
    margin: 0px;
    opacity: .95;
    width: 225px;
}


#logo-image {
    border: 2px solid #0B88D2;
    margin-left: 10px;
    margin-top: 10px;
}

.left-nav-box img.logo {
    position: absolute;
    left: 20px;
    top: 20px;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
}

.left-nav-box img.top:hover {
    opacity: 0;
}




.left-nav-box ul {
    padding: 0px 5px;
    margin: 0px;
    width: 168px;
    position: relative;
    top: 160px;
}

.left-nav-box ul li{
    border: 1px solid #0B88D2;
    box-sizing: border-box;
    color: #2B5772;
    font-family: 'segoe ui', 'lucida sans unicode', 'lucida grande',       lucida, sans-serif;
    list-style-type: none;
    margin: 5px 5px;
    padding: 10px 10px;
    width: 198px;

}
.left-nav-box ul li:hover {
    border: 1px solid #0B88D2;
    box-sizing: border-box;
    box-shadow: 0px 3px 0px #0B88D2;
    color: #2B5772;
    font-family: 'segoe ui', 'lucida sans unicode', 'lucida grande',       lucida, sans-serif;
    list-style-type: none;
    margin: 5px 5px;
    padding: 10px 10px;
    width: 168px;
}


.left-nav-box ul li:nth-child(1):hover {
/*border-bottom: 5px solid red;*/
    box-shadow: 0px 3px 0px red;
  font-family: 'segoe ui', 'lucida sans unicode', 'lucida grande',       lucida, sans-serif;
    text-align: center;
    color: #EE0060;

}

#tumblr01 {
 border: 1px solid green; 
    text-align: center;
     position: relative;
    top: 160px;
    }

<section id="background-wrapper">
    
    <div class="left-nav-box">
       
      <img src="http://unawakened.net/images/intro.jpg" class="bottom logo" width="180">
            <img src="http://unawakened.net/images/intro.jpg" class="top logo" width="180">
        
    <ul>
        <li>Record</li>
        <li>Home</li>
        <li>Art & Media</li>
        <li>Archive</li>
        <li>Forums</li>
        <li>Social</li>
        <li>Sign Up</li>
        <li>Contact Us</li>
    </ul>
   
        
        
        
        
        
        
        
        
        
  
 
    
     
    </div>

Tags: css html-lists

Answers

- Dragonmon
- November 5, 2015 at 10:45 pm
- 0 votes
0
Here is a jsfiddle for the code below for your reference: https://jsfiddle.net/5ccusmh9/

Below is the code added, and you only need to replace those borders with your background image like background:url("link")
```
.left-nav-box ul li {
    position: relative;
}

.left-nav-box ul li:hover:after {
    position:absolute;
    top: 0;
    right: 10px;
    bottom:0;
    height: 20px;

    // replace theses borders
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;

    content:"";
}
```
Login or Signup to reply.

- ralphm
- November 5, 2015 at 10:46 pm
- 0 votes
0
The basic idea would be something like this:
```
ul li:hover {background: url(images/etc.jpg) no-repeat 100% 50%;}
```
That will make the image/icon appear to the far right of the li on hover. Mind you, the ideal is to load the image in the browser before hovering so there’s no delay, but that’s a slightly different issue.
Login or Signup to reply.