imagehover.css icon indicating copy to clipboard operation
imagehover.css copied to clipboard

I can't change the Backgroundcolor

Open jarviswwong opened this issue 8 years ago • 3 comments

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 ?

jarviswwong avatar Aug 22 '16 12:08 jarviswwong

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>

ciar4n avatar Aug 26 '16 20:08 ciar4n

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.

elixirgraphics avatar Nov 09 '16 16:11 elixirgraphics

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.

LiujiaZz avatar Oct 28 '23 12:10 LiujiaZz