Wednesday, 2 September 2015

html - Darken the image with hover

Live Demo Link  - Click Me

Darken the image on mouse hover

HTML - 
<button class="view_new">
    <div class="a">
    <img src="http://upload.wikimedia.org/wikipedia/en/thumb/2/2a/Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg/220px-Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg" alt="Dubai" />
    </div>
</button>
CSS - 
.view_new {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: white;
}
.view_new .a {
    margin: 10px;
}

.view_new img {
    display: block;
}

.view_new:hover .a {
    background-color: black;
}

.view_new:hover img {
    opacity: 0.4;
}


 
Share:

0 comments:

Post a Comment

Blogger Tutorials

Blogger Templates

d-koder - Web Developer / Security Specialist / Penetration Tester I would like to write tutorials about the issue we use to get while coding something. Hope these small tuts will help developers worldwide. > Website

Interested In -

Html/Css
PHP
Javascript
Jquery
Ajax
JSON
GITHUB