Grow your CSS skills. Land your dream job.

list hover problem :S

  • # June 12, 2013 at 1:21 pm

    ok , i have a list with an image when i hover the a `

  • ` it changes color gray to black, also when i hover the image it change border color, the problem is that when i want to hover the image also the `
  • ` get the hover effect , any one that could help me ?

    here is the code

    .circle-list span{
    position: relative;
    display: block;

    *padding: .4em;
    margin: .5em 0 .5em 2.5em;

    color: rgb(134, 130, 130);
    text-decoration: none;
    transition: all .3s ease-out;
    }

    .circle-list span:before{
    content: “”;
    position: absolute;
    left: -3.5em;
    top: 50%;
    margin-top: -1em;
    background: rgb(65, 191, 223);
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
    border-radius:50%;
    }

    .circle-list span:after{
    position: absolute;
    content: ”;
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    transition: all .3s ease-out;
    }

    .circle-list span:hover:after{
    left: -1.2em;
    border-left-color: #fa8072;
    }

    .circle-list span:hover{
    color:black;
    }

    and

    image code

    .imageFeatures {
    float: right;
    width: 150px;
    height: 150px;
    margin-left: 1.5em;
    border: 5px solid #fff;

    overflow: hidden;
    background-color: rgb(255,255,255);
    -webkit-box-shadow: 0 0 5px 2px #aaa;
    -moz-box-shadow: 0 0 5px 2px #aaa;
    box-shadow: 0 0 5px 2px #aaa;
    -webkit-transition: border-color 0.5s;
    -moz-transition: border-color 0.5s;
    -o-transition: border-color 0.5s;
    transition: border-color 0.5s;
    }

    .imageFeatures:hover {
    border-color: rgb(64,186,216);
    }

    .imgFeature {
    display: block;
    height: 100%;
    max-width: 100%;

    }

# June 12, 2013 at 1:23 pm

Could you put the HTML/CSS in Codepen with **working** images especially as there are none showing in your CSS.

# June 12, 2013 at 1:46 pm

Here its the HTLM/CSS in Codepen http://codepen.io/seraphzz/pen/mbrLB

# June 12, 2013 at 1:55 pm

There is some malformed HTML in there…



cannot be a child of a ul…only li are allowed.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".