Forums

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

Home Forums CSS [Solved] Partially hide text behind a div box

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #200307
    Vaida
    Participant

    The question I have is that I have a box of text overlapped by its title, and I wish to hide the text that goes behind said title until it is scrolled down.

    Basically, it looks like this:

    http://i.imgur.com/yJWLrEZ.png

    But I want something like this:

    http://i.imgur.com/QA6DQDh.png

    Is there a way to do this? Thanks in advance.

    The code I’m using:

    .box
    {width: 200px;
    background-color: #3d0909;
    padding-top: 4px;
    padding-bottom: 4px;
    font-family: Arial;
    font-size: 20px;
    color: #ffffff;
    letter-spacing: 2px;
    text-align: center;
    margin-top: -25px;
    }

    .text
    {width: 480px;
    height 195px;
    background-color: #fafafa;
    border: 2px solid #3D0909;
    text-align: justify;
    padding: 5px;
    font-family: Arial;
    font-size: 11px;
    font-color: #000000;
    overflow: auto;
    }

    #200308
    MattDiMu
    Participant

    position: relative;
    z-index: 1;

    will probably help, but I’d like to see a Codepen of your code first.

    #200310
    Vaida
    Participant

    Totally did the trick. Thank you!

    #200311
    Paulie_D
    Member

    Aren’t those two images the same?

    And we’d definitely need a demo to help further.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.