I'm trying to add a transparent png image on top of the current image of my item.
I used onmouseover and onmouseout. they worked great, but the problem is I want the background not change, only a highlight(transparent) image draw on it when mouseover called.
In your CSS or maybe just the image,set the opacity as below when the mouse is hovered over it.I guess you have that working already as you said.
img { opacity: 0.3; }
Related
I need to keep the hover effect for this gallery grid, but I would like to remove it when the images in the grid are clicked on (i.e., within the Lightbox), is there an option for this?
Here is the webpage: https://www.kroschlab.com/people-test
Note how the hover effect occurs when you are in grid view (I want), but it also occurs when you click on the images and are in the Lightbox (I don't want).
In summary: is there a way to show text in the Lightbox without requiring a hover-over?
I resolved this by overlaying a background that was identical to the hover background, and displaying the text using opacity.
.yui3-lightbox2 .sqs-lightbox-meta {
opacity: 1 !important;
background-color: rgba(0,0, 0, 0.7);
}
I set the background image on a div and I set the javascript mouseover event to change the background image. When I mouseover, it changes to the other image but it appears to flicker the first time it is loaded and displayed in the browser. After that the image changes normally (without a flicker).
You need to preload the image in order to avoid the flicker. Using CSS one could do:
body::after {
content: url(preload-me-1.jpg) url(preload-me-2.jpg);
display: none;
}
But maybe you actually need image sprites to change background on mouse over, that way you need no preloading.
Is it possible to apply both background-color and background-image using CSS in Eclipse 4? I am trying with the following example and all I can get is either the correct background or the image repeated many times within the window with the black background:
Shell {
background-color: gradient linear rgb(0,206,209) rgb(0,255,127);
background-image: url('./image.png');
}
Additionally, I would like to have the image appear once in the upper-right corner of the screen.
This does not seem to be possible currently.
The gradient background is drawn by creating a background image for the control, so any background image you set will override this.
Control background images are tiled and there is no control over this.
http://codepen.io/tylerkung/pen/Bukzy
I've implemented the self-correcting grid, so that when you resize the browser window, the 3 images will simply stack on top of each other.
I've also been able to make the images fade on mouseover.
But the last bit I wanted to add was to display a text on mouseover which seems tricky to me.
I'm just learning CSS so any help/articles/advice would be appreciated!
You want to change the opacity of the text when the container link is hovered so use this:
.wrapper:hover .text{
opacity: 1;
}
instead of
.text:hover{
opacity: 1;
}
See updated codepen
If you're looking for a simple tooltip, you may just add title attribute on each of the image.
I want to have a transparent png overlay a SVG background as a CSS style in Wordpress.
In the Wordpress back end there is a custom CSS section where I placed this working code.
It is just the background SVG code.
.club {
/** To edit this background, follow this link:
http://svgeneration.com/generate/Happy-Launch Day?
x=50&y=50&radius=50&beam1=ffffff&beam2=52c5ff&beam3=0791b3&shade=ffffff&
*/
background-color: #5EB7CD;background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPHJhZGlhbEdyYWRpZW50IGlkPSdnJyBjeD0nNTAlJyBjeT0nNTAlJyByPSc1MCUnPgoJCTxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNmZmZmZmY7JyAvPgoJCTxzdG9wIG9mZnNldD0nNTAlJyBzdHlsZT0nc3RvcC1jb2xvcjojNTJjNWZmOycgLz4KCQk8c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMwNzkxYjM7JyAvPgoJPC9yYWRpYWxHcmFkaWVudD4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjZyknLz4KCTxzdmcgeD0nNTAlJyB5PSc1MCUnIG92ZXJmbG93PSd2aXNpYmxlJz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg4MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxMDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTIwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDE0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxNjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTgwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDIwMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMjQwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDI2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyODApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzAwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDMyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgzNDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzYwKScvPgoJPC9zdmc+Cjwvc3ZnPg==');
}
I want to overlay this background with this image http://brainclub.nl/3.0/wp-content/uploads/2014/01/Lampjes.png
It is white image with transparent background so you probably wouldn't see it when you click it.
For as far as I can see the problem with combining the two is that the place where I should place the image url is occupied by the SVG code.
background-image:url(
Can anyone help me combine the two?
I will be so grateful.
Thanks.
You can't overlay a bg image as such. You can only overlay elements. You might be able to set multiple background images though by comma separating them.
Codepen Example
Selected CSS
background-image:
url(http://brainclub.nl/3.0/wp-content/uploads/2014/01/Lampjes.png),
url('data:image/svg+xml;base64, **Code chopped**);
}
http://css-tricks.com/stacking-order-of-multiple-backgrounds/