Thanks a lot Armin, it works!
MartinRL
Posts
-
image hover: closing gaps between links/block areas for automatic image positioning -
image hover: closing gaps between links/block areas for automatic image positioningDid so. Thx!
-
image hover: closing gaps between links/block areas for automatic image positioningThanks Armin.
I did this, but the gaps persist. Both with 20px/1.2 as you wrote, and 24px/1.36 which is the actual text format I use. I tried deleting all formatting (see screenshot, left row) as well as keeping the formats set (right row), makes no difference...
Btw, using 20px/1.2 in the css did change the text size, so wrong assignment doesn’t seem to be the issue.
Frankly, a slower fade-in and fade-out of the hover images would help me as much, maybe that’s easier? :-)
-
image hover: closing gaps between links/block areas for automatic image positioningHi!
https://martinrobertlutz.de/index-test/
(password: xyz)So the links in the index have a hovering image thanks to your addon. I have activated the option "don’t hide images when mouse leaves link", only because otherwise, when moving the cursor up and down though the list, it flickers like a stroboscope due to the small gaps (around 12px) between the links. That’s just very unpleasant to look at. Is there a way of somehow closing those gaps? A delayed disappearing or a very slow fade-in and fade-out would also help get rid of the stroboscope, but I have no clue how to change those factors. The default fading time is way too short. Maybe a built-in option in the addon settings would be nice not just for me :-)
If that is not possible, I can deal with the images staying, but then there’s still the issue that when scrolling up the page, the hovering image slides underneath the "mosaic" of images on the top. That’s a cool effect but definitely looks unintentional with this page’s design ;-) So is there a way to block that upper area for the hovering image, maybe tell the addon that it’s not part of the viewport anymore? (I need to keep the option "adjust image position so it is always in viewport" activated because of the links on the bottom of the page.)
Appreciate any help – thanks!
Martin
-
imagehover: making images themselves be a link to the projectAlright, thanks anyway :)
-
imagehover: making images themselves be a link to the projectYes, or even multiplication instead of transparency? Having the images above the text and applying this css to the images:
.blend {
mix-blend-mode: multiply;
}seems like the perfect solution, but as in the gridder there is no built-in way, how can I give the hover images that css class?
If that doesn’t work, I’ll stop bothering you and stick with left half/right half of the page. Dope looking Website you have, btw ;)
Martin
-
imagehover: making images themselves be a link to the projectI had actually tried that, but only now it works. Maybe it was cache-related...
Having the texts over the image is part of the visual appeal, so it would be sweet to have the text frame not "cover" the image link except where the words themselves are. But as I suppose that’s difficult to do, I have now changed the text frame to only half of the page width, so one can at least tap on the right half of the image as a link. Good compromise I think ;)
Have a nice day!
Martin -
imagehover: making images themselves be a link to the projectThanks Armin!
That looks like a neat solution, however it didn’t change anything for me. When I tap on the shown image, nothing happens.
Things I’ve tried, but didn’t help:
- setting „show image on scroll only“ instead of „show image on scroll and hover“ and „put images above all elements“ instead of „put images under all elements“
- closing the tab and safari and rebooting the iphone, plus trying on a different phone, so old cache is not the issue
- updating laytheme and plugins
- turning off all my custom css
Any ideas? :/
-
imagehover: making images themselves be a link to the projectGreat news! Looking forward :)
-
imagehover: making images themselves be a link to the projectHi and thanks for taking the time.
For the phone version of my page, I’m using imagehover with the image set to "fixed and centered" when scrolling, at 90% width. Now, is there a way to make each image be a link to the corresponding project page?
This is the page (still a draft with placeholders at this stage, only the first ten links have an image set to them): http://martinrobertlutz.de/indextest
That would feel much more natural than scrolling to the image you like, and then however tapping on the text link. Strangely though, I couldn’t find that question in the forum yet.
Thanks in advance!
Best, Martin