How can i overlay the text?

  • Neipol

    (@neipol)


    11 years, 9 months ago

    Hi,

    I installed Smooth Slider on my blog and i’m triying to put the text over the images of the slider. Now looks like this:

    View post on imgur.com

    And that’s how I would like to show it:

    View post on imgur.com

    There is my CSS:

    .smooth_slider{display: inline-block;}
.smooth_slider{max-width:630px;min-height:400px;background-color:transparent;border:0px solid #359bed;}
.smooth_slider .sldr_title{font-family:Arial,Helvetica,sans-serif, Arial, Helvetica, sans-serif;font-size:20px;font-weight:bold;font-style:normal;color:#000000;}
.smooth_slider .smooth_slideri{max-width:630px;margin:0px 0px 0px 0px;}
.smooth_slider .smooth_slider_thumbnail{float:left;margin:0 10px 0 0px;max-height:600px;border:1px solid #359bed;width:165600px;}
.smooth_slider .smooth_slideri h2{clear:none;line-height:17px;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:bold;font-style:normal;color:#000000;margin:0 0 5px 0;}
.smooth_slider .smooth_slideri h2 a{color:#000000;font-size:14px;font-weight:bold;font-style:normal;}
.smooth_slider .smooth_slideri span{font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:normal;font-style:normal;color:#333333;}
.smooth_slider .smooth_slideri p.more{color:#0092E4;font-family:Arial,Helvetica,sans-serif;font-size:12px;margin-left: 10px;}
.smooth_slider .smooth_next{}
.smooth_slider .smooth_prev{} .smooth_slider .smooth_slider_eshortcode{float:left;margin:0 10px 0 0px;height:600px;border:1px solid #359bed;width:165600px;} .smooth_slider .smooth_more a{color:#0092E4;font-family:Arial,Helvetica,sans-serif;font-size:12px;margin-left: 10px;}

    https://wordpress.org/plugins/smooth-slider/

    Can somebody help me? Thanks!

Viewing 1 replies (of 1 total)
  • ElGallegoVolador

    (@elgallegovolador)

    11 years, 9 months ago

    Yo man,

    I would say that, if you do not wish to modify the slider much, what you could do is put the slider code within a div tag, and then put another div tag at the same level to contain the text you want to overlay. These two divs would then need to be within yet another div. The topmost div should have a position:relative property, while the inner ones would need a position:absolute. To finish, all you need to do is position both inner divs to left:0px, and bottom:0px.

    I believe this should be enough to accomplish what you want to do.

    Best regards from Galicia,
    El Gallego Volador

Viewing 1 replies (of 1 total)

The topic ‘How can i overlay the text?’ is closed to new replies.