Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I can't change the Backgroundcolor #9

Open
jarviswwong opened this issue Aug 22, 2016 · 3 comments
Open

I can't change the Backgroundcolor #9

jarviswwong opened this issue Aug 22, 2016 · 3 comments

Comments

@jarviswwong
Copy link

jarviswwong commented Aug 22, 2016

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 ?

@ciar4n
Copy link
Owner

ciar4n commented Aug 26, 2016

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
Copy link

elixirgraphics commented Nov 9, 2016

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants