I am currently working in Wordpress usnig the Visual Composer. I wish to make an image simply change on mouseover for now. I have read many different ways of doing this with Java and CSS but nothing seems to be specifically for this.
Many thanks!
Working example checks it , replace images with your own.
<a class="foo" href="#">
<img src="http://lorempixel.com/400/200/food/1/" />
<img src="http://lorempixel.com/400/200/food/2/" />
</a>
<style>
.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}
</style>
http://jsfiddle.net/gd8ba/light/
Thanks
Say, I have a link -
<a class="my-link" href="http://www.my-website.com"></a>
I need to show an image on mouse over this link. So, I will add two things in my CSS-
To add image to the link
.ge-link { background-image: url('http://my-website.com/my-img.png'); background-size: contain;background-repeat: no-repeat;}
To add hovering property
.ge-link:hover { background-image: url('http://my-website.com/my-img-hover.png'); background-repeat: no-repeat; background-size: contain;}
I know this post is old, but recently I had the same inquiry, so I found this plugin https://es.wordpress.org/plugins/image-over-image-vc-extension/. I've tested it with WPBakery on WP 5.6.3 and it works fine.
Here are the demos. Hope it works for anyone needing this functionality.
Related
I have a good selection of SVG graphics on my site here
http://www.poipleshadow.com
They look crisp and I would love to continue using them, although I have a problem when i combine them with fallback for IE when they have links.
For example this is fine
<a href="index.htm">
<img src="Images/Poiple-Shadow.svg" width="32" height="32" alt="Poiple Shadow Charity Website" class="logo200">
</a>
But when I add the svg as an object and include a line for PNG support the link does not work anymore.
<a href="Goa-India-Map.htm" title="Goa Tourist Map">
<object type="image/svg+xml" data="Images/Buy-Items-To-Donate.svg" class="myimgleft">
<img src="Images/Buy-Items-To-Donate.png" width="200" height="156" alt="Give to charity - Donate to Street Children Charity" class="myimgleft">
</object>
</a>
I have searched and found that I could include the link in the SVG itself, although this means that the SVG would only link to a single address. Not ideal. Anyone know of a clean, basic, solution as I like to keep my site as basic as possible where ever I can just using HTML5 and CSS.
This is hacky, but I've used a trick from CSS Tricks in the past.
Unfortunately there's not a convenient anchor on that page to link to, but it looks like this:
.my-element {
background-image: url(fallback.png);
background-image: url(image.svg), none;
}
Apparently support of multiple backgrounds and SVG mostly overlap, so anything that doesn't support svg will use the top background-image while anything that does support svg will use the bottom. Clever, but like I said, hacky, and the best trick I know that doesn't use Modernizr.
CSS Tricks reports that "this works well in IE 6-8, but sadly not in Android 2.3 which supports multiple backgrounds but not SVG," so caveat emptor.
In reply to your comment below:
Your SVG looks like this right now:
<a href="index.htm">
<img src="Images/Poiple-Shadow.svg" width="32" height="32" alt="Poiple Shadow Charity Website" class="logo200">
</a>
In your stylesheet, you can add to class .logo200:
.logo200 {
background-image: url(Images/Poiple-Shadow.png); // make a png or jpg version of the image
background-image: url(Images/Poiple-Shadow.svg), none;
width: 32px; //give it width and height
height: 32px;
}
Now, instead of using an <img> tag, use a div:
<a href="index.htm">
<div class="logo200"></div>
</a>
The browser should show the SVG if it supports multiple backgrounds (and therefore svgs). If the browser does not support SVG, it likely doesn't support multiple backgrounds, so it will only show the first background-image property.
I am curious as the best (only?) way to go about this.
I was asked to make a text link, display an image (under it) upon rollover and of course disappear when you rolloff the link.
(the original personal used some in-line style that broke the page, instead of declaring a block).. they also tried to use an IMAGE MAP to make the displayed image a LINK/clickable, and have a different/unique URL that the TEXT link used to display the image.
I made the style:
/*custom client requested CSS styling/functionality*/
a.imageDisplay img {
display:none;
}
a.imageDisplay:hover img {
display:block;
}
Here is a snippet of the HTML I am try to add this functionality to:
<a class="imageDisplay" href="#">Client Name XYZ<img src="/UserFiles/image/ALLSAtestpage3.jpg" usemap="#allsa" /><map id="allsa" name="allsa"><area coords="12,113,123,142" href="http://www.nike.com/" shape="rect" target="_blank" /></map></a><br />
My question is: what is the best way (better way) to add a LINK/URL to the image that is being displayed?
Because the image is INSIDE the anchor/link tag.. is will also be/get the same URL as the target when clicked....yes?
Anybody have some SIMPLE ideas as a work around?
(I really hate those MAP tags anyways) :)
thanks!
Is this simple?
<span class="txt-img">
<a class="txt" href="#1">Client Name ABC</a>
<a class="img" href="#2"><img src="http://placehold.it/200/0000cc/" /></a>
</span>
.txt-img {position:relative;}
.txt-img .img {position:absolute; display:none; left:0;}
.txt-img:hover .img {display:block;}
FIDDLE: http://jsfiddle.net/46Tf6/
I am able to get an svg to show just fine when I use
<img src="../images/jte.svg" alt="Logo">
however, when I try and display via css using the following:
html
<div class="logo2">
</div>
css
.logo2 {
background-image: url(jte.svg);
}
Nothing is being displayed. Any idea why this is happening? I have tried multiple different path options "('../images/jte.svg') ('jte.svg) no avail though.
Use a defined width and height for the element in question, or simply attach it to the body. For example:
body { background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg')
I have a gallery plugin. If I click on another image, or in a arrow, a popup will appear.
The problem is that whem the popup is opened, the plugin gallery moves down on the page.
What is the css problem?
How can I fix it?
here my plugin:
http://judopassion.com/wordpress/?p=274
Thanks a lot.
There's quite a lot going on here, so I'll try and simplify the steps you need to take.
<div id="box">...
Needs to be a child of
<div id="gallery-1">....
So you would have:
<div id="gallery-1">
<div id="box"></div>
</div>
Add position:relative; to gallery-1.
Your #box styles are really, really messy. You need to delete left: and top: instructions from the CSS for #box.
I have added top property on pop-up appearing, and removed it when is closed:
$("gallery-1").css("top","-xxem");
I can't use GeorgeBuckingham solutions, because the plugin don't not allow it. Thanks anyway.
I've used url() in my project, but it is not showing the picture in IE 6? does IE6 not support url()? How should I solve the problem?
The code is as below:
<img class="avatar" style="background:url('./avatar.jpg') no-repeat scroll 5px 7px transparent;" />
Use background-image:
<img class="avatar" style="background-image:url('./avatar.jpg')" />
Also note that you had an extra ) at the end.
Also make sure that this is actually a problem with the background image. What happens if you set the background color? Do you see it then? It could be a layout problem that it causing it to not appear.
The entire tag looks wrong. I would do something like this:
<img class="avatar" style="background-image: url('./avatar.jpg');" alt="" />
I would also check that the path is correct.
-- Edit --
After testing, I've noticed that a path like './avatar.jpg' will never work. It's looking for a folder entitled . in the same directory as the file you've written the style in. Do you have a folder named .? I don't think so. It's an illegal directory name.