position an image over another image on hover

Tagged: 

This topic contains 5 replies, has 3 voices, and was last updated by  nelissar 6 years, 2 months ago.

Author Posts

nelissar

Hi,
I am trying to get an image over another image on hover. not clear as to how to achieve with Microthemer?
Thanks,
Nimrod


Abland

Hi, Nimrod,

If you create a selector for your link then add the pseudo-class hover to that selector. For example, if the selector on the link was:
.my-div-class a
add the hover:
.my-div-class a:hover
Then just add a background image to that selector.

** This is just a general answer. If you can provide a link for the site then the information can be more accurate.


nelissar

hi,
Thanks for the suggestion I saw that one as an answer to a previous similar question in the forum. unfortunately this doesn’t work..
the selector is: .mihem so used .mihem :hover
site adress is: http://miha.lizman.info/ I am trying to create hover effect over the the 3 circular images.

Thank you,
Nimrod


Abland

For the first image try this:

#ma-osim .text-center {
background-image: url(http://miha.lizman.info/wp-content/uploads/2016/06/150miha_elements-04-250.png);
background-position: center center;
}
#ma-osim .text-center:hover img {
visibility: hidden;
}

What that does is add the image you want to show on hover as a background. The nice thing is it’s loaded so there will be no delay on hover.
When you hover over the div the existing image goes hidden, but keeps the dimensions of the div intact, and the background image shows instead.

Your first image div has a unique id, #ma-osim, so the other two images will also need unique id’s to target them specifically.


Sebastian

@abland – hero, thanks for sharing your clever trick. I was just about to post a link to our how to article which explains an alternative technique for replacing HTML images with CSS background images via the GUI options: https://themeover.com/replace-existing-image-e-g-logo-new-one/

The point Abland makes about needing to add a unique id to the other image wrappers holds true with my suggestion too. Is that something you can add to your theme?

Cheers,
Sebastian

ps switching HTML images on hover is often achieved with JavaScript, which Microthemer now supports. But these CSS only approaches are simpler.


nelissar

hi,
amazing idea! it works perfect. I had to add-

background-repeat: no-repeat;

cheers and thank you for the help,
Nimrod

You must login or register to reply to this topic.