When hovering over an image, another image is revealed

<div>
  <a href="#"><img src="images/Informasjon_button.png" width="120px" height="120px" /></a>
</div>
<div>
  <a href="#"><img src="images/Mail_button.png" width="120px" height="120px" /></a>
</div>
<div>
  <a href="#"><img src="images/Facebook_button.png" width="120px" height="120px" /></a>
</div>
<div>
  <a href="#"><img src="images/TLF_button.png" width="120px" height="120px" /></a>
</div>
<div>
  <a href="#"><img src="images/Portfolio_button.png" width="120px" height="120px" /></a>
</div>
</div>

It is necessary to display another image upon hovering over the existing image.

javascriptjquerycsshtml

Answer №1

Remember to assign unique ids to your div elements

For example:

html:

<div id="image1"> <a href="#"> <img src="images/Informasjon_button.png" width="120px" height="120px" /></a><span class="overlay"></span></div>

css:

.image1:hover .overlay {
  position:absolute;
  width: 48px;
  height: 48px;
  z-index: 100;
  background: transparent url('image2.png') no-repeat;
  cursor: pointer;
}

Answer №2

To convert these buttons into images, I recommend utilizing the technique of css sprite.
Essentially, this method involves using hover effects to modify the image itself.
For more information, you can visit http://css-tricks.com/css-sprites/

Goodbye.

*If you found the solution helpful, please consider giving a thumbs up.

Answer №3

<a href="#">
    <div class="alpha"></div> 
</a>
<a href="#">
    <div class="beta"></div>  
 </a>

personalize with style

<style type="text/css">
    .alpha{
       width: 100px;
       height: 100px;
       /*background: url('icn.png') no-repeat;*/
       background-color: #0080FF;
    }
    .beta{
       width: 100px;
       height: 100px;
       /*background: url('icn.png') no-repeat;*/
       background-color: #8000FF;
    }
    .alpha:before{
      content: '';
      width: 100px;
      height: 100px; 
      /*background: url('icn.png') no-repeat;*/
      background-color: #008040;
      position: absolute;
    }
    .beta:before{
       content: '';
      width: 100px;
      height: 100px; 
      /*background: url('icn.png') no-repeat;*/
      background-color: #FF0080;
      position: absolute;
    }
    .alpha:hover:before, .beta:hover:before{
      width: 0px;
      -webkit-animation: custom-animation .2s 1 linear;
    }
       @-webkit-keyframes custom-animation{
       from{width: 100px}
       to{width: 0px;}
    }

</style>

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

Is there a way to overlay a div on a particular line within a p element?

Within this paragraph lies a collection of text encapsulated by a < p > tag. When this content is displayed on the page, it spans across 5 lines. My objective is to creatively style and position a < div > tag in order to highlight a specific li ...

javascriptjqueryhtmlcss

What is the best way to align a div with a fixed width in the center, when it is positioned between two other divs within a parent

I have this HTML (technically JSX) code snippet here: https://i.sstatic.net/jXYz0.png The center div with the class domain-input-parent is supposed to have a fixed width of 400px and stay centered horizontally on the screen. This arrangement ensures that ...

htmlcssreactjsresponsive-design

"Implementing constraints in Postgres using Node.js

Currently, I am struggling with writing a constraint code to handle situations where a user tries to search for an id that does not exist in the database (specifically PostgreSQL). Despite my efforts, the if statement in the code below does not seem to be ...

javascriptnode.jspostgresqlexpressnode-postgres

Control your thumbnails with the powerful iDangerous Swiper feature

Are you new to coding? I'm looking for help on linking thumbnail images to a swiper so that when a thumbnail is clicked, it moves the swiper-container to the corresponding slide. Any ideas or suggestions would be greatly appreciated! Here's an e ...

jqueryhtml

Are the ajaxSend and ajaxStop events in Jquery not functioning properly?

Having trouble getting the ajaxSend and Stop functions to work properly. I understand that these are global variables, but for some reason I am not able to use them as intended. I never receive an alert when trying to use them in my code. I was hoping to ...

ajaxeventsjquery

One jQuery plugin was functioning perfectly, while the other one was failing to work as expected

