The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS list hover problem :S

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #45476

    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;

    .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{


    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%;



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


Here its the HTLM/CSS in Codepen


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)
  • The forum ‘CSS’ is closed to new topics and replies.