CODEWITHSUNDEEP
javascriptjquerycss
JRU
JRU

Reputation: 327

hover an image makes it darker

Just need to know how hovering an image makes it darker? using jquery /css.

my css

.img-files{
    background:url("/Images/syzs.png") no-repeat; 
    position:absolute;
    background-size:90%;       
    width: 100px;       
    height: 150px;
    text-indent: -9999px; 
    z-index:1;
}

Upvotes: 1

Views: 5249

Answers (3)

techfoobar
techfoobar

Reputation: 66663

You can do this using a combination of the :hover pseudo class and the ::after pseudo element.

Working Demo

<div>
    <img src="http://aux3.iconpedia.net/uploads/69290979.png" />
</div>

div {
    position: relative;
    display: inline-block;
}
img {
    width: 100px;
    height: 100px;
}
div:hover::after {
    position: absolute;
    z-index: 1;
    background-color: black;
    opacity: 0.7;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    content: '';
}

Upvotes: 3

Mr. Alien
Mr. Alien

Reputation: 157334

You can make it better using black background with opacity property

Demo

.dark {
    display: inline-block;
    background: black;
}

.dark img {
    display: block;
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
}

.dark:hover img {
    opacity: 0.5;
}

Upvotes: 5

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Use opacity:

.img-files {opacity: 0.5;}
.img-files:hover {opacity: 1;}

Fiddle: http://jsfiddle.net/praveenscience/V7cFn/

Upvotes: 1

Related Questions