MR.Don't know MR.Don't know - 5 months ago 32
jQuery Question

jquery img class overlay

I'm trying to add red overlay on my image-box class, but I can't get the result because:
new

overlay
class replaces the old one, and I only get red background.
I need the new class in addition to, not instead of the old one.

This is what I have tried so far:



$(function($) {
$(document).on('click', '.wrapper', function(event) {
var target = $(event.target).closest('.wrapper');

target.find('.image-box').addClass("overlay");

});
});

.image-box {
height: 300px;
width: 100%;
padding-right: 0px;
padding-left: 0px;
background-position: center;
background-color: #4D4E56;
}

.overlay{
background-color:rgba(86, 61, 124, 0.55);
transition: 0.5s;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
height:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image-box"></div>
</div>




Answer

You may use :after to add overlay. Check the updated Code.

$(function($) {
  $(document).on('click', '.wrapper', function(event) {
    var target = $(event.target).closest('.wrapper');
    
	target.find('.image-box').addClass("overlay");
    
  });
});
.image-box {
    height: 300px;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
  position: relative
}

.overlay:after {
	background-color:rgba(86, 61, 124, 0.55);
	transition: 0.5s;
	filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image-box"></div>
  </div>