Zoom image in titlebar as a "popup"

#1

Hello forum,

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

grafik

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

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.