On the website I am currently working on, there are multiple images that enlarge when hovered over. Each item has a unique class to indicate which image should expand upon hovering. I am looking to simplify this process by creating a single function that can be applied to all items individually. This would eliminate the need for extra classes and reduce the size of the JavaScript file. For example, when hovering over a specific column, the picture inside that column will enlarge.
Javscript Code:
$('.webDesignServices').hover(function() {
$(".webDesignPicture").addClass('transition');
}, function() {
$(".webDesignPicture").removeClass('transition');
});
$('.graphicDesignServices').hover(function() {
$(".graphicDesignPicture").addClass('transition');
}, function() {
$(".graphicDesignPicture").removeClass('transition');
});
CSS Code:
.webDesignPicture {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
.graphicDesignPicture {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
}
.transition {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
HTML code (2 have been excluded to make it more clear)
<div class = "container-fluid services">
<div class = "row">
<div class = "col-md-3 webDesignServices">
<img class = "img-responsive displayed servicePicture webDesignPicture" src = "img/globe.png" alt = "webdesign" style = "height: 100px">
<h2 class = "serviceTitles"> Web Design </h2>
<p class = "serviceDescription"> Cardiff's Premier Web Design. Full Web Solutions For Any Sized Business.</p>
<button class = "serviceButton displayed" id = "web-design" data-id="#web-design-slide"> Find Out More!</button>
<div id = "paddingSpace"></div>
</div>
<div class = "col-md-3 graphicDesignServices">
<img class = "img-responsive displayed servicePicture graphicDesignPicture" src = "img/pencil.png" alt = "graphicdesign" style = "height: 100px">
<h2 class = "serviceTitles"> Graphic Design </h2>
<p class = "serviceDescription"> Anything From Flyers And Business Cards All The Way To Product Design.</p>
<button class = "serviceButton displayed" id = "graphic-design" data-id="#graphic-design-slide"> Find Out More!</button>
<div id = "paddingSpace"></div>
</div>
</div>
</div>