I am working on a simple HTML file that includes a heading and two empty div elements. <h1>Blablabla.</h1> <div id="div1"></div> <div id="div2"></div> These two divs need to be populated with SVG content generated usin ...

javascriptjquerysvg

Achieving text-overflow: ellipsis functionality with mandatory content following

I have a list containing text and corresponding counts, displayed as follows: +----------------------------+ | Text A (123) | | Some other text (456,789) | +----------------------------+ Due to space limitations in my UI, I need to ensure ...

css

How to precisely position an element using jQuery .wrap method

I am in the process of developing two jQuery functions to enclose gravity form inputs within Bootstrap prepend and append input-group HTML elements. I am attempting to manage the placement of the input HTML content that I am surrounding with the new marku ...

jquerybootstrap-4

The dynamic form functionality is experiencing issues when incorporating ng-container and ng-template

I'm currently working on a dynamic form that fetches form fields from an API. I've attempted to use ng-container & ng-template to reuse the formgroup multiple times, but it's not functioning as anticipated. Interestingly, when I revert b ...

javascriptangulartypescriptangular-reactive-forms

Angular - How child components can communicate with their parent components

I'm struggling to understand how to communicate between components and services. :( Even though I've read and tried a lot, some examples work but I still don't grasp why (?). My goal is to have one parent and two child components: dashboa ...

javascriptangulartypescript

The d3.js Force Directed Graph is not working as expected

I keep encountering an error in the dev console whenever I attempt to run my code. The errors are as follows: Error: missing: 1 3d-force-graph:5:22166 TypeError: r.attributes.position is undefine You can view the live version of the faulty code here: He ...

javascriptd3.jsthree.jsanalyticsvisualization

Unable to submit form with Jquery

Having some trouble with my form submission using Jquery. The submit part of my code seems to be malfunctioning, and I can't pinpoint the issue. <?php if(!isset($_SESSION["useridentity"])){ die(header("Location:index.php")); } ...

javascriptphpjqueryhtml

Combining Multiple Collections in Meteor.js and MongoDB: A Comprehensive Guide

My inventory consists of various items. With an overwhelming number of products, I aim to categorize them for a more efficient organization of my publish/subscribe code (and subsequent updates to templates). Let's say I have 4 separate collections i ...

javascriptmongodbmeteormeteor-blazenosql

"Manipulating a drop-down menu in HTML with data from a MySQL database using PHP

Hello there, I could use some assistance. I am working on a straightforward web application and require help with a specific task. Here's the scenario: I have an HTML form with a single combo box. I would like to populate this combo box with data fro ...

phphtmlmysqlforms

How can I align text to the right in a navbar using Bootstrap 5?

My current navbar setup is as follows: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <div class="collapse navbar-collapse" id="navbarText"> ...

htmlbootstrap-5

jQuery not triggering when selecting items from dropdown list

I used to have a dropdownlist in my HTML with the following code: <select id="customDropDown" name="mydropdown"> <option value="CourseIDFilter"id ="1" class ="choosefilter" >Course ID </option> <option value="CourseNameFilter" i ...

javascriptjqueryhtml

The React modal window stubbornly refuses to close

import c from '../Profile.module.css'; import { useState } from 'react'; import { createPortal } from 'react-dom'; import Modal from '../Modal/Modal'; const TransactionItem = (props) => { const modalRoot = ...

htmlcssreactjs

Using a prop array as v-model in a Vue JS CheckBoxGroup implementation

Struggling to create a reusable CheckBoxGroup component with a prop array as v-model. I checked out the vuejs guide at https://v2.vuejs.org/v2/guide/forms.html#Checkbox which uses the v-model array in the data of the same component. However, this approach ...

javascriptvue.jscheckboxpropv-model

Container items in flexbox that surpass the defined width

Hello, I am facing an issue where my container is exceeding the maximum allowed width of my flex container (with justify space-between). Essentially, I have divided my 3 children into equal parts of 33.33%, but the total width exceeds the limit: Image: ...

cssreactjs

a script in JavaScript that retrieves the selected value from a radio button box

I have an AJAX table where I need to highlight one of the rows with a radio box on the left side. However, I lack proficiency in JavaScript and would like assistance in retrieving the value of the radio box by its ID from this table once it has been select ...

phpjavascriptajax