Zoom image in titlebar as a "popup"

1

Hello forum,

adding an icon field in the tiddler will display it in titlebar:

grafik
grafik551×165 24.1 KB

Hovering the image in the titlebar with

.tc-titlebar img:hover {
    height: 2em;
    width: 2em;
    zoom: 150%;
}

will also change the height of the titlebar:

grafik
grafik618×257 47.2 KB

How can it be archieved, that only the image will be zoomed as a “popup”?

Thanks for helping
Stefan

2

You could try position:absolute but I have not tested that. You might also try float:left, (note: only for ltr languages) but again, untested.

Your problem is that .tc-titlebar is hosting “flow content” which means it will respond to accommodate changes made to any of its child elements in terms of the space they take up.

Good luck.

3

This doesn’t change the height of the titlebar anymore but moves the text to left:

grafik
grafik721×183 38.8 KB

Edit: I’m using now:

.tc-titlebar img:hover {
    transform: scale(3);
    position: absolute;
    transition: all 0.3s ease-out;
}
4

Add one or more   or   to the text.

5

…didn’t help.

But it is ok for me…

Thanks @CodaCoder

6

What didn’t help?  

7

…didn’t help.

But it is ok for me…

Thanks @CodaCoder

8

Are you saying that    Test Zoom image had absolutely no effect? I don’t believe that.

9

I’m aware that &emsp / &nbsp and others are used in HTML.
I found no solution to use it in my CSS code.