My goal is to create HTML boxes with a hover effect that makes the icon in the box spin while fading out, and another image fades in without spinning. I managed to achieve this, but the code became too lengthy so I attempted to create a function to reduce it. Unfortunately, I haven't been able to find a solution yet. Here is a snippet of the code:
If you only need this part of the code to assist me, here it is:
<div id="info-boxes">
<div class="box b-one">
<span class="rotate">
<center><img src="images/house.png" alt="" title="Stability" class="rotata" /></center>
<center><img src="images/house-h.png" alt="" title="Stability" class="rotati" /></center>
</span>
<h2>Stable & Secure</h2>
<p>Lorem ipsum dolor sit amet,consectetura
dipiscing elit. Donec porta diam
massa. Fusce molestie nisl in posuere
fermentum.</p>
<center><a href="#" class="button-blue">More Info</a></center>
</div>
<div class="box b-two">
<span class="rotate">
<center><img src="images/note.png" alt="" title="Realiablity" class="rotata" /></center>
<center><img src="images/note-h.png" alt="" title="Realiablity" class="rotati" /></center>
</span>
<h2>Reliable Information</h2>
<p>Lorem ipsum dolor sit amet,consectetura
dipiscing elit. Donec porta diam
massa. Fusce molestie nisl in posuere
fermentum.</p>
<center><a href="#" class="button-green">More Info</a></center>
</div>
<div class="box b-thr">
<span class="rotate">
<center><img src="images/power.png" alt="" title="Savability" class="rotata" /></center>
<center><img src="images/power-h.png" alt="" title="Savability" class="rotati" /></center>
</span>
<h2>Power Saver</h2>
<p>Lorem ipsum dolor sit amet,consectetura
dipiscing elit. Donec porta diam
massa. Fusce molestie nisl in posuere
fermentum.</p>
<center><a href="#" class="button-red">More Info</a></center>
</div>
</div>
Here's the jQuery code:
var spinMe = function(nameSpin) {
$(nameSpin).hover(
function() {
$(this).children('.rotata').fadeOut('slow');
}, function() {
$(this).children('.rotata').fadeIn('slow');
}
);
$(nameSpin).hover(
function() {
$(this).hasClass('.rotati').fadeIn('slow');
}, function() {
$(this).hasClass('.rotati').fadeOut('slow');
}
);
};
spinMe('#info-boxes .box');