I'm trying to move the text to the bottom of this image ( it only shows the text when your hover)
Currently, it looks like this
On my website
https://wtxnews.co.uk/
The portfolio widget on WTXNews.co.uk
And ideally, I want it to look like - so the text you see can be at the bottom of that picture and always show
At the moment I am using two blog posts and moving the text upwards to do this, like this image
enter image description here
Thank you in advance
are the two options
You can do both with section and column editing
If image widget -> text widget -> post info widget
In the second option, simply make a bottom margin of -130 in the widget of the image
enter image description here
enter image description here
I use Fancybox3 to display some images and I want to place a text on top of an image. This works when i edit the javascript file with this:
test
With this I have text on the actual image. But this text is big when Fancybox zooms the image in and out. Why is this happening and is there a way to solve this?
I want a simple image download text on the image instead of below the image.
You can use .fancybox-is-scaling class name to hide your text while image is zooming, similarly to this demo - https://codepen.io/fancyapps/pen/ePYNZo.
The script uses CSS transform: scale() for zooming to improve performance, but the side-effect is that everything scales withing the container.
I want to add text on top of a slider-runnable-track in a slider created with . If I could reference the runnable-track element in JavaScript, which doesn't seem possible, I could do it
How can I have text in an HTML document so that it will be “there” in the PDF document (generated via wkhtmltopdf), but invisible when viewed or printed?
Constraints:
The text must appear at the right place, with the right size, because the purpose is to find the text with an automated tool and discover its co-ordinates and size on the page.
The solution must be to do with the text only, because I'm trying to keep this simply about CSS styles. Any “hide it under another element” doesn't address the problem, because there might not be any other element at those co-ordinates.
The solution can't be dependent on what's already on the page; I can't go inspecting the background elements on the page because I can't determine those dynamically. The text should be invisible in its own right.
The text must be findable with an automated tool (e.g. pdfgrep), which means wkhtmltopdf must place the text in the document file.
So a “display: none” style or “opacity: 0” doesn't work, because that makes the text not exist at all in the PDF document.
So I want to have an HTML document, place a text element “FOO” within that document with an inline CSS style, and process it through wkhtmltopdf; then, pdfgrep FOO should find the text, the text location and size should be correct, but the text should not show up in HTML, not appear when the PDF is viewed, and not appear when it's printed.
With a style of color: transparent; the text will be fully transparent on the page, but show up normally for any tool looking in the document for that text.
I.
The PDF syntax supports different "text rendering modes". These lets a PDF creating software (or anybody who authors a PDF with a simple text editor) render any text, regardless the chosen font, as
outlined only,
filled only,
outlined and filled,
neither filled nor outlined (invisible),
plus some more, which deal with clipping.
Here is the illustration from the PDF specification:
However, this is not supported by HTML or CSS (at least AFAIK). So your only option to get it done in a similar way is to...
...either set the background color in HTML to the same as the text color,
...or set the text color to transparent.
Then hope that htmltopdf will translate that into a PDF which represents the same...
II.
The following HTML code (essentially using style="color:transparent") works for me. You'll have to decide whether it fullfills your requirements completely:
<html>
<head></head>
<body>
<div style="color:transparent; background:red; border: 1px dashed currentColor;">
The color of this text is transparent/invisible. <br />
The background of this text is red.
<div style="background:blue; height:9px;"></div>
Above this text is a blue box with a height of 9px. <br />
This block is surrounded by a transparent border.
</div>
</body>
</html>
Then, when opening the PDF I cannot read any text lines, but I can select/mark/highlight them.
When running
pdftotext -layout my.html -
I see the following text:
The color of this text is transparent/invisible.
The background of this text is red.
Above this text is a blue box with a height of 9px.
This block is surrounded by a transparent border.
Make text colored with background color of your PDF (ex. white).
Please tell me if there is enough to put the alt attribute in these settings:
I am trying to add alternative text for images in the slider, but left displayed text.
You can add an alt tag to individual images on specific layers via Attributes. (it will be enough)