I have this example:
https://jsfiddle.net/3q81h1es/
.image1 { display: inline-block; height: 300px; width: 300px; background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg"); margin-left: auto; vertical-align: top; } .image1:hover { opacity: 0.3; filter: alpha(opacity=30); }
<div class="image1"></div>
I want to make a blue haze effect, like in the picture below:
Can you help me to solve this problem?
I tried to add .wrap{background:blue;}
but not working unfortunately.
You can use a blue overlay. This overlay can be made with a pseudo element and displayed on hover:
.image1 { display: inline-block; height: 300px; width: 300px; background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg"); margin-left: auto; vertical-align: top; } .image1:hover:after { content:''; display:block; height:100%; background:blue; opacity:0.3; filter: alpha(opacity=30); }
<div class="image1"></div>
You could use a second additional background using a single color gradient on hover.
.image1 { display: inline-block; height: 300px; width: 300px; background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg"); margin-left: auto; vertical-align: top; } .image1:hover { background: linear-gradient(to bottom, rgba(0, 0, 128, 0.25), rgba(0, 0, 128, 0.25)), url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg"); }
<div class="image1"> </div>
As an alternative, positioned pseudo-element if the div will have content.
.image1 { display: inline-block; height: 300px; width: 300px; background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg"); margin-left: auto; vertical-align: top; color: white; position: relative; z-index: 1; } .image1:hover:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 128, 0.5); z-index: -1; }
<div class="image1"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde magni officia odit enim magnam eaque modi illo dolorum necessitatibus cumque dolore recusandae nisi eos. Libero!</p> </div>
You could use CSS Blend Modes
Browser Support is quite good (except for IE)
.image1 { display: inline-block; height: 300px; width: 300px; background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg"); margin-left: auto; vertical-align: top; } .image1:hover { background-color: rgba(0, 0, 255, .3); background-blend-mode: multiply; }
<div class="image1"></div>
Changing block opacity would also change its content, so you might also try changing alpha channel of the overlay using pseudo elements and rgba()
background color
.image1:hover:after { background-color: rgba(0, 0, 255, 0.3); content: ""; height: 100%; position: absolute; width: 100%; } .image1 { background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0); display: inline-block; height: 300px; margin-left: auto; position: relative; vertical-align: top; width: 300px; }
<div class="image1"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.