CSS hover effect for PNG images [closed] - html

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I need a CSS hover effect for a png image without using two images. Bascially when a user hovers over the png image it would show a glow or other effect without highlighting the whole box but just the png image. I've tried using masking effect but that requires a second image and i have multiple object that don't have same shape and I want to use one css effect for all.
HTML
<div class="brighten pic">
<img src="imgs/bookcase-02.png">
</div>
CSS
/*DARKEN*/
.brighten img {
display: inline-block;
margin: 100px auto;
-webkit-filter: brightness(100%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.brighten img:hover {
-webkit-filter: brightness(120%);
}

Answer 1

Try This:
.brighten img {
opacity: 0.3;
}
.brighten img:hover {
opacity: 1;
}

Answer 2

You want to do something like this in JQuery. Be sure you are calling the JQuery library. I call mine from google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
THEN you want to do something like this:
<script type="text/javascript">
$(document).ready(function () {
$(".YourImageName").mouseenter(function () {
$(this).css('box-shadow', '0 0 2px #888');
});
$(".YourImageName").mouseleave(function () {
$(this).css('box-shadow', 'none');
});
}
</script>
This gives you a shadow around the edges and you can change the color or change the css entirely to better suit your needs.
It would be a little more helpful in the future if you provided us what code you currently have so we have a better understanding of what it is you want. This code is taken from live web use and changed to work for your scenario. You will have to change the class names to yours. Hope this helps!