Kamalakannan Kamalakannan - 3 months ago 10
CSS Question

How to add a class to the image tag within anchor tag on hover?

I want to add a class to the image tag within the anchor tag on hover, I'm using LightGallery to display my works and using cssgram filters on hover. The class should be added to

<img class="img-responsive" src="assets/865-6219.jpg">
and also keep the img-responsive class.

HTML and CSS are working fine. Only the jQuery code might not be perfect.
Here's my Code, Please Help.


$("#gallery li a").hover(function(){
$(this).find("img").addClass("inkwell");
},function() {
$(this).find("img").removeClass(" ");
});

ul>li{
display:inline-block;
width: calc(100%/4 - 0px);
}

.nak-gallery > ul > li a {
border-radius: 3px;
display: block;
overflow: hidden;
position: relative;
float: left;
height: 270px;
width: 100%;
}

.nlg1>ul>li {
margin-bottom: -5px;
display: inline-block;
margin-right: -4px;
margin-left: 0px;
list-style: outside none none;
}

.nak-gallery > ul > li a > img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
height: 100%;
width: 100%;
}

.nak-gallery > ul > li a:hover > img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

<div class="nak-gallery nlg1">
<ul id="gallery">
<li data-src="assets/865-6219.jpg" data-sub-html="#title">
<a href="">
<img class="img-responsive" src="assets/865-6219.jpg">
<div class="nak-gallery-poster">
<img class="icon">
</div>
</a>
</li>
</ul>
</div>





Thanks in Advance.

Answer
$("#gallery li a").hover(function() {
  $($(this).find("img")[0]).addClass("inkwell");
}, function() {
  $($(this).find("img")[0]).removeClass("inkwell");
});

According to Your html structure - it has two img tags inside anchor tag. So when you tried .find('img') it returns array. Above code will pull only first array element which you want to add a class