Eelyn Eelyn - 1 year ago 117
CSS Question

Combine the active background onclick and mouseover jquery

It's a bit hard to explain, but screen shots below show the result I want.

This is the result I want. The semi transparent blue background is activated when click on the image. For the other images, hide the caption and show the semi transparent blue background when hover.

enter image description here

But what I get is like this. I know this is causing by the

class "title"
,
100% height
and also the jQuery code. I have no idea how to combine the
mouseleave
and
click
. Hoping that some of you could provide me with some advice. Thanks!
enter image description here



$(document).ready(function() {
//hover effect
$('.thumbnail').mouseenter(function(e) {
$(this).children('span').children('span').removeClass('title');
$(this).children('span').children('span').addClass('dark-background').fadeOut(0).fadeIn(500);
}).mouseleave(function(e) {
$(this).children('span').children('span').removeClass('dark-background').fadeOut(0).fadeIn(200);
$(this).children('span').children('span').addClass('title');
});

//active after clicked
$(".thumbnail").click(function(){
$(this).data('clicked', true);
if($(this).data('clicked')) {
$(this).children('span').children('span').addClass('title');
$(this).children('span').children('span').toggleClass('background-active');
}
});
});

.gallery-item {
text-align: left;
font-size: 25px;
margin: 0 10px;
padding: 10px 0;
}

.gallery-item .thumbnail img {
display: block;
width: 100%;
height: auto;
}

.gallery-contents { position: relative; }

.gallery-item .title {
position:absolute;
bottom:0px;
left:0px;
width:100%;
background-color:#5ba4ee;
color:#fff;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
padding: 5px 10px;
}


.dark-background, .background-active {
background-color: rgba(112, 158, 202, 0.8);
color: #fff;
font-size: 16px;
font-weight: bold;
height: 100%;
padding-top: 30%;
position: absolute;
text-align: center;
text-decoration: none;
width: 100%;
z-index: 100;
text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger">
<span>
<span class="title">Gallery Item</span>
<img src="https://cdn-main.123contactform.com/images3/landing_pages/free-small-business-forms.png" alt="" />
</span>
</div>
</div>
</div>




Answer Source

You need to add opacity to title class. Opacity will make your background transparent. Update it to

.gallery-item .title {
    position:absolute; 
    bottom:0px; 
    left:0px;
    width:100%;
    background-color:#5ba4ee;
    color:#fff;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 10px;
    opacity: 0.35;
}

let me know if you need any further help.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download