Anchor Image Hover Effect

Wappler General Need Help
1

When i hover over an image i want some feedback so user can decide whether to actually click it as the image is a hyperlink

Zoom in the image
Make a box appear over the image which has some text in it like “Enter”

something like this
https://miketricking.github.io/bootstrap-image-hover/#wappler-general

How should i do this
What are the UI only options ? I saw “hover” option in Design panel but could not figure out how to use it
If it is to be coded where i can i paste the readymade code like in the link above

2

Paste the ready made code inside the repeat of each image. Not sure if it will work instantly. It might need a bit of fine tuning with dmx-bind:
Also you might need to include more javascript. Depends on how the script that you show in the link works.

3

Oh that sounds too difficult. Can anypne help me with setting hover effects through the design panel

4

To start with copy your desired style choice into your projects style.css file (on the linked site everything under CSS)

Next open the page where you want this effect and copy the html from the site then paste this inside a element like ‘row’ inside your project on the page your images are. If your images are static and not coming from a source like a database this will now all be good (apart from minor css styling issues possibly I had a few after copying this you can use Wappler to make these look nicer)

1 Like
5

WIll try this.

Also , the Design Panel hover effect is working but only on the deployed site and not in local browser, that is why earlier i thought it wasn’t working but it must have been

6

In my tests all I did was

  1. copy the css into my styles folder
  2. Paste the html where I was testing
  3. Edited certain things with the html as the image sizes etc wasn’t looking good in my tests so I set the height to 200px and cover the images things like that.

Then I got this result:

Screen Recording 2021-12-11 at 19.06.45

I will paste this edited column here but note it might just be a conflicting style in my project yours might not need the edited html:

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-3" style="height: 200px;">
                <div class="hovereffect">
                    <img class="img-responsive w-100 h-100" src="/assets/img/architecture-4.jpg" alt="" style="object-fit: cover;">
                    <div class="overlay">
                        <h2>Hover effect 1</h2>
                        <a class="info" href="#">Enter</a>
                    </div>
                </div>
            </div>
1 Like
7

Thanks a lot Sorry-Duh. It’s working now. Wouldn’t have understood how to do it without your explanation.

1 Like