CSS Image Overlay With Color And Transparency


Answer :

CSS Filter Effects



It's not fully cross-browsers solution, but must work well in
most modern browser.



<img src="image.jpg" />
<style>
    img:hover {
        /* Ch 23+, Saf 6.0+, BB 10.0+ */
        -webkit-filter: hue-rotate(240deg) saturate(3.3) grayscale(50%);
        /* FF 35+ */
        filter: hue-rotate(240deg) saturate(3.3) grayscale(50%);
    }
</style>


EXTERNAL DEMO PLAYGROUND





IN-HOUSE DEMO SNIPPET (source:simpl.info)





#container {
  text-align: center;
}

.blur {
  filter: blur(5px)
}

.grayscale {
  filter: grayscale(1)
}

.saturate {
  filter: saturate(5)
}

.sepia {
  filter: sepia(1)
}

.multi {
  filter: blur(4px) invert(1) opacity(0.5)
}

<div id="container">

  <h1><a href="https://simpl.info/cssfilters/" title="simpl.info home page">simpl.info</a> CSS filters</h1>

  <img src="https://simpl.info/cssfilters/balham.jpg" alt="No filter: Balham High Road and a rainbow" />
  <img class="blur" src="https://simpl.info/cssfilters/balham.jpg" alt="Blur filter: Balham High Road and a rainbow" />
  <img class="grayscale" src="https://simpl.info/cssfilters/balham.jpg" alt="Grayscale filter: Balham High Road and a rainbow" />
  <img class="saturate" src="https://simpl.info/cssfilters/balham.jpg" alt="Saturate filter: Balham High Road and a rainbow" />
  <img class="sepia" src="https://simpl.info/cssfilters/balham.jpg" alt="Sepia filter: Balham High Road and a rainbow" />
  <img class="multi" src="https://simpl.info/cssfilters/balham.jpg" alt="Blur, invert and opacity filters: Balham High Road and a rainbow" />

  <p><a href="https://github.com/samdutton/simpl/blob/gh-pages/cssfilters" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a></p>

</div>





NOTES




  • This property is significantly different from and incompatible with Microsoft's older "filter" property

  • Edge, element or it's parent can't have negative z-index (see bug)

  • IE use old school way (link) thanks @Costa



RESOURCES:




  • Specification [w3.org] w3 ref

  • Documentation [developer.mozilla.org] doc

  • Chrome platform status: [chromestatus.com] official status

  • Browser support [caniuse.com] ref

  • Say Hello to Webkit Filters [tutsplus.com] info

  • Understanding CSS Filters Effect [html5rocks.com] doc



JSFiddle Demo



HTML:



<div class="image-holder">
    <img src="http://codemancers.com/img/who-we-are-bg.png" />
</div>


CSS:



.image-holder {
    display:inline-block;
    position: relative;
}
.image-holder:after {
    content:'';
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: blue;
    opacity: 0.1;
}
.image-holder:hover:after {
    opacity: 0;
}


If you want to make the reverse of what you showed consider doing this:



.tint:hover:before {
    background: rgba(0,0,250, 0.5);

  }

  .t2:before {
    background: none;
  }


and look at the effect on the 2nd picture.



Is it supposed to look like this?



Comments

Post a Comment

Popular posts from this blog

530 Valid Hostname Is Expected When Setting Up IIS 10 For Multiple Sites

Answer : Solution 1: When configured with two or more hostnames, the correct virtual host name and username must both be sent in the username by the ftp client. Separate the site name and user with the vertical line symbol: | www.example.com|MyUser So, in your FTP Client use this for the username: ftp.telefonievergelijken.nl|tv_ftp Solution 2: It appears that you're attempting to connect to the FTP site using a hostname which is not currently configured in any of the bindings to the FTP site within IIS. I base this only on the error output from Filezilla which you have included, as you have censored the hostname (even in example form) from the output, so there isn't much more to go on. You'll need to configure a binding on the FTP site which matches the hostname you are using to connect to the FTP site (whether that be from Filezilla or any other FTP client). EDIT: From your updated post information, I notice that your bindings for the FTP site are indeed in...
Read more

C Perror Example

Defined in header <stdio.h> void perror ( const char * s ) ; Prints a textual description of the error code currently stored in the system variable errno to stderr . The description is formed by concatenating the following components: the contents of the null-terminated byte string pointed to by s , followed by ": " (unless s is a null pointer or the character pointed to by s is the null character) implementation-defined error message string describing the error code stored in errno , followed by '\n' . The error message string is identical to the result of strerror ( errno ) . Parameters s - pointer to a null-terminated string with explanatory message Return value (none). Example # include <stdio.h> int main ( void ) { FILE * f = fopen ( "non_existent" , "r" ) ; if ( f == NULL ) { perror ( "fopen() failed" ) ; } else { fclose...
Read more

Android - ImageView With Rounded Only One Corner

Image
Answer : You can use the Material Components Library. With the version 1.2.0-alpha03 there is the new ShapeableImageView . Just use in your layout: <com.google.android.material.imageview.ShapeableImageView app:srcCompat="@drawable/..." ../> And in your code apply the ShapeAppearanceModel with: float radius = getResources().getDimension(R.dimen.default_corner_radius); imageView.setShapeAppearanceModel(imageView.getShapeAppearanceModel() .toBuilder() .setTopRightCorner(CornerFamily.ROUNDED,radius) .setBottomLeftCorner(CornerFamily.ROUNDED,radius) .build()); You can use this library and put your ImageView inside the Layout https://github.com/JcMinarro/RoundKornerLayouts and can set the radius for specific corners like this containerLayout.setCornerRadius(2f, CornerType.ALL); containerLayout.setCornerRadius(2f, CornerType.BOTTOM_LEFT); Other choices public final enum class CornerType private constructor() : kotli...
Read more