"Enhance Your Website with Creative Image Hover Effects using HTML

I'm looking to add a simple hover effect to the images AboutUsLink.png and AboutUsColourLink.png, but I'm unsure of the process.

Here is the HTML code:

<section class="link1">
    <a href="#SecondLink"><img src="images/LogoAndLinks/AboutUsLink.png"></a>
</section>

And here is the corresponding CSS code:

.link1 {
    height: 100px;
    width: 100px;
    margin: auto;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    margin-top: 35%;
    margin-left: 22%;
    position: absolute;
    z-index: 1;
}
htmlcssimagehover

Answer №1

If you're looking for a CSS fix, you can structure your element in the following way:

<a href="#AnotherLink"><div id="AnotherLink"></div></a>

Then, utilize CSS to define the background of the div

#AnotherLink {
    background-image: url('images/LogoAndLinks/FeatureLink.png');
}

#AnotherLink:hover {
    background-image: url('images/LogoAndLinks/FeatureColourLink.png');
}

Check out this example

Answer №2

<section class="link1">
  <a href="#NewLink">
     <img src="images/LogoAndLinks/AboutUsLink.png" 
          onmouseover="this.src='images/LogoAndLinks/AboutUsHoverLink.png';" 
          onmouseout="this.src='images/LogoAndLinks/AboutUsLink.png';" />
  </a>
</section>

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

Tips on improving a function that verifies the existence of an image used as a CSS background to output a boolean value

I have encountered a challenge while working on a react file-upload component. The issue at hand is relatively simple - I aim to display an icon corresponding to the file extension for each uploaded file. These icons are loaded through css as background im ...

javascriptcssreactjsimageasynchronous

Bootstrap version 5 has a feature where the dropdown menu extends beyond the right side of the screen

I'm facing an issue with the default bootstrap 5 navbar. When I attempt to add a dropdown on the right side, the list of dropdown items extends beyond the screen on the right. You can see the problem here. I've tried the solutions suggested in s ...

htmlcssbootstrap-4bootstrap-5

Displaying the Indian Rupee symbol in PHP

I'm attempting to show the Indian rupee symbol using HTML code ₹ The HTML code is being echoed in PHP and everything seems to be working fine, except that the rupee symbol is not showing up. I've tested using other currency symbols and the ...

phphtml

Unlinked from the main content, the Angular2 Material2 sidenav stands on its

I am in the process of implementing the material2 sidenav component. My goal is to have a standalone, full-height sidebar that smoothly slides in and out without any interference with the rest of the app layout caused by the sidenav-layout. The desired ou ...

cssangularlayoutangular2-material

**Issue Resolved:** Looking to have the form results appear only when a valid input is submitted; otherwise, the

As a newcomer to PHP, SQL, and HTML, I've been learning for around 3 months now. Can someone assist me in achieving the following: I would like my form to display the results table only if a valid search has been submitted, showing only the database r ...

phphtml

Issue with Ionic app on iPhone X not correctly detecting safe areas

Struggling to place a loading element between the top toolbar and bottom tabs on various iPhone models and iOS versions. The challenge arises with iOS 10. Using "margin-top" causes errors, while "padding-top" doesn't work on iPhone X. Is there a CSS s ...

cssionic-frameworkionic3iphone-xsafearealayoutguide

Using Yii2, create a button with an onclick event that executes a JsExpression

I need to submit a form with an array of elements whose number is unknown. class DynamicForm extends Model { /** var string[] */ public elements[]; } In the view where the form submission takes place, I want to include a button that triggers a Ja ...

javascriptphphtmlyii2yii2-advanced-app

Ensure that the height of the div matches the height of the background image

Although I've seen similar questions before, none of the solutions seem to be effective in my case. In this scenario, there's a div class that has a background image set up: #index-box{ border-radius: 20px; background: url('/stati ...

htmlcssbootstrap-4

Is it possible to change the background color of the scrolling page?

Let's say I have 10 different sections, each with a unique background color assigned to them. As the user scrolls down from section 1 through 10, my goal is to dynamically change the body tag's background color based on which section is currentl ...

javascripthtmlcssreactjsnext.js

Dynamic bullseye displayed on a Vis.js network node

I am currently utilizing Vis.js to create network diagrams. I am interested in adding a notification feature where when an AJAX update is received for a specific node, the canvas will move that node to the center (which Vis.js can already do). Following th ...

javascriptjquerycssnode.jschap-links-library

How can I retrieve a PDF from a URL provided by the server using AngularJS?

Is it possible to automatically download a PDF file from a URL received through a $http GET() request from the server? The $http request is triggered by clicking a button on the front-end, and upon successful completion of the request, the URL where the PD ...

javascriptphpangularjshtmllaravel

Arrangements of inputs in HTML

<input name="foo[]" ... > While I have utilized these in the past, I am curious about its official name and whether there is a specific specification for it. Despite my search efforts within the HTML 4.01 Spec, the term "array" seems to be most com ...

phphtmlarraysforms

Grid layout with card tiles similar to Google Plus

I'm looking to develop a scrolling grid with card tiles similar to Google Plus that has three columns. I am currently using Material UI, but I can't seem to find the right functionality for this. I have experimented with the standard Material UI ...

javascriptcssmaterial-designmaterial-uicss-grid

Apply CodeMirror theme and plugins using an HTML attribute

On my website, I have implemented a CodeMirror text area from . <form><textarea id="code" name="code" codemirror-type='lineNumbers: false, styleActiveLine: true, matchBrackets: true;'>CODE HERE</textarea></form> I added ...

javascriptjqueryhtmlcodemirror

Showing the Datepicker from jQuery right in the middle of the screen

Here's the generated code as default: <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper- clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-2" style="width: 34em; position: absolute; left: ...

javascriptjquerycss

Avoid making the check mark disappear in an SVG animation

After perfecting my CSS animation, I have the circle looping around to complete its shape while a check mark fills in the middle with a slight delay. Once both shapes are completed simultaneously, the check mark disappears. The reason for the disappearing ...

csssvgcss-animations

The grid expands to cover the entire width of the browser

Hello everyone, I am a newbie when it comes to JavaScript and CSS. I am in need of a code, whether it be JavaScript or CSS, that will allow me to stretch out a grid layout measuring 5 x 2 along with pictures to completely cover the width of the browser wi ...

javascripthtmlcssdrupal

ng-bind-html is having trouble parsing the HTML correctly and binding it

Here is the code for my controller: myApp.controller('actionEditController', ['$scope', '$stateParams', '$sce',function ($scope, $stateParams, $sce) { $scope.table="<p>OOPSY</p>"; $sc ...

javascripthtmlangularjs

Is there a way for me to update the button text and class to make it toggle-like

Is there a way to switch the button text and class when toggling? Currently, the default settings show a blue button with "Show" text, but upon click it should change to "Hide" with a white button background. <button class="btn exam-int-btn">Show< ...

javascriptjqueryhtmlcssfrontend

A guide to activating tag selection within the DevExtreme tag box

I'm currently utilizing devExtereme within my Angular project. My goal is to enable the selection of text within tags in my tagbox component. Here's what I have implemented: <dx-tag-box [dataSource]="sourves" [value]="value&quo ...

javascripthtmlangulardevextremedevextreme-angular