Transform the image background on mouse hover using CSS

On my php page, I am dynamically visualizing thumbnails. To ensure that they are all the same size, I use the following method:

<a class="zoom" href="...">
<img src="thumb/default.png" width="130" style="background-image:url(thumb/<?php echo $images_jpg;?>);" class="centered" />
</a>

CSS

img.centered {
background-repeat: no-repeat;
background-position: center center;
}

/* 1 attempt */
a.zoom:hover {
background-image: url(thumb/zoom.jpg);
}

/* 2 attempt */
a.zoom img:hover {
background-image: url(thumb/zoom.jpg);
}

I am trying to display a different image on hover event, but it does not seem to work. Can anyone provide guidance on how to achieve this? Thank you.

css

Answer №1

You might consider approaching it in this manner.

HTML:

<div class="image" style="background-image:url(http://www.customsite.com/pictures/header.jpg);">
    <div class="overlay"></div>
</div>

CSS:

.image {
    width: 200px;
    height: 200px;
    border: 1px solid;
}
.overlay {
    width: 100%;
    height: 100%;
}
.overlay:hover {
    background: url(http://examplewebsite.com/images/random.jpg);
}

Here, we have the image fetched through PHP displayed on top as a div. The overlay is nested inside, containing the image to be shown when hovered over by a user. By setting the width and height to 100%, it covers the parent div completely while triggering the hover effect.

VIEW DEMO

Answer №2

Your illustration demonstrates how the <img> consistently goes on top of the <a> background image. To address this issue, you could potentially conceal the image when hovering over it. However, some might find this solution unappealing ;)

a.zoom:hover {
    background-image: url(thumb/zoom.jpg);
}

a.zoom:hover img
{
   opacitiy: 0;
}

Answer №3

give this a shot

<img class="centered" src="thumb/default.png"/>

also use jquery

$(".centered").attr("src","another.jpg");

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

Determine the position of an element in relation to a specific ancestor using JavaScript

Let's consider the following example of HTML code: <div id="site_header_container" class="site_bar_container"> <div id="site_header"> <div id="header_logo_container"> <a class="sliced" id="header_ ...

javascripthtmlcss

Are you ready to create a Modal Factory?

For a while now, I have been utilizing modals in various front-end frameworks to communicate with users in my applications. Typically, the process involves defining the modal's html and then rendering it through a click event. As my apps continue to ...

javascriptjqueryhtmlcss

What is the best method for incorporating a YouTube embedded video into an image carousel using HTML and CSS?

I'm encountering an issue with my product carousel that includes an image and a video. The image displays correctly, but when I attempt to click on the video to have it appear in the main carousel view, it doesn't function as expected. Here is a ...

javascripthtmlcsscarousel

Arrange divs in a vertical stack while maintaining a layout with two columns

I am trying to create a layout with two stacked `div`s on one side, and then have a single column on the other side that is the same height as the left `div`s. Something similar to this: https://i.stack.imgur.com/ODsEd.png I currently have the two `div` ...

htmlcss

SwipeJS is not compatible with a JQuery-Mobile web application

I am currently attempting to integrate SwipeJS (www.swipejs.com) into my JQuery-Mobile website. <script src="bin/js/swipe.js"></script> <style> /* Swipe 2 required styles */ .swipe { overflow: hidden; ...

javascriptjqueryhtmlcssjquery-mobile

What specific width range would be best for my needs?

I used to have the default font style of Myriad Pro Light and a padding setting for my main menu on my website as follows: .menu > li > a { padding: 17px 15px 15px 15px; } Recently, I changed the default font style to Montserrat. However, this chang ...

htmlcss

Is it possible to customize the background color of select2 boxes separately for each option?

I recently implemented the select2 plugin and now I'm looking to add a new class within the .select2-results .select2-highlighted class in order to change the background color. Does anyone have any suggestions on how to achieve this? ...

javascriptjqueryhtmlcss

Display or conceal the location where the click event occurs within a single div

progress $(".button-toggle").click(function(e){ $(this).parents.find('#second').toggle(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="first"> <a href="#" class= ...

javascriptjqueryhtmlcss

Can you explain the purpose of the URL function in the context of url("#foobar"

Currently, I am developing a CSS concatenator and one of the tasks involved is URL to absolute URL rewriting. For this process, I exclude any absolute URLs that start with http, https, etc. In the case of Django projects, they designate the following URL ...

css

Incorporate a Font Awesome icon into a Bootstrap 4 callout

I am having issues adding an icon to the left side of a Bootstrap 4 callout. Currently, the icon is appearing above the H4 heading. I would like the icon to be positioned on the left side before the message. I have attempted using .p:last-child but it doe ...

cssbootstrap-4

Design a unique border for a div element that extends a top-border all the way through the header and a bottom-border that

I am trying to achieve the design displayed in this mockup: Here is my current progress: https://codepen.io/raney24/pen/VOmjBY .header-border { width: 100%; margin-bottom: 10px; border-left: red solid 1px; border-right: red solid 1px; border- ...

htmlcssborder

Why does the lazy loading feature keep moving the background image around?

While trying to incorporate lazy loading on my website, I encountered an issue where the image position would change after it was fully loaded and made visible. I experimented with rearranging the order in which my JavaScript and CSS files were called, bu ...

javascripthtmlcsslazy-loading

A transparent float is yielding unexpected outcomes

<!Doctype html> <html> <head> <meta charset="utf-8" /> <title>testing code</title> </head> <body> <div style="float: left; width: 200px; height: 150px; background-color: ...

csscss-float

How can I show/hide a div based on checkbox click on my website? It works in jsFiddle, but not on my actual site. Any suggestions?

Is there a way to show or hide a div based on a checkbox click? I've got it working in jsFiddle, but for some reason, it's not functioning properly on my website. Any thoughts on how to fix this? My goal is to offer multiple payment methods (cre ...

javascriptjqueryhtmlcss

What is the best way to position text below an image icon in a menu?

I am having trouble creating a menu that has the same style as shown in this image: . Unfortunately, my menu ends up looking like this instead: . Can someone please help me fix this issue? Here is the HTML code I am working with: <header> ...

htmlcssmenu

Add adhesive dashes to the text box

I am looking to add sticky hyphens in a text input field. I have included an image illustrating my requirement. The areas that need fixing are highlighted in red. The first hyphen should appear after every three number inputs, followed by the next one afte ...

htmlcssangular

Tips for defining conditions within the style attribute in JSP

Below is the code that I attempted: <div style="width:85%;"> <input class="formbutt" value="AddNew" title="AddNew" type="button" style="{(${projectEnvironmentBean.divStyle}=='dipslay:none') ? 'display:block' :'display: ...

cssjspjpa

Tips for creating a seamless merge from background color to a pristine white hue

Seeking a seamless transition from the background color to white at the top and bottom of the box, similar to the example screenshot. Current look: The top and bottom of the box are filled with the background color until the edge https://i.stack.imgur.com ...

javascriptcssreactjstypescriptmaterial-ui

Click a button to show or hide text

I am attempting to create a button that will toggle text visibility from hidden using 'none' to visible using 'block'. I have tried the following code but unfortunately, it did not yield the desired outcome. <p id='demo' s ...

javascriptcsshtmldom-events

When the cursor is placed over it, a new div is layered on top of an existing

Currently, I am working on a project with thumbnails that animate upon hovering using jQuery. One of the challenges I have encountered is adding a nested div inside the current div being hovered over. This nested div should have a background color with som ...

jquerycsshoveraddclass