I want the css codes of the blog1popup class to change when the image is clicked.
I know how to do this with hover, but i don't know how to make this action happen by clicking.
The element I want to use as this button;
<div class="row">
<div class="col-lg-4 col-md-6 sm-mb-35px">
<div class="blog-item">
<div class="img">
<img src="assets/img/blog-grid-1.jpg" alt=""></a>
<a href="" class="date"> <span class="day">14</span> <span class="month">April</span></a>
</div>
<a href="" class="title padding-30px" style="margin-top: -1rem;">Fransa Geneline Islak Mendil İhracı</a>
<p style="padding-left: 30px; padding-bottom: 20px; margin-top: -25px; line-height: 20px;">Tüm dünya ülkelerine yardımseverliği gösteren ülkemize..</p>
</div>
</div>
<div class="blog1popup"></div>
Example on hover technique;
.blog-item:hover > .blog1popup{
opacity: 100%;
}
You can add click event on blog-item class, then you can add classes to any element or change any css property using jquery methods.
Eg.
$(".blog-item").on("click", function (e) {
$(".blog1popup").css("opacity", "100%");
$(".blog1popup").addClass("any-class");
});