What is that 'cover zoom' in Google Chrome? Can it be implemented in other browsers?

At my better half's job, she uses Google Chrome. I visited her today and hopped on LT. I noticed that the cover on any work page had a little border around it. If you hovered over the cover it would enlarge, just slightly.

It was just a little bit of eye-candy, but nifty anyway. Can this be implemented on other browsers?

It sounds like what happens on Bookmooch (in Firefox), where the data is gotten from Amazon. Maybe it is something similar on LT with Google Chrome?

I checked out Bookmooch. It's not quite like that (the work page zoom was much more subtle), but I liked that Bookmooch effect. I've often wished that you could hover the mouse and see the full-sized cover image, at least on the covers page.

I probably should install Chrome for a screenshot of the effect I'm talking about, but I really don't wanna install Chrome.

FYI, it's the same in Safari (not surprising).

I wonder how difficult it would be to implement across all browsers? I'm not sure I like the idea of features that are only accessible on certain browsers. If there are features that only work on WebKit, or only work on Gecko or whatever, should they be implemented?

The cover zoom is a minor thing. But as far as I know, IE9 still has square tabs. Introduce too many changes and it will change the feel of the site depending on which browser you are on. LT should try to remain consistent across all browsers.

LT doesn't have any features that don't work on some browsers (aside from that really old IE version). Things are going to look different in different browsers though because of the different way they render things. Probably that zoom thing can't be done or can't be done easily in IE.

Someone can correct me if I'm mistaken, but it doesn't seem to me that the cover image quality improves at all on the mouseover "zoom"; it just gets a little larger (and blurrier.)

7> Nope, that's exactly right. It's simply an image zoom.

#6 - LT doesn't have any features that don't work on some browsers

But that is incorrect. The image zoom only works in WebKit browsers like Chrome or Safari. The browsers don't do this on their own. It is something that was programmed by LT that would only work on certain browsers.

The tabs are still square in IE9. It isn't something that only happened in a really old version of IE.

I understand that both of these are very minor. I don't mean to make a mountain out of a molehill.

I'm just saying that too many of these little features can build up and make browsing LT on IE9 a different experience than browsing LT on Safari.

9> You seem to have missed my point that this image zoom isn't a feature, it's more of a decoration. And who says the experience has to be exactly the same on all browsers.

or ?

I didn't miss your point. I just don't see the difference. Feature/decoration/tomato/tomato (that doesn't work so well in type, does it?).

I guess I would rather just see LT as a browser neutral site. If we accept that some features/decorations will work in one browser and not another could other, more important features be programmed that only work in certain browsers? What there is now is nothing. I would just hate to see larger things follow the same path.

Oh yeah, and back to my original RSI: Can we make that cover zoom feature/decoration work on Firefox as well? And IE9? Or would it be a more difficult thing to code for non-WebKit browsers?

I decided to try to replicate the safari/chrome effect and as far as I can tell this works. Just replace these two classes CSS with this:

.workCoverImage {
padding: 4px;
border: 1px solid #DDD;
-webkit-box-shadow: #6A5546 0px 6px 6px;
-webkit-transition: all 0.1s ease-out;
-moz-box-shadow: 0px 6px 6px #6A5546;
}

.workCoverImage:hover {
-webkit-box-shadow: #BAAB9A 0px 12px 15px;
-webkit-transform: scale(1.1);
-moz-box-shadow: #BAAB9A 0px 12px 15px;
-moz-transform: scale(1.1);
}

non-hover:


hover:


This is with FF 3.6.17. The only real difference is that FF 3.6 is lacking the moz-transition to go along with the webkit-transition. But this is extremely minor. And FF 4 adds that, if you wanted to make it work there. As far as IE... well, I have no idea.

Is that something I could do with Stylish?

Here ya go:

http://userstyles.org/styles/47595/librarything-firefox-cover-effect

Hey, very nice. Thank you. I do wonder why it was implemented for some browsers and not others though.

It's possible that whoever wrote that code implemented it before Firefox supported -moz-box-shadow. Or it might be because they didn't spend a long time figuring out how to make common code work the same in both browsers, because if you just try to apply how they did it to Firefox, you wind up with an unsightly outline around the drop shadow. I had to fiddle with it a bit longer to get rid of that outline in a way that worked in both webkit browsers and FF.

At some point they may have decided it just wasn't worth it for an effect that's not particularly necessary and could be considered a little excessive (since it really just blurs the cover a little when zooming it).

18 - ...could be considered a little excessive (since it really just blurs the cover a little when zooming it).

Heh, I have to admit, it is only eye-candy. I've noticed the RSI's I support the most are the ones that have a visual aspect.

I have seen sites that are so overly glitzy they become ugly and too much razzle-dazzle can be an impediment (sort of like what killed MySpace I think). But LT seems to have taken the opposite tack. It's a little drab.

I know others feel very differently. I'm just expressing an opinion here, folks.

I think we need a way to show a book's cover larger, generally.

> 20 Yes yes yes yes.

Please. :)

> 20:

I am currently replacing all my Amazon covers with member-uploaded covers. However, when trying to find the cover for my Irish Harry Potter 1 edition, I could not read the titles on the small covers. As the cover image is veeeery similar to the standard English edition, I couldn't choose one. So I'm going to scan my own book cover.

In all other cases so far I have been able to pick a correct cover (by comparing word lengths for example when the images were similar).

So if there was a cover zoom I could just choose a similar-looking cover, when it's loaded into the left corner, check with zoom, and if it's not correct I can choose another :) I think zooming the covers when in the list makes the page too slow?

20/21> Yes, yes, a thousand times YES.

20> I'd love to see this. It would add more motivation to clean up my book covers.

It's wanted. What's going on with the Irish one? Is the book in Irish or was there an Irish edition of the English text.

No, the book is in Irish (but it's a translation of the English HP1). Here's the Amazon link for the cover: http://www.amazon.com/exec/obidos/ASIN/074757166X/ref=nosim/librarythin08-20
However, I just checked the covers on my other computer (not my netbook with the very small screen, but desktop with large screen) and the titles are all readable now..! So I think it was my netbook screen settings...

So, no problem there anymore :)