[Question and Suggestion] Mouse-over zoom on emotes to display full-size image

[lizardizzle]

I was looking for an extension for Twitch that would make it possible to view the full resolution version of any emote by mousing over them. It would be very useful for allowing for more detailed emotes while keeping the chat thin.

I came across this extension called emoticon zoom on hover on Userstyles.org, but it is years old and I tried installing it and it did nothing.

Is such a thing even possible? And if it is, is it something the end user can do on their own or added to BTTV in the future?

[Aaron128l]

Using the small amount of code in the userstyle you posted I was able to re-create the same effect:

img[class^="emoticon"]:hover {
   	zoom: 200% !important;
}

Hopefully this is something your looking for. Disclaimer: I’m not a CSS Pro so there probably is a better way to handle something like this.

[lizardizzle]

Thanks for the help! It definitely does work (after I changed the URL the userscript starts in from http to https). I mouse over the 28x28 emoticon and it becomes twice the size. However, it’s clear that the emote loaded is actually 28x28, so zooming has little effect.

I tried inspecting the element of a bttv emote and noticed that the src and srcset have the image files in them, and changing the url from having 1x to 2x or 3x changes the emote’s resolution to 56x56 and 112x112. I tried messing around with the script to have it possibly change the src: to 2x or 3x upon hovering, but I know even less than you and just recieved errors and nothing happening.

If on hover, the script changed, let’s say FeelsBadMan from src="//cdn.betterttv.net/emote/566c9fc265dbbdab32ec053b/1x"
to src="//cdn.betterttv.net/emote/566c9fc265dbbdab32ec053b/2x" then the larger image would load, and revert to the smaller after not hovering, right?

Also, I tried doing this manually with FeelsBadMan. The 2x 56x56 image does load after editing it, but even if I change it back to the 1x url, it remains 56x56 in the chat. I’m thinking it has something to do with srcset="//cdn.betterttv.net/emote/566c9fc265dbbdab32ec053b/2x 2x" after the src, but I’m not really sure how any of this works.

Edit: I was just told by a friend that zooming in on a page to 200% will make the resolution of emotes larger. I tried this out and it definitely loads the 56x56 resolution emote after zooming (I am on a 1080p monitor). I read that Twitch uses these larger sizes for those with very high pixel density monitors so that they take up the same amount of size on even larger resolution screens. Perhaps there’s a way to use this hover feature to make the emote think it’s being zoomed by 200% and load the larger image?