Hi

I have created a series of items within k2

In the Item Full Text area i would like to upload an image and then on top of this image overlay some text.

Is it possible to do this and how can i achieve this?

thank you in advance for your help
Caroline

You can do this only by using CSS. You just need to add a class to your image inside your item's full text and a container that will include the text you need for the overlay.
The two elements need to be inside a block <div> element which will have a relative position. Then the text would have an absolute position and a background with opacity to sit over the image.

You need to ask your template developer/provider to help you with this.

thank you - any chance you can provide a few more details

I have created my own template but this is stretching me to say the least, I will need to add this myself but not completely following you. I have got as far as adding the class to the image.

Where do i add/create the container with the text?

and then do i add the info to the css of my core site? as much detail as possible would be a great help if that is ok

thank you
Caroline

I am willing to give you some more details on this but first I need to ask you this:

Why don't you use the K2 Image and need to add an image in the fulltext?

I am using the K2 image for the main egg image but I want to add the additional character image to the side and then insert the text in the speech bubble.

If I save the character image with the speech bubble already written I loose clarity on the text hence wanting to separately type in the text and overlay it over the speech bubble.

I hope that explains my thinking.

thank you in advance for your help
Caroline

You want once a user clicks on the image to get the bubble or you just want it to show like that?

just to show it like that

thank you
Caroline

You can do this with CSS only then.
The only thing that you need to add in your itemFulltext is

<div class="bubbleSpeech">
<p>Your Bubble Text </p>
</div>

Your CSS would be

.bubbleSpeech {background:url(THE JOCKER IMAGE) no-repeat 100% 100%; padding:0 0 0 THE_JOCKER_HEIGHT_IN_PIXELS;}
.bubbleSpeech p {color:TEXT_COLOR;font-weight:bold;background:url(THE_BUBBLE);padding:THE_SPACE_YOU_NEED_IN_PIXELS;}

If you need the bubble to be resized according to the text inside you can add

.bubbleSpeech p { position: relative; background:THE_BACKGROUND_COLOR; }
.bubbleSpeech p:after { top: 100%; left: 75%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(YOUR_COLOR's_RGB, 0); border-top-color:YOUR_COLOR; border-width: 25px; margin-left: -25px; }

thanks and especially for the detailed reply.

I have followed step one of the instructions but i cannot see the feste image - any ideas? The text is coming up which is great.

(i haven't yet uploaded the bubble image)

Below is the link -

www.tastefool.zealouskite.co.uk/index.php/our-produce/seasonal-special

thank you again
Caroline

The path for your image, since you are now using it through CSS background, should be relative to the .css file. If your image is located in the image folder in the root of your site the path should be different than images/image. Try with ../../images/image
Also add a clear:both; in the .bubbleSpeech rule.