2015 February 04 Archive - EXEIdeas

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.CLICK HERE TO SEE DEMOFeatures:1.) Pure CSS3 Code.2.) No JQuery.3.) No JavaScript4.) 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. Step 2:) If yes, then add the below CSS so it will effect on all images. .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;} 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.