I love the flexibility and features of the Srcerer stacks but would like to ask if it is possible to enable the extra content to be triggered only via mouse hover on desktops whilst retaining the existing hover features roster?
TIA
Paul
Hi @paul.rowe - unless I am misunderstanding you then there is already the option to do this in the stacks. If you activate the hover options then there is a further option enabled that allows you to ‘reveal content on hover’ (or words to that effect). If that option is selected then any added content is hidden until hovered over.
Hope that helps?
Hi Stuart
Closer examination of the tool-tip reveals that the fade in caption can ONLY be placed at the top of the image - why is this so?
Additionally it would be nice to control the fade-in speed - would that be possible?
Paul
Not at my computer so can’t check the tooltip but I don’t think that is the case. The (taxi) example on the webpage has it at the bottom: https://shakingthehabitual.com/stacks/srcerer/
I’m revamping the stack at the minute so will look at options for timing.
Stuart
I have sussed it as per attached screenshot.
Srcerer is well capable of doing what I wanted - it allows hover to effect a monochrome to colour morph whilst simultaneously triggering a caption box at the base of the image (or at the top is so desired 😀)
Sorry for troubling you with this but hopefully others will see this thread and understand how powerful Srcerer is and why it will become my ‘go to’ image stack of choice - not forgetting the other countless attributes that it has.
Regards
Paul
1 Like
Good stuff. Thanks Paul. 😁
Stuart
Another thought has occurred to me regarding Screener - is their a possibility to include the option to have a circular layer placed over an image which would ‘convert’ a non circular image into one that appears to be circular?
Don’t know that i’d add it to the stack but (if your image is already square) you could add a little css to make it a circle. Add a class to the Srcerer stack (Stack 4 class box) e.g. rounder and then add this to the page css:
.rounder .srcerer-img{
border-radius: 50%
}
Does that do what you need?
1 Like
You shouldn’t add the dot in with the class name so it should just be rounder. Also forgot that Srcerer has it’s own custom class boxes so if you take that dot away and also change the css to just this then it should work fine:
.rounder {
border-radius: 50%
}
Another fine issue resolution - thanks greatly Stuart!!
Paul
1 Like