Search code examples
jqueryhtmlcsscolorbox

How do I display, in a ColorBox popup, a caption AND a title (caption from image 'alt' attribute and title from 'title' attribute

I am trying to display in a ColorBox popup, a caption AND a title (caption from image 'alt' attribute and title from image 'title' attribute). The colorbox is opened when an image is clicked.

Here is an example of what I want to do.

screenshot

The img will be something like the following.

<img typeof="foaf:Image" src="http://localhost:4444/img.jpg" width="336"   height="254" alt="LEGEND / CAPTION balbalblalblalba balbalblalblalba balbalblalblalba" title="TITLE balbalblalblalba balbalblalblalba balbalblalblalba" class="">

Do you have any idea of how can I do that?

Solution

  • You can use a div to which you set the background your image 

    div
{
    height: 616px;
    background:url(https://i.sstatic.net/eXA9b.jpg)
}

    then using the :before and :after selectors you add your text to your desired postion

    div::before { 
    content: "Title"
    position: relative;
    top: 100px;
    background-color: white;
    opacity: 0.5;
}

div::after { 
    content: "Caption";
    position: relative;
    top: 400px;
    background-color: white;
    opacity: 0.5;
}

    change the top to get the text to your desired position and the opacity to get the opacity you need

    full fiddle here http://jsfiddle.net/rsm07fdw/