html - CSS filter inherit issue: Solution without pseudo element for dynamic sized divs? -


I have been trying to solve the following issue for a while, but the solution was not able to work.

What do I want to achieve:

Resting status: A background image and a semi transparent

Hover phase: Saturating the image, changing the color of the overlay

Obviously we are diving in the problem of getting the CSS filter. I have to add a technical restriction, which has made it impossible for me so far: Background image can not be applied to pseudo elements such as : before . Reason for that reason: This final application has inline injection with php. À La: & lt; Div class = "background-image" & lt ;? Php ...? & Gt; "

Current problem: The overlay is being messed up, because parents are being embraced. As I mentioned, I have tried different perspectives, always ending a similar problem. / Div>

< P> Here is a solution that can work for you:

As you said, this issue is a grayscale filter. .pos By moving it into the t-preview div, it allows you to set the .post preview to background color: red and opaticy Get red overlay effect with toggles. I think it should work with your restriction because this is targeting element that you are already working.

-Update -

You are right because all the children have lost their text from ambiguity. If you first < / Code> class, it means that you have to change the HTML slightly. Moving the background into a different element can not be affected by this h1 . Then you have to place the h1 on the background image.

HTML: 

  & lt; Div class = "post-preview-wrapper" & gt; & Lt; Div class = "post-preview" & gt; & Lt; Div class = "post-preview-bg" & gt; & Lt; / Div & gt; & Lt; H1 & gt; & Lt; A href = "#" & gt; Email for liability. & Lt; / A & gt; & Lt; / H1> & Lt; / Div & gt; & Lt; / Div & gt;

CSS: 

  .post-preview-wrapper {// Current styles background-color: red; Status: Relative; } .post-preview & gt; H1 {status: absolute; Top: 0 pixels; Padding: 75px; } .post-preview-wrapper: hover .post-preview-bg {Opacity: 1; -Winkit-Filter: Grayscale (0%); -Moz-filter: grayscale (0%); Filter: Grayscale (0%); } .post-preview-bg {Opacity: .75; Height: 210px; Webkit-Filter: Grayscale (100%); -Move-Filter: Grayscale (100%); Filters: grayscale (100%); Background-image: url ('http://lorempixel.com/output/cats-q-c-640-480-7.jpg'); Background size: cover; Background-condition: center center; -Winkit-infection: 0.2 all easily; Infection: 0.2 in all the rest; }

Comments

Post a Comment

Popular posts from this blog

ios - How do I use CFArrayRef in Swift? -

I am using Objective-class in my Swift Project through a bridging header. The method signature looks like this: - Some cement (some type) some parameters; I started by getting an example of class, calling method, and storing the value: var myInstance = MyClassWithThatMethod (); Var cfArr = myInstance.someMethod (some value); Then try to get the value in the array: var valueInArrayThatIWant = CFArrayGetValueAtIndex (cfArr, 0); However, I get the error unmanaged & lt; Cfarray & gt; Not like 'CFArray' . Unmanaged & lt; Cfarray & gt; also means? I looked, but I do not need to change the array in a fast array (though it would be good). I need to be able to get value from the array. I also tried CFArray method to pass in a function: func doSomeStuffOnArray (myArray: NSArray) {} Although I get the same error when using: doSomeStuffOnArray (cfArr); // unmanaged & lt; CFArray & gt; I am using CFArray because I want to sto...
Read more

eclipse plugin - Run java code error: Workspace is closed -

To create an automated project, I created a plug-in project with the following dependencies: Org.eclipse.core.resources org.eclipse.equinox.registry org.eclipse.core.runtime and the following The Java class is located in the src folder: Package Examiner; Import org.eclipse.core.resources.IProject; Import org.eclipse.core.resources.IWorkspaceRoot; Import org.eclipse.core.resources.ResourcesPlugin; Import org.eclipse.core.runtime.CoreException; Import org.eclipse.core.runtime.IProgressMonitor; Import org.eclipse.core.runtime.NullProgressMonitor; Public class tes {public static zero main (string [] args) {// TODO auto generated method stub IProgressMonitor progress monitor = new NullProgressMonitor (); IWorkspaceRoot root = ResourcesPlugin.getWorkspace (). GetRoot (); Ipoject project = root.jetproject ("desired projectname"); Try {Project.create (progress monitor); Project.open (progressMonitor); } Grip (CoreException E) {// TODO Auto generated blocking block e....
Read more

c - Error on building source code in VC 6 -

When I create my project in VC6, the BScMKE reports the following error Linking .. Creating Library ... .. / ... / PB / Bean / Debub / ICEERP.Lib and Object ........ P.B. / Bean / DBube / ICREPlay.APP Browse information file ... BSMMK: ​​error can not be read from BK 1505: file '../../PB/bin/TmpOut/ICReplay/Debug/ICReplay_PB.bsc' Error executing bscmake.exe Can someone help me? 2 Reason for reference from: "ICReplay_PB .bsc "file will be corrupted The trunk of the file will be happening with the compiler running out of disk space or is being interrupted when creating .sbr file I think this answer will help you!
Read more