If you are a designer then you will surely experienced many time too easy things that you know better but you forget at that time and that is the time when your know the real value of that thing. So now here we are sharing a code that can help you quick if you need this type of code while designing any web.
Now you know that opacity simple do a white shade effect but what if you want to add a black shade in opacity on hover without editing your images via one way to effect on your all website then yes you can do it but you have to use more code instead of only opacity. But you dont have any need to use and JavaScript, jquery or anything else as you can do it using pure CSS. Now without waiting any more, just have a look on live DEMO then have an eyes on its features. After that proceed to the tutorial to add it and garb your ready made code to make it in active live.
Table of Contents
Features:
1.) Pure CSS3 Code.
2.) No JQuery.
3.) No JavaScript
4.) Image will be dark on mouse hover.
5.) Opacity will work on hover.
6.) Image will not be affected.
How To Show Black Opacity On Image Hover Through CSS?
Step 1:) First of all go to your website and see that do you have images in this kind of HTML or add a new image just as below.
<div class="image"> <img src="https://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" /> </div>
Step 2:) If yes, then add the below CSS so it will effect on all images.
<style type="text/css"> .image { position:relative; width:400px; height:400px; } .image img { width:100%; vertical-align:top; } .image:after { content:'\A'; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.6); opacity:0; transition: all 0.5s; -webkit-transition: all 0.5s; } .image:hover:after { opacity:1; } </style>
Step 3:) Save and done.
Customization:
The code is fully customizable and open to you. YOu can edit or change anything you want. If you are confused then you can ask about what you want to change. You have to just change the width according to your desired image DIV. Rest of the CSS is fixed but also customizable as per your desire…
Last Words:
This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share alot more about coding and make it easy for you. If you liked it then share it and be with us to get next awesome widget. If you have any problem then feel free to ask us. We will help you with what we can or have.
awesome trick bro. i m going to use this trick in wallpaper site.
Welcome here and thanks for liking our article. Stay with us to get more tips like this…