Going crazy with simple CSS Hover

❓Help
#1

Hi guys!

It has been 5 days now and I have been trying to gather everything available regarding my problem. Its time to ask for help :frowning: I am not that experienced with CSS yet and I am still learning. I hope someone could give me advice! :slight_smile: I would really appreciate it.

I am aware that with Dynalist Pro there is this hover feature when the display images inline is disabled. It works well actually and I cant seem to reverse this when inspecting its elements. This is what I want to achieve with my custom CSS. I want that same hover style.

DYNALIST HOVER VERSION:

image
image859×360

*ISSUE:

What I have done is I want a display inline image (resized to my preference) and when I hover to it, it would give me the preview effect similar to the original hover designed by Dynalist with the exception that the display images inline is enabled. :slight_smile: My issue is that, the hovering works but it doesnt overlap all the text in the backgroun when hovering on the picture with my CSS. There Are tags that seem to appear on top of the hovered image and also it seems to have conflict with the next bullet? its going haywire actually.

MY VERSION:

https://p-VVF5k4e.t2.n0.cdn.getcloudapp.com/items/p9u7nwzY/Screen%20Recording%202020-04-14%20at%2007.16%20PM.gif?v=24a2f6e543a22736ef6c7324cba98689(image larger than 4096KB)

 .node-displayed-image { 
  padding-top: 20px;
  max-width: 80px;
  max-height: 80px;
  vertical-align: top
  border-radius: 20px;
  transition: all .2s ease-in-out; 
}
.node-displayed-image:hover { 
  max-width: 30%;
  max-height: 30%;
  transform: scale(3); 

}

If you’d look at the 2nd GIF, you can see some tags showing and also the picture attached to the next bullet? I cant seem to figure this out.

Also a follow up question, is it possible to have this just by editing the CSS? I designed this, so that its easy to view images attached to dynalist just by hovering. I can replicate this behavior once I figured my first issue, but the next one is the behavior after hovering on a picture when using Dynalist mobile. After hovering on the picture on mobile, it would open the picture through chrome or any mobile browser. Is it possible to disable that behavior? So that the only option is to just hover on the picture?

Thank you in advance guys! I’d appreciate it.

#2

Hi guys, anyone? :frowning:

#3

When hovering the inline image a new class is added called “is-hovering” and a new div container is added which gives you the preview effect.

This is done via JavaScript, to achieve something similar, CSS is not enough we would need to inject some JS for example with a browser extensions like Tampermonkey.

Just enlarging the image is quite easy:

dynalist

.node-displayed-image:hover  {
   transform: scale(1.2);
}

Pls correct me when I am wrong.

#4

This should work:

.node-displayed-image-link {
    z-index: 9999;
}
 .node-displayed-image { 
  padding-top: 20px;
  max-width: 80px;
  max-height: 80px;
  vertical-align: top
  border-radius: 20px;
  transition: all .2s ease-in-out; 
}
.node-displayed-image:hover { 
  max-width: 30%;
  max-height: 30%;
  transform: scale(3); 
}

Not an easy CSS issue – I can definitely understand why it took you 5 days. I hope my answer helps!

2 Likes
#5

Thank you for this code example! Although still have this weird issue after using it, the next image below the one hovered will still display above it, see attached:

image
image1288×811 193 KB

Edit: after some testing I made it work by adding the line below:

.node-displayed-image-link:hover
{ z-index: 19999 !important;}