I have a WooCommerce shop and on the shop page when I rollover an image it swaps it for the first image in the gallery by default which is fine. The problem i have is my images are transparent png's and so as the second image appears you can still see the first image beneath it.
Is it possible to hide the first image with dsiplay:none; if so how do i find the correct css class, as i have spent days looking but can not find it.
Any suggestions would be appreciated.
In the end, I just added a background to the second image so that it hid the first
.secondary-image {
background:red!important;
}
Related
I am working on a website when suddenly the product image on the single page stops displaying. But when I click on the empty space where the image supposed to be it pops up with the image. I can't seem to figure out why the sudden loss of image.
http://www.efikobooks.com/product/the-huge-kids-quiz-book/
in your page under the "single-pimage" div there is an another div with class name "woocommerce-product-gallery" which has an inline css "opacity:0" that's why your product image is not displaying set it to 1 and image will appear.. or just paste this in your css...
.single-pimage .woocommerce-product-gallery{
opacity: 1 !important;
}
I want to add two columns on one slide on the full width slider on the Divi theme in wordpress but I don't found how to add it,
I need an image on the left and text on the right as shown on the below image
That's actually built-in functionality. You just need to add the image and and it will automatically place it like your screenshot. If you want it on the right there is a dropdown for that as well.
I am currently building a fluid layout website, so that when the screen resolution changes, the site changes with it, no need for individual resolution css etc.
But the problem i am having is with the navigation bar, i want to have one image with the labels (Portfolio, Blog and About), when the mouse moves over each of those labels the whole nav bar changes to another navbar image, one with different coloration to indicate the mouse is on a specific label, each label needs to be a link too (obviously).
To try to clarify, i essentially need a div mouseover event on a specific location on an image, but as mouseover events don´t exist i would have to use :hover in css, but how do i get the image to change in css? Perhaps setting the original navigation bar image as the background image, but how do i overlay the next image and get it to activate on a specific hover location? image mapping?
regards,
Jimy
has anyone ever used nivo slider for images? I'm having an issue with showing the next and prev images for the navigation. It shows the prev image for boh next and prev navigation.
can anyone help please?
If you simply copy/pasted the example code, you will notice that it is asking for one image. This is because it's using an image called a sprite. A sprite is an image that has multiple images on it, which then are positioned via CSS via background-position attribute. You can either create your own sprite image and position it with CSS or you can use two different images.
If you'd like to use two images, simply change the left control's image in the CSS to left.png (assuming you have a left arrow icon) and the right control's image in the CSS to right.png.
Image Gallery with overlapping Fade In and Fade Out effects ???
I'm trying to find an idea to go by or some code snippet for an Xml Img. gallery where I can use Images which are fading 'In and Out' before showing the next Img. a type of overlapping, and which than again does the fade In and Out thing.
**** I have been able to get things going through the last week, but I'm not too happy with it as it is not smooth enough!, and not that greatly dissolving between Imgs.
Here is a Link of a gallery which has that what I'm looking for !!!
link text
Thanks a lot in advance. regards aktell
I have not tried this yet.
can you try creating two overlapping canvases.
first image in the first canvas which fades from alpha 1 to 0 and second image fades from 0 to 1. Then second image replaces first one in 1st canvas giving way to third image in second canvas.