Add a hyperlink to animated graphic

  • Malcolm Wooden

    (@malcolm-wooden)


    5 years, 5 months ago

    I have used this code to have two graphics that fade in and out of each other on hover.

    <div class="hover-wrapper">
<div class="hover-image" style="background-image: url('http://testsite.dtptypes.com/wp-content/uploads/SenticoGridSquare1.png');"><img src="http://testsite.dtptypes.com/wp-content/uploads/SenticoGridSquare2.png"></div>
</div>

    This code is working fine but I want to add a link to another page on the graphics but they don’t seem to accept the link and still work. Is there a way to add a link to the grphics?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author eleopard

    (@eleopard)

    5 years, 5 months ago

    Hi Malcom,

    Thanks for using the Animate It!
    It seems like the issue you have can be fixed using a little custom CSS.

    Can you please send me the actual link to the page where you have this?
    Also, place the link like you want as well. I’ll test it out on my end and will provide you the CSS.

    Thread Starter Malcolm Wooden

    (@malcolm-wooden)

    5 years, 5 months ago

    Thanks for the reply,

    The issue is with the tile graphics on this page which use the Animate It code:
    https://testsite.dtptypes.com#font-tiles

    The first tile needs to have a link to the font page:
    https://testsite.dtptypes.com/home/senticosansdt

    Also I have noticed that the graphics in the tiles are not picking up the retina (@2x) images but they are on the server.

    Plugin Author eleopard

    (@eleopard)

    5 years, 5 months ago

    Hi Malcom,

    Adding an href just above the is working fine for me.
    This structure should work fine:

    <div class="hover-wrapper">
	<div class="hover-image" style="background-image: url('http://testsite.dtptypes.com/wp-content/uploads/SenticoGridSquare1.png');">
		<a href="https://testsite.dtptypes.com/home/senticosansdt" target="_blank">
			<img src="http://testsite.dtptypes.com/wp-content/uploads/SenticoGridSquare2.png">
		</a>
	</div>
</div>

    You can see that the above code works fine here:
    https://www.loom.com/share/7c7e804a4ea34015b33a61e90a65cd5b

    Please feel to let me know if this resolved the issue.
    _____________

    Regarding the retina images, I am not familiar with how it should work on WordPress. However I believe you can use some of the available plugins.
    e.g. https://wordpress.org/plugins/wp-retina-2x/

    Thread Starter Malcolm Wooden

    (@malcolm-wooden)

    5 years, 5 months ago

    Thank you for your excellent reply!

    The link is working fine now.

    We already use ‘Perfect Images + Retina’ by Jordi Meow and I have discovered that the retina image will work when the image contains a class to it’s wp id and display size. I can do this for the background image but I cannot see if it is possible to add it to the top image.

    <div class="hover-wrapper">
	<div class="hover-image" style="background-image: url('http://testsite.dtptypes.com/wp-content/uploads/SenticoGridSquare1.png');">
		<a href="https://testsite.dtptypes.com/home/senticosansdt" target="_blank">
			<img src="http://testsite.dtptypes.com/wp-content/uploads/SenticoGridSquare2.png" class="wp-image-6310" width="274" height="274">
		</a>
	</div>
</div>

    Is it possible to add this class to the top image?
    class="wp-image-6309" width="274" height="274"

    Plugin Author eleopard

    (@eleopard)

    5 years, 5 months ago

    Hi Malcom,

    Apologies for the delayed reply.
    You can add any paramater/class to the or even <div> tag.

    However, for the top DIV, the image is set using the background-image property, so I don’t believe the plugin would work. You can try chaning the DIV to add the tags though:
    <div class="hover-image wp-image-6309" width="274" height="274" style="background-image: url('http://testsite.dtptypes.com/wp-content/uploads/SenticoGridSquare1.png');">

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Add a hyperlink to animated graphic’ is closed to new replies.