imagehover.css
imagehover.css copied to clipboard
I can't change the Backgroundcolor
RT .
I can't change the css style for the hover view.
<figure class="imghvr-blur" style="background-color: #3de1ad;"> <img src="1.png" alt=""> <figcaption> <p>When Layla appears, she brings an eternal summer along.</p> </figcaption> </figure>
[class*=' imghvr-'], [class^=imghvr-] { background-color: #3de1ad; }
I used these two ways.. can u help me ?
Hello
Try also adding the inline styling to your figcaption tag...
<figure class="imghvr-blur" style="background-color: #3de1ad;">
<img src="1.png" alt="">
<figcaption style="background-color: #3de1ad;">
<p>When Layla appears, she brings an eternal summer along.</p>
</figcaption>
</figure>
I've found that if you need to apply the background-color
to both the <figure>
and <figcaption>
as well as the following classes. Not that some of these will only apply to the Extended version of Image Hover:
[class*=' imghvr-'],
[class^='imghvr-'],
[class*=' imghvr-']:before,
[class^='imghvr-']:before,
[class*=' imghvr-']:after,
[class^='imghvr-']:after
Update: Setting a background color for the above classes and / or setting the color inline seems to screw up the Blocks
, Strip
, Pixel
, Blinds
, Border
effects.
There doesn't seem to be a consistent way to style the background colors for all effects unfortunately.
Based on the code snippet you provided, it seems that you are trying to change the CSS style for the hover view of an element with the class "imghvr-blur". However, the CSS selector you used, [class*=' imghvr-'], [class^=imghvr-]
, targets elements with classes containing "imghvr-" but not specifically "imghvr-blur".
To change the CSS style for the hover view of the "imghvr-blur" class, you can use the following CSS code:
.imghvr-blur:hover {
/* Add your desired CSS styles here */
background-color: #3de1ad;
}
This code will target the element with the class "imghvr-blur" when it is being hovered over, allowing you to apply specific CSS styles for the hover state. Make sure to place this CSS code in your stylesheet or within a <style>
tag in your HTML document.