Text AND image on slider panel? (5 posts)

  1. thedurl
    Posted 2 years ago #

    Not referring to slider images that are behind the text, I'm curious if it's possible to add an image (a CD or book cover) along WITH the text above the slider image.

    The idea is to highlight products on the slider itself.

  2. rdellconsulting
    Posted 2 years ago #

    If you had 3 slider images, would you want 3 extra/different images appended to the 3 slider Titles? Or the same image on all 3 slider images?

    Link to your website would help.

  3. thedurl
    Posted 2 years ago #

    Unique text/images on top of unique slider images. Example: slider image of a guitar; then CD cover art with text describing the CD. Next slider image would be Captain America's shield; then DVD cover and text describing the DVD.

    My website is still "in progress" and I've not made it live at this point.


  4. ElectricFeet
    Posted 2 years ago #

    Well, I've just learned another neat trick today :-)

    If you just want one image next to the main title, for example, you can use the pseudo element :before to add content before the h1.

    Luckily for you, the latest version of Customizr has a different class for each slide, so if you can use Firebug or Chrome/Safari developer tools, you can get the slide number (slide-###) to target each slide.

    Then in your Custom CSS / stylesheet you can add the following:

    .slide-243 .carousel-caption h1:before {
        content: "";
        /* Substitute your image url on next line*/
        background: url(http://lorempixel.com/40/40/);
        position: absolute;
        height:40px; /* Change to image height */
        width:40px; /* Change to image width */
        margin: 0;
        left: 79px;
    .carousel-caption h1 {
        /* Change to image width + some extra space between image and title*/
        padding-left: 50px;


  5. ElectricFeet
    Posted 2 years ago #

    Except it's not responsive. You'll need to play around with the CSS, using ems, rather than pxs. Also using media queries for the smaller viewports.

    This is nearer for a 3-slide slider:

    .slide-123 .carousel-caption h1:before,
    .slide-159 .carousel-caption h1:before,
    .slide-10 .carousel-caption h1:before {
        content: "";
        background: url(http://lorempixel.com/40/40/) no-repeat;
        position: absolute;
        height: 1.5em;
        width: 1.5em;
        /*margin: 0 0 0 5%; 5% on desktops; */
        left: 0;
        top: 0;

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic