简体   繁体   中英

Color overlay over image on hover

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)

FIDDLE

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

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM