search

ciar4n / imagehover.css

Pure CSS Image Hover Effect Library
http://imagehover.io
MIT License
1.8k stars 234 forks source link

I can't change the Backgroundcolor #9

Open jarviswwong opened 8 years ago

jarviswwong commented 8 years ago

RT . I can't change the css style for the hover view. `

    <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 ?

ciar4n commented 8 years ago

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>
elixirgraphics commented 7 years ago

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.

LiujiaZz commented 10 months ago

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.