SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question regarding hovering.

    Hi

    So, I have an img inside a <div>, and inside the <div> is also a <span> caption. The caption is absolute positioned so that it appears under the img when hovering that area. The thing is I want the caption to show when hovering over the IMG.

    My code looks like this atm:

    Code HTML4Strict:
    <div>
    <img />
    <span></span>
    </div>

    Code CSS:
    div{
    position: relative;
    display: block;
    height: 200px;
    width: 200px;
    }
     
    img{
    height: 200px;
    width: 200px;
    }
     
    span{
    width: 100%;
    height: auto;
    position: absolute;
    top: 200px;
    left: 0;
    opacity: 0;
    background: #000;
    }
     
    span:hover{
    opacity: 0.7;
    }

    This makes the caption appear, but only when i hover under the IMG where the span is positioned. I want it to appear when hovering the IMG.

    I tried:

    Code CSS:
    img:hover span{
    opacity: 0.7;
    }

    But that didnt work.

    Anyone know how I can do?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Change:

    Code CSS:
    span:hover{
      opacity: 0.7;
    }

    to:

    Code CSS:
    div:hover span{
      opacity: 0.7;
    }

    That should do what you want.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •