"Enhance your website with Wordpress and Divi by adding dynamic image replacement on hover

In search of a code to insert into my project Utilizing images to create a large interactive button

I'm currently using the divi code module within WordPress. I am seeking the ability to have an image switch with another image when hovering over it, and then switch back when no longer hovered over, all with a relatively quick fade effect. (I will provide the image URLs).

Additionally, I would like the image to be clickable and direct users to a specific URL (I will specify this in the code, just let me know where to add it i.e |your url here|).

For mobile devices or touch screen users, I want the first image to change to the second image when tapped on, and then redirect to the same specified URL.

Any assistance on this matter would be greatly appreciated :)

javascriptjqueryhtmlcsswordpress

Answer №1

Check out my codepen: http://codepen.io/tobiasglaus/pen/wzYZAP

background: url('http://www.hutui6.com/data/out/102/66775709-image-wallpapers.jpg');

I have added a background image in the css file, and it changes when you hover over it...

Interestingly, on mobile devices, hovering effects are automatically triggered when tapping, creating the same result.

Answer №2

After some research, I found a way to accomplish this using HTML

    <a class="ds-hover-1" href="(LINK URL)"><img src="(NORMAL IMAGE URL)"onmouseover="this.src='(OVERLAY IMAGE URL)'" onmouseout="this.src='(NORMAL IMAGE URL)'"></a>

Just wrote my first line of HTML! So excited to learn more and figure out how to create a fade effect.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I use jQuery to automatically change the background color of each item to match the color of the next

I have a list with 4 items, each item has a specific background color set in the style attribute. <div class="list"> <div style="background: red"></div> <div style="background: blue"></div> <div style="background: gr ...

javascriptjqueryhtmlcssbackground-color

Tips for organizing an API response based on a specific field

I'm currently in the process of learning Reactjs and I've hit a roadblock with a specific question. I have successfully fetched data using axios from an API endpoint (such as countries with details like population, currencies, region, etc.) and n ...

javascriptreactjs

Animate jQuery Images - Transform and smoothly reveal element

Hey there! I've managed to create a color switcher that gives a sneak peek of different themes. Currently, it simply switches the image source and loads the new image. But I'm curious if it's possible to add a fadeIn effect to enhance the t ...

javascriptjquery

Guide on using Python to save a legitimate HTML page of a YouTube video

When I use requests.get(URL, allow_redirects=True) on websites like Youtube or Reddit, instead of seeing the usual HTML text content that appears when I view the page in a browser, I get a bunch of unexecuted JavaScript. All I really need is the title of ...

pythonhtmlhttpweb-scrapingyoutube

Unraveling JSON data within an AngularJS controller

I'm facing an issue with exposing a field in my AngularJS controller. The problem arises when a JSON 'owner' object is returned by a webservice, containing a field named 'Cave'. If this 'Cave' field has a null, empty, or ...

javascriptjsonangularjs

Populating SVG element with information extracted from JSON

Hi there! I'm dealing with a JSON file that contains data for 249 countries, each with their respective iso codes. My goal is to declare the iso code as a variable named 'iso' and the number of visitors as a variable named 'visitors&apo ...

javascriptjqueryjsonsvg

"Converting a regular JavaScript array into a JSON object: A step-by-step

I have an array that currently looks like this: ['service1', 'service2', 'service3'] and I want to convert it into something like: [ {'id':'1', 'serviceName':'service1'}, {'id& ...

javascriptjqueryarraysjsonobject

Is jest the ideal tool for testing an Angular Library?

I am currently testing an Angular 9 library using Jest. I have added the necessary dependencies for Jest and Typescript in my local library's package.json as shown below: "devDependencies": { "@types/jest": "^25.1.3", "jest": "^25.1.0", ...

javascriptangulartypescriptjestjsangular-library

What is the process for converting a file to base64 encoding, and then uploading it as a multipart file to a backend API using JavaScript

I am working on a project to create a micro-service that can receive base64 encoded data. However, when attempting to send more than 6 MB of data, I encountered the following error message: The multi-part request contains parameterized data (excluding ...

javascriptspringreactjsspring-bootmultipartform-data

Header and Footer with auto-sizing Body that scrolls

My structure consists of a Header, Body, and Footer <div id="my-element"> <div id="header">...</div> <div id="body"> ... </div> <div id="footer">...</div> </div> Currently, the element with the ...

htmlcssflexbox

Troubleshooting: Vue.js not triggering method after watching object

I am in need of watching a prop that is an object, so here is my script: <script> export default { watch:{ filter: { handler:(newval)=> { console.log("I have new data",newval) //this works thi ...

javascriptvue.jsvuejs2watch

Determine if the elements in an array are identical using the reduce() method

I'm looking to compare all values within a single array to determine if they are all equal or not. My current method is working correctly and providing the expected result. var myArray1 = [50, 50, 50, 50, 50]; // all values are the same, should re ...

javascriptarrays

prevent clicking on the div element

I have been attempting for quite some time to disable a click on a specific div element. The purpose behind this is to prevent unauthorized users from triggering certain events that are activated when the div is clicked. In my previous attempt shown below ...

javascriptjqueryhtml

Is there a way to turn off the styling of jQuery mobile throughout the entire div?

I am currently working on a project using jQuery Mobile. On one of the pages, I would like to implement the mobilescroll feature for a select element () I have tried using data-role="none", but it only works on the parent element and not the children. Ad ...

jqueryjquery-mobile

Error message displaying that the argument for the onChange state in a jhipster react form is not assignable as type '{ [x: number]: any; }'

Just diving into the world of React and encountering a bit of a struggle with jsx when it comes to setting state in a form that contains two fields and triggers an ajax call to store a json object (response data) in the state's field3. The code I curr ...

javascriptreactjstypescriptreduxjhipster

Struggling to keep text aligned to the left?

Check out the image at https://i.sstatic.net/Qu7hT.png in my jsfiddle. It remains fixed in its position regardless of the screen width. However, the adjacent text does not behave in the same way. I aim to have the text positioned DIRECTLY next to the htt ...

htmlcsscss-position

Sending dynamic information to bootstrap's modal using props in VueJS

I'm currently working on a personal project and encountering an issue with the bootstrap modal. My project involves a list of projects, each one contained within a card element. The problem arises when I attempt to display details for each project by ...

javascripttwitter-bootstrapvue.jsmodal-dialogvue-props

Unable to interact with a div button using Selenium WebDriver

var webdriver = require('selenium-webdriver'); var driver = new webdriver.Builder(). withCapabilities(webdriver.Capabilities.chrome()). build(); driver.get('https://www.tumblr.com/login'); driver.findElement(webdriver.By.id(&ap ...

javascriptnode.jsseleniumselenium-webdriver

Guide for running an await function consecutively with JavaScript and React

I have the following code snippet: const somePromises = values.map(({variable, value}) => this.post('/api/values/', { variable, value, item: itemId, }) ); await Promise.all(somePromises); if (somecondition) { ...

javascriptreactjs

Efficiently bundling Angular templates using Grunt and Browserify

I am currently utilizing angular1 in conjunction with browserify and grunt to construct my application. At present, browserify only bundles the controllers and retrieves the templates using ng-include through a separate ajax call. Due to the excessive amo ...

javascriptangularjsgruntjsgrunt-contrib-concat