How to rotate the caret icon of select box when clicked? - javascript

I'm trying to replace the caret icon in select box with other icon and then I want this replaced image to rotate whenever I click on the select box.
I have successfully replaced the caret symbol with another icon. I'm stuck in rotating the replaced image.
Here is the code that I have written so far
select{
width: 50%;
height: 30%;
appearance : none;
-webkit-appearance : none;
background-image : url('https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png');
background-repeat: no-repeat;
background-size: contain;
background-position : right;
}
<select>
<option></option>
</select>
As the image is replaced as a background image if i use the transform : rotate property the whole select box will be rotated. How should I rotate only the icon??


$('.wrapper select').on('focus', function(e) {
$(this).parent().addClass('active');
});
$('.wrapper select').on('blur', function(e) {
$(this).parent().removeClass('active');
});
.wrapper {
position: relative;
display: inline;
}
select{
width: 50%;
height: 30%;
appearance : none;
-webkit-appearance : none;
}
.wrapper:before {
content: '';
width: 10px;
height: 10px;
display: block;
position: absolute;
top: 4px;
right: 4px;
background-image : url('https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png');
background-repeat: no-repeat;
background-size: contain;
}
.wrapper.active:before {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
select:f
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<select>
<option>zxxdf</option>
</select>
</div>


Iam saying that the icon you wanted to rotate will also rotate only when the anyone will click on the icon,just once you try this code otherwise if you want i can send the code with javascript function also


With the rotate value, the element rotates clockwise or counterclockwise by a specified number of degrees. A positive value, such as 90deg, rotates the element clockwise, while a negative value, such as -90deg, rotates it counterclockwise.
i am sending the code write it as same with the name you had given after -webkit- you write this code
in your html file you write:
in css you do this:
.icon-name {
background: mediumaquamarine;
border-radius: 2% 50%;
height: 100px;
margin: 100px;
transition: all 3s;
transition-timing: ease-in-out;
width: 100px;
&:hover {
transform: rotate(1080deg);
}
}

Related

Fade in and out background image on button hover

In a slider with background image as image of the slide, i want to change the background image when the mouse is hover a button, with a transition effect, and return to first image when the mouse leave the button. The first image have a blur effect while the second haven't it. I know how to change the image, but can't find a solution to apply a transition effect
$('#open-wowstyle').hover({
$('#img-wowstyle').css("background-image","image2.jpg");
});
$('#open-wowstyle').mouseleave({
$('#img-wowstyle').css("background-image","image1.jpg");
});
Also, I don't know why but the event "mouseleave" won't work.

Changing image by css url will not support css transition. You can place images in separate elements like DIV and position DIVs in exact same position using position: absolute. Now you can change the opacity of the DIVS on hover. The opacity property will support css transition.
Please check the below example. The ugly text is the image url from google. sorry for that.
$('.click').hover(function(){
$('.hover-bg-2').fadeOut(300);
});
$('.click').mouseleave(function(){
$('.hover-bg-2').fadeIn(300);
});
.me{
width: 300px;
height: 300px;
position: relative;
float:left;
border: solid 1px black;
}
.hover-bg-1,
.hover-bg-2{
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.hover-bg-1{
background: yellow url('data:image/jpeg;base64,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');
}
.hover-bg-2{
background: red url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUUExMWFhUXGRobGBgYFx4fGBsaHR0fGBoaGhoYHSggHxolHRkXITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGxAQGy0lHyUtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIALcBEwMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAEBQIDBgABB//EADwQAAIBAwMCBAQDBgUEAwEAAAECEQADIQQSMQVBEyJRYQYycYEUkaEjQlKxwdEzcuHw8RVigpIHQ6Ik/8QAGAEBAQEBAQAAAAAAAAAAAAAAAgEAAwT/xAAhEQACAwACAwEBAQEAAAAAAAAAAQIRIRIxA0FREyJhMv/aAAwDAQACEQMRAD8Az/XLgCARWUsr5ye1N+v6iWAB7UrtH1Ga3LQRxEXbzEdqt6drDZuBh2NeXxioMBtmhJadEtPqYFnXWAcEkfevnXVdL+EulI+n0qHRuoXbDyhIB7dq8+KOq/iLisVggQaqJRfoNcHYAAAn/eT9O9Xa3XB7kL8oxPr70p0enIE1G2TmKPINGht24QEcKv8AUmlF5SRM08RI08HmFB/LNZ68rTtXuanj2TZoq2yzpSHcfSnOmsgug/iZR+ZiqNLZ2KZ5ioWbTQSftSfZ0ayiPUNaDcJHJJJ+5mua8DyK8s6AjczZLZqt3wBFRv6Fl1jzAivdPp/NB7VHSIwBIFO9Ppdy5HmNVaW6Qvvab0zNNun7bfmufMOKnb04tDc3PavNHeV2O+qrujFuu1pYSpivbV0bCfbNBaqGMLxNdrxsWJ7Vr1sLZ7Y0RjcM0CuovKxAM+1H9G3GySD3oq4ERd0eaKEE5vOgOVC4MSCG5oq3rUGjuK2DmKrusCquDk80Dq9MSDOFHeu0lhkr7EZiRTg3Bs+1LdJpvPB7UXeWDFRNXR1FBfzEjnt9e1FAnNSv6EjzDiahcaKxmNdFbVELtzS3Uvvlquv3D4YFeW7P7OaIyfQunSS57UYXndRfSrTNagCrNP0T+NoHekiMVdNYM233rY9Q1gTTmPSg9J0u2Ebwo3AiT7UT1pFFpUI+tJAvaPnjOSa6tD4Kei11A3IQ3bBLBiYNS1lrawI9KJ+ILMGVGAaHPmAg5ipgewS5qxwajdEjFD6jSmaO09s4FShrMPdLlSO9CC4oJLZpjZtbS/0pZprO4maxL0ufVluBAqXgSBB571ZtCrkUx6XpS+0j5ZE1aRVpbe1JNph3Lf6V70vRZ3Gjuj9PGN/HNd1+/snwxg4qRVEg0R6g6mEXJNV30O4KIAFUdDU7i7dhUHuEuW9TRbuQrthlx/bFK9fa2tjmmWo1S7Iilfi7jVYqQ+0aotlZOTzQZ6pc3EqJUVC5bZUAbvxUf+qbEiKoJL0XN1t3YBhimbhI9CaD0fS/EAaPzwPvV1zol45ENHof71HH2WMQayJYgdqu6ldkQR2oa7qtvkKlW9xROutsyqqKSxHA+mftWiqK40X9KvfsgBxV40++259Kr6Toz4bHDbe6vb8MHHzXC4GM4UN9RRaMEFxA6naFF1gDtXdB3y2GSCB5SZkcU/HHimvpyfjd2Z/plk3GCzCrkmrut3tzCD5Vx/rTnqfRDbChSU77m27HGMqoPiDngrSvq2jdHNtkErEkfKQeCD6GjJuKwkoyWgVwLAIMGq10peDNW6YhjsFsM/pOB9TTi18N3I3Fgk54x+orl43O2ywjN6LURbbLuyhKyD/v71V1G1YuOQG2k0b1vpbKbG7Kl+R7D6c/3oTVdNVp20pNrsku9A9dYCJEz6VPSWibf1qI0j4DZE066bZ3AIRBpJ2dLJDUGzawO1IG11260Sc9q0fWtLClfas/px4Sbjlzx7V0QZSG+iutb8qntn3r3rWtdlA70P0RdzGa7W6kJcEjcpEEd/tWT00UKGvma9qdzUISYx9RXlYVBWv1uzDDcrDmk2ut7V3IeaP1ilkCjOJFLktErnFc3SAngNZubu+e9eae8xuADuRXqWtsmo9Mb9spP8QpDoaXLcO4nMCgANp9DTDqLbNSfeKB19s7ie1Y1aFWriuINOOmj5Fjy7l/nis7p7oIgU40lt1z6eYe0ZqVZUzr/VmQgx9aKbUhlnse1e6zo7Ebh3zSlFYOAeBWklVBcUP/AASoxwao6aF8UBhivbGsbdtGRVnTdPvvgema5xyVEi+N2U9YsqpccdxSvp8DzHgUx+Ig928UURGCe1S/CLbQBjJpSauh8iPUXLbY4igEC5Uiaa67AB7RQWm1Si5xzVV+ySuzUdMUBVTdG4YzyR2jvg/pSnXau9prm255rc9uY+vaPYUP1ks+0qdu3MijbWgvajRh2cXHLN5iQIVTAmBzia62KLsa3dOj21cAlWjB8xj/ADATMzzQPT7FtrqJavXbcsfE2jztthgA7cWl5bsSVHepfDXTbmltrvvbvFkpawADkkzmcSYAq+3o3faj7HS45a4weFUCNiGMne/I9AR9S46O7Rdq7DsXS/YtragM1/VXCbdvykKuGHiHdkgECSYHcnto3XfbNxru1ATcuaceFLEMoRh/9YiNoBjdM4iqxok1Oo8NwjlRda0xBNlGBaJUwLhBXJ4BwKplrtss73Hu23t2rlu5cDKWDy7IqbYkO6TAlFmPWN0ZaW6izZKX9QgtXkO0bwLguW7mJ8u1lHlM+IABxuEZqi5ojcteNd3sbgVLdolVDbYdXtsD5SAD5ZyA/wAwANEaPxbgsacMFN5UueA8271n+O8t5VM3JnykZkg9xVunRWtb/OES41u4VTZlt4Ltbz+8yPKxBntIO7MU6jQ2tPba46sqDJ8sn8/r9aQJ1K9qLoFlmVAck44+gH6076/oDqdMdP4sNaG5IJ2OFAwR3iVxmARzgkDoXw1fNj9kypdlIcEGVOGmRzBJ+tVKjNkPiNp8NByCTPuRA/maD01tkHmBhu9ede0F+xdVbkQSCGHfPv3rQaO7bu6aZEgVfz5vs8/kfsyV/TsrSDWj6K/BIzWUss5uNnE1rOkRXL/kzxWS6yqtkgg/pWUvAknFajqd0tMcD9aRdQvjbIEHvWi29ZIJ1Yf8MaeCS2MUl6kwN1oyJp10S9KNPpSjS6YktIxJiumCTaeg34Q+ldTxCAAK6pYuSM+dWUIleD+lS1+jLtK4U1Q1i5cwe3NNLMnTlSJIMCi4q8ObWi67pFBADTS61ai5PEGjdTZ2OBOao1akMDFW9OisY6iyrvuPOKH6opkqKncvjAHJirdWn7UD1AqPs16LunacGJrSWrjbWG3y7Tn7GqbPh2xDDmjRrQyMAIUKQPypUGOysI15Z4W3zAmkW8JcCvnOaaWtXsts3E4H8qVtpCB4jeYH9KL0XFGpTRW1QMsZqk6ywshB+09azvSuoPuIk7fStJ07pS7t7ZBrqlfRxacU7AbFjxJ3NBrzq+gA2xwKK6po/DcFOJFE6tAbZMyYrmlVoUGzPa7qYI2FcCKXsgZwVobVKSD6zV3TTEA8kgUU9OzekurahhtT15r34aZg7CSbfLLODFMup9N3vuBAgR71DTWfBU7ck1V9YE36Gb9V0911cm4hts2wgtFy2ysRtyAolDn0WP3qobVaFUZWLpauCyVCgtcVwoIXiAAGUDtO7mhtGjXCFVgVU7y5B8yq7B0gZCqGKjGSCaJ6PZ3G7Yuw1ln/AMNQfGsMMq4xmJC+hEQRXRdnVjbofVbVy4iWnvG5svA+Mok7oJ2keWQZx7mg9OFNwtedUJklUU+Kbg32/FXbkKA5PHLHiDM+p9JOl1OmuHUC8pY/IgQjgEvBy2Y/OtBo7ah3aArFiSQBOe05HpyKM19LH/Bf0bUM160fEa8TBa4p/ZstokbwezNtUMgMSNw9/LPU9P4yM+ss2octcWZM7mIXeTtAIcgyO3vFOL5Fm3caTCWmAIAkcHgADMAcVnNH8KeDas3NQbTJ+zYLbU+Lej5AQ+FBxJMf0qxRpGitX1RS027kS22PNuZ1goROGX5eQIA/dNQGpVDdZE2AHdg8Ykx7Uo6Fp9pd9yQbkMqQESSCogEjyMS59h9aao4ZL4OCoZT+sfpFSfoEgTrmvXUIAF3EQQYx+dZRbLWgQZA/StT8O34/YssqVJDfTtV2ot2ZCXI2tiTUq32GuSMJd1bYW2o5p8LhS2D3jNW63pC2mlDK9v8AfpS3Ua2TDUZLQSVhTa8NAHcZrv8ApY2gFufWgL+ncFWWiVtNqHUE4WnZniVDDR6MIMmR3oTqDq2FIWmWttBB80QKzN3T7m3Ln71pJmW6e3r5BImuoLUIdxwa6gjJDJU2RJBBo7p1seaRhjilA0pZiM0xs2CLDqxII49aW9FUUIup6J/FaftVlv5fNkijtJe3NDCfqKI1mkQ/KCrHt2NRISloo/DSFcL3FE9W/wAVIH7tMdFe2WGVlyKkllLpRz6VvZzcm2LNZpm3JPBFX+KoBBGOPv8A2pl1RVUZ7DFZ1NVucDse1VHWMRl1B1WATweKEta3w2I5U9vrQvxLoXQBiZJzXt+zuFt17jNQ1hV+zgsnFONJ1cCxzn0oHppHmtsPmGKT/hytwL71Yvjpz8kbw0Vrq/nAbIYVS2rZNyzzx9KG6nY86MBiKr8bxCSB8tGb9sucQO+4Bkcmo6JWLSBhcmrTb3eYDitD0rRqlgscsxqxjg+kJl1MyxpnorJYD1NQfRlRxg17rHKbdtWqpBUkG6fTae0JZ3F4m4s2xnzS6/cQY7EgiqGRr7lraSigDdIJZYO07FSDgEg3GABxzSrqGm3XrbsxVgpypyNoDiZxAmckc+9NOn65NrjYFVBtU27h2kzM3oO4AQDB4luZz0Ts6IOs29xNwkkIcT6+nHPHpx75M6ZqgRJ5nmvEvj8O5iQikwCI44nPrzmguka7Tm2p3FVMwzDGO0jvjipxsVj9Yfyk+VsH+1Ufg7vyIfkABEKxA7GHKgDjOYMciRVfT+oWC6AEyzQoiJMgSJ+5+xrQ376gO0D5GGTBY/wgdpE+YHECklWEYF0v8M2nAV1At7mKrbKzAIyInh0YkATIxBFKOvWXt2dRqFcG1fKBYM9yqsfSYj7j0pp0Fodrp8NLYQ7gGkKzEOSXOSTO4niNoHFGWOn77aJqNpK7EfYP2e5mDFdsZBlCD6z6mpPSIynwprf2JZhkSBSzX6htSoAGUPApt0xAm9AIQu+z/LuIUj2IFItHbuWNQxHyyZHr6RXLkl2ck6mx908kKqESSKB1FpNxGzaRz9KJtapzcEKP7UTrrltyGdYPAjispX0a7Yv190LCjOKH0N7bgLPvR/VbEmVWCFiqOnhmG0rkce9RyV17BjlhHq1hmt7gSWrOaPS3DeUHgc1rNVpX4mPWgxoFQlk9Mk81ZfBK1hn9Xffe22YnFdRR6exJM11YVDvbF5jAgik2r17BiJq61p7t5Qd0En1om50SWBnMeb+9NptFuIP07VZkwac3WDH5ZPaKp1GjtWbRJE0vbXeCyEEy3Y0eLT/o5xbfQ01dvfblRk4YUnuWAhCqTETR9zqYLbhgHkUuCl7pPYDFKTRoKpEtdfJA74oTRaQMyle84/KaIvNBBH3FeaZRvLjAxx6/7iuLdOzpLNIdZtByVJ4odDsAHYcU7fQreRj39RzQWl0KqjBzuacH0FcJzVWzlyTTKen6oPcXcIMiD+lQ65pzb1EesGmun6Q+1bogJupn8Y6ZTscDIGa7xtxs6R+iSxqN6FYyvFD31CAKOTk0RovL54+1ItTeuNdn1P6VGuTXwK1sY23UkKO9NDfYALGBSO3bIcGDTjTXmc7FQljwO5/OukXaHdoYdIdHuwTgZNC6xw11iBicf0qnp+me0l3xVNti0AmIH6/rVuu6eUTysrQULZM5MxHPAPMTWt9B4S9FWhsG/wAsym4jY2yoUOJknG4qQPoKX2i+n1d7xW8PcwIIiPD+UYbBA7jnn2ph0DqN27pr1yPFcksbRwpQngR+8AIH2qPxRdJW1e8Mtp2Qi5I/aJujOcgV1So6Gr+H9Em4+WwwYQSCVJBC/uFTEwcT2H2R/FXwkNKDd0p8lwqr2iZG5iArCe8mPv7Up+ENfqLV827NwPbKzbDudoUkZCjuI4/1px1rQaq80XbxIkeVBCqRkERkkRMziusUmg20zUfDfwlbsRqLo8TURjzeVR6KPQDv/egfiZ0S2ybLZe6VtgGbtzLdxtIVYXuDnniqNR1bV6SxF0pcDYRzAYE4G4cHP3qqxqhaC3bz+Jqm3LZXADO3ywoEKvufUzVaRrY5+I9Cq6TVJtRTchUlo33GVQoOAAZAA+lH6y4LVo+I+24qWFbuquWBUx6yTn0FV6Jb34Mfi/D/ABAPiN5d8BW3KQo5YDiO9BdK66uq1zafwTesgZuNja6EspOOJx9h71zcRWVfENmBuB+XcADHygwpBHaZ/P2NZrTOzkyRuradTZbodlTdvMQBlUUmT7HeWInPzelY6xpyGDj1givPJf0GUVdjDpBYSHA+tL7xDXdobvRbtmcz6Uo0mlG8tk5qp0FPs0WrsnYq7pJ4/tQmn0JQk78jtXvUnPh22UQVqjSo9wnuTyKEv6ZyxB9rUI6mTB70m1+nIuAg49jiiOraA2hIInuBVOnYkSVIB/nVppb2KP1HCBg811Ta1OdhryhbA2KNNqgrTu57UZausDImf5ikljTMUVhkTmmWjuPugHArvbPRJW8HJ2vbJBkdwexpUenC8yy0kcAUdb1qYXAZsH+9Wv002iHtmfb2quVnPrvBRqrZtuqESD/OjtEAJ9QKj1G9LLPMzR34YAkk4YUEdEtsQ2oO/vBpnd0nh2GOPOZHtgD+ldb6WqqWVpBqzqrzbtr2JrfRpqSA+jara+2eRxQvULpR2EUNctRdJBjbxWi0D2ryubowBzQ4Jx4nDhToC0Ot3WoLkCRI9PenXUdI7KCDuEVkup6IWnUoZRoiPetTbvs07JZFWTtiftJA+8gCr4otJxFFNCbUdNu2wHI/ZmgdH0u/qLh8JYUTDtwfYepp70vqWqut5EuG2p8sbRaA5LPcdZY84UbfrzVvVdVbfU2r1m0t0Wx5rz3WW1b2nzbVWAfrxXT8xpIE0VkPZ3AXRdD7WKWyRjlQWAXtluB60RaZLl1tp2NO1SogKB8zEkkFzBAJyMwME0BqLjXX8VHuuzbtguGfmx5F+VUg/Nt4igLWkW5eFi4pkg+RCAAq/MWjIDGB6wVHrUoaSSwYX0uW2ZiLTIICBWJukE4iMKpgsXbcTGZwBRqb3mAeUWdxCktg+WT7E/vHJjsBFDroyLd8NdHiK83Esg7isQloMeMRxwKI0Iul5gWyUVQE/dkESN3Ozy+0GoxIXdOW9012Lr+yY7RcEHByME/pTm31FGdka/uD5Fu4BsZWzgj70bb0njJ+H1IJZ1ncB5BGJU9jwY96U6j/AOO28KEvbmBlZECPTHeusXYGqKbTfhtzJp7iKpyPmOe6kHCe0U/6b1w3FV4UKZiZBJGDKx/zWV0+rfSuF1YZXCkLcDSSvYEcGPU1d/083b9q4LqvAJYg7WKxIwD2BA+9JENEPiSzflo8TwuAqEkMSchftzVdk6TRs2ovXS+oOUN5SoG7sqiTuA/5FDXet2LVsgai3vHGxCAT23nJIH6xSnRfAes1txb9y4jW3g+IG5X/ALVjAirpBp8VfEarZLWywuaraT5jv8MdgM7Qf4R/Ea0P/wAWdFu2bdzU35Q3htS3MeU5B5wxOB/rV/Sfg3R6XUW7pLG58tsO0iQOwj0mmOv19q+FZV8ZEuzuPlt2tnzMSY3Rn1z9KLKgrWM1xPMpTxFPlO1bm6HfZ5ZDR6DPfNIUVHto6R5lG4ejRzTLV9TQG26Pcb8UDatvbygkyLu3A3Z5HpS1+nWrd27b3FipXPoxUMQfzn71zatGnG0U6bVAPtIEgGgbTlt8KAVOI70y06KZaJORUbemCwIKzkk4/nWVtHIhpCXQyveqNNqPBuYEyM+1F2dWguhFdTg+UUve229uZnj2o9Ii60kChL72Mn14oi4w8qBgYFLNbb8okwe1L7+uYsoXkYP0o2/ZkqwbHUEYEfnXUut9OJAJevKHGJf4KC2wbFWidGnGINL7GmYtuPmI4BP6zTDS38cEH0jH5104s7x8daUai2niAd6O/HMhEElcAg+nrRNnTLC3AsvJBH9R7VG/fVTlRuJjtSkb87VMKXTW7xMcxg0FsKNtuSATHtRumCny7guOY/qK9111Cm0lj9u/rQjGm9DGHBlvR0VWdTGwiRS3r6DcgXgGfpz+lVyxXaIUAczk/UV4NPkbiTNK8oXFrRRr9O8kjIJ7Va+uXS2ZuD5hhf3if+O9MxbCTGOTJPbuKybWhr1Zg0XLe7yn5WDHy5+gA/KrCOhcaNEmje7ZsmBat7d9y4WnaOyKDy3uce3pnh1/wnufhJto3llvNcf3Zjn6D3NaHV2rZ0a6LxQtwBTn1mf5zWS0PQGa4wZ1hDDQc13quiG3+CviDbpdQstcZFZ5c4yvyj2xSpb7W7Je7521KMbdsR4agQR5e53FQPqKnpNPOmuoItKxA3T8yg5J+omhfifWrZWz4ZBNhBt+rQR+W2ftVfRCl7bjUiyxJuHYbjA4S2vmgwcAt5j7BRVl7T2ylpNO/im67eNdEgvslyvspYj7RVPxN1DwSAhm5qLam8xA+XbtCr9TJP2qhtS2ksrZtvF2AzQMAuwjPqAIj3rkxIYaZb91LtywRbL3gcgAsqjaxM9p/lRPS2t+KDfuEld1224ONhAVgYn1UxXvWOu3PGeyoOLakADLNhmA9iMfnVvT7RWyfwotMSTKXCDu/duIJIIGBkcxRrR2MbWgvIzWizNZJ32byGWWc7WHdfrg0y0+vHiGz5rdwCEkeR/dSMT7UJp9La1un8LTXBaewfIQW8S22dyOGzsnEgkflV3StRe2FNUqEpjxbJV1PoYB3Kw9x/auqQLO690C1rAu8lXQSYiYPrP0pFrfhKzpWt3kulAjAtuPOcemMkfen3SgNjh7/jpIKMMOAMwxHJxxVPxB1fTnT7mttcRm2lYIIIxJniP7VaMW2vhbR3v2j2x5szJH6TWsDNaS2llVCrAMmIUekd6zVu4hKsSQFWAJhcjuP0oXU6ptbbZFuvYto0MYgtnEH0qojQz6l1y5c1C6fS2t9wfPfdfIinJAx5jHoaF6p1qNTa0GnUMXxeGdqr+8YHcie+KH6n8W6bS2Qi3ZZAAoXLGOxPEH1mifhrxb+ma6gt6bUagzuCy4SeQDktHE4zNFqypjn/Dd9LoXHjytx/Eylq3gbVEQMDA96p1923dIa3dFxnuXAsgjKiXQNwSDkDuoxMUstdSa7qk02hvLstbTq7+0G5cIMbWYDJO0iZ7n0p5f6pYR7VqxtVTdO82wLlmSY23CPkZicehA7UXRUItO7KTvwJJhcUJ1DVbSCCp3cSfMPrNaF7Nx1jxEUY8rjsMem6JB5zxQWs6UlzO+yGB/igfTNc5Jt9mcWwDpVtPxI8QbWEt7MIxn1qJvtcZ/DXzSYn+tdr+lXlbexHhrEFWBEdqvtptAbcsgQxDfz96Leacn45UZ7VXrwfZcXkYjMflUdBYQhizQ6mMZBB7j0rQFbb+ZiMDysP8AfFVae7bBZFVYwZJEs3tR2iOE66BbnR3n51/OvKYHUA/uD8x/euoVIvGfwzg1QPC8eoo3SW7rH5dqxMmBHtBoNtYVwCp+2f51DUaksAWBaOCCefbNdqR67YZYuuzEBwCO0gCo6u20Q9sAqee32IoMa5B5nEE+8n7xVV/qtswAxP1b9QK1IhE6twcQATwc/kO1NLOouPbBe3ABiVMj/ml2n1unady59QTP1MGnNjW6e3bHhQHE+fcQT7MNpBHt/XNZRRGydvTShCLcZyQBAG3PEk0T0zpd538JylsggQXUkYnABJJjMVDpnUL9xgz3goMblJOJHIzE8YNW2bd1LrXFIubriRBUHafKSf8ALzj3rooxC3IVdUvLbsOQLrEMAGZIUqCd5UgmBggzEHETWG6fq1sNcCNJiBPB7ivpGs6peC3DdsFryuzWgpgwIBKuBwy52mQYIzxSTr/U/ENsKii1cXzL4Y8a2Z/xFBGYkSP+aeegOzFai949wvu2XO47GO4Pai16qwV5yWABjBxifetX1D4bseBcZIL21zcjyyRu4nGCPzrN6ToafhfHLEkkBVmAWJgZrcWE8uC7fS1ZSdkDef5T9B2on4mt22REQ+bxVRj/AOJifz/SmOl22iyRFzZI9yBj+R/Ksl0/UEkg87hd+pXJ/SaxTXW7VjWPuaVOnaCf4kTsR9jVWhuJrNSmotgBlaLiE42CdjDHNJNFqza1TKcI7MrRyQx7n78e/wB6H6fcNm/dRG5W4gI9YMZ+1QxqNLrHvXmLIviW7hG797aDhR9pz6A801s22SBaS0wttuH7ANbUTOLrsPNPeZ9qQfD+sS8m66PMuGzHifKAGjJYyAFHzbY4mtA+nJCThQcjdI3zAUFvnuTjdwNvliRHNujolaCfxQtu+oS3t1An59oW4pzsL28SP3WYT71DpqWtYRrNOTp76vF5Rw3Eh1GDI70HYZ7Ydh4T3g3mUyET6sBvbjvz6AU16RYt+KGRvDvXF/aAW4sk9iIUbTJ7kn29FCa6ZJQfZX8SfC63LhfSXRa1AG5rcwr+hI7Ge8R61Uz3Rph+ItsrtIKxJBmJ7/nQ/wARWL4tW9Qrf/02WOV5ZZicciAPUV58Rdc1D6WzcURcYxcWPXHHIHB+9dmBCqzb8ht3HNzsc5A5E+8V2q1Vi7bGmN829pAznvPNVvcRG3XMTtGO5/2al1jpdl3FyYgeZeC0DFBFYx1vTl09q3+ERLjPjxWysclifSrNTebReGwcX9dqP2as3yIp52qv7s/c/agdJ8U2W0xt3UVNogW/UDtj14+1POgdIXVXhqQUDEJt3kBUU4XaOdxzgfpSz0Qb/D9u1pF8DcouBfEuBYUP2LXIB225wBMmm3TNdfJYeN4QBJVbWjfwdoPd3QDd/wCVVrolQuzmBPmd5D7uAfIxXb2HcTzkzBxBtftQlu4YtMVDeHc7bHaRDZ8rTOYauUmhpM74lssbAvXCtwoZVtpRipPdD2HOfQng4yOr1w3gK4YtnyAQBgnjjmOK+hW9HbQBbyoFIO9VwgYmC6d7YYSSh8vlP8JLfOrXh6K7fU22ZTuVWEb9p+UANwYbM/0rnLqxx7BLuveGVpyYUDBwcc/7xVxvjwAxTbPl3DO7JOV7xxPP1qWi62Q8BCdzAFnidoEQSYpm3WLm5JClZxmMd9uSR2oWdaEFq9dJIk8SsfKRHaf6/pXanWFNvioeMNHB9J9/etieqbm/Z3CfVcEHGJJwD7A5x9KV9S6Et62SWcgEb7YuSQxOFJnjtgkk4xyZWhoztzq6Anysffcf711GmzcXyro/KOJtSY9y2fzrqVGLX0Xhf4hB54jH1jIP1pVqZJJt22zgYMD3rRl3/ddd3PlTy8cFo9o7VZp9TdK52/8Aif7CIpWSjI9O6M7OWvo4WDGOD2JUcj6Vfe6UgB8kNxwsfaM/1rTraut80fZs/nGRQ9/pinEMT/3E/pJityRKMta6S/JFtl4wcn1jGMUdqOhBpZLqoOf3iBiAvuJHPv8ASnadMt4kjafTv9wZ+9cnSbCliAw3c+cwT6/arzRvzYis9Ndf/ukeoB4/KTn6UzOmv28rcR499vt3x+vemNrS2xBCyeJkmPfke1XW9M4llvKd2DKrBHoQ0j/mjYuDFT6i4Fi6btvMBpPuYlefSP54qZ1qmN0ORIDMgZhPYOCGE8fYU5tWrgBiwjAcbSyL/wClt9v5LSvW9FtMQR4tn+IeErqQOxKgP9Cc/wBLZKCNPYs3LV62wbZeguQxUgjGA8wMD2qpPhuwLRsLcum3uByykqQexCj8qGbobkEWtQrjuRlwfWCZHv8Ab0r0dCcEMLzxIxM4niTiIxV/Rk/NfCPXvh13K3LD2y6YG/cBH2xP1pM3wu1txdNoyBO23LifQbVpk+j1dskJdJHbd3+kEd59YFF6DVa4f4lpf/cfkY70uYeBlPiLpDhxdCOoME7kIGODJGDSHqNkh/EQyCZkdm5IPv3r7Fp9ZeIl7cTj5gfvifyPpVrFWUq9tCCR5XAII7RuETW5pkfjZ8s+H7wW4GZSAfPHYMobMfWMepFavQX2dbaNHiG210tMG2XJEDEBgPKMfxcd27fDekLyNOFPqrsonn5VIH/NAjo7q7PasN6Dzhpkk92yMn86NpiUWhhp+kWrCFJ3rAJVSQ25ow7bpZj9sduxJVwrhLAARSQRAAYj5sEYg9+T+tZoNqLHim8GCHYADw0AKSN2PTE80JpepgOyl3JkEAGAIAEjvwAcR95M3jZLNnd0RuXEuwPDIg3d3mMkRAB2k9tx9sVnOsaO6mse3ccG0qKyH+INiT7ggg04HWNMHt7WVHTDIs7YYyG2/KTzP+Y/cf4x6dc1dwfhiotlFU3GaIUEllESSZJH9a6pUBuzJfEVu2FVyZ25AHef6UkbX3dQwRFJLEKqqJYnsABya1Os+ErZzf1uBgIlvA/8mb+lH9A6PpNPc8azeZ2UFZfb5SRyAo5wc9hNG/RKYk0f/wAa6lyDcuWUUEeIouqbidyCPl3xOC1fR9Tp7elsW1tW3tqo2rdQbnTAkmVYhjGYWDFADq5bzKrLb8MguSV3GRDDzf5iG9PWo2byM7IrFkcKzMYgttDEx38pUcZBPpUdjSSG+kvDY24tf8QyjbU/bCPMsBRJAkFSN2DAIBqfT7OlFi7aO42iC/gOfPb2nzbGngMARBO0jn0E03UrVsizZO1hIXACqwmSqnHfJ4+WlvWOvJ51soge4R4jD95ohjtiF3dzOYE0Hg1potf1VTN5XAVbZVgxy6kBlEepJg/eK+YavqjXzcYj9n3YjH0HfjNPNPoLlxR4hIUnIjB/vgn86Ov9HGwLtmFKwOwY7ieMklQCfah2KqMpp79u4pXcq3lB8Np8rLGQWiN/MExMkVR+JDEhXIZCDAwPoPU459TTa90IKyhVkTJLGRyO2O059eO1DN8NqJ2E9x7/AKe4qm0Z2NRvJLCPKJjmGEg447czz7Vpen6yEU/MWAAeOe21+8NDD7HAIFYrp1y9YuKSd2QpDAkFTAhh6fyM1qerkDUtZDAW3tC26rIa23zKwxDCSCRzkxM1KNYVc0lkmTqQh/hL5H/5P59/biurLN1i8h2uRuGDuST7SY9Irq1mLNLfuWzmGHqpJPvg/wB6KN1dxBmSe7R/Kf8AftROnSMLGPbBH8p+1WDUTIg+4DcfrWtF4sCsagh8MfyPA9fWirrb8hxBnAIA/Uk1G4ykyfyPyzk9hzn3rhs7bZAHAnB9hH8qzaKkyxdOFiWk+pJJg8fapKxAI5jt/eYj0OK5LfBG1T6fzjvwarW36gky2JYGGx2n889q2Fpkl1JJ4EDJIIgfU8RHc0Tp1UgNuIU/qf8At4kfpUPDVlG4HbHyBjB9mnn6nj07VVpnQmfQwsEgCOAFntP6n1rYTRr0vqjWLm0gva2yrF/MD/DsjjvM+n1oLqGuuXrhYJA4AEEGCSPQkxz9BzUmSDuABPqwn3z6j61G5dQtBRWPptx9fT8hilzyg8K0X3L0vm1cLDhgII9wynH3NFvd1CqrFhDc7lR4x/GAD6Yz9arfpS3G3u9xjmBvO1ZkGJmIxj1FXWbI8MJkqp8swY/ywBAqckLjJk/HXa3iKFMGdjSP/UwRPtNeKwKnawbHAmfzIifzq8WfLzyZM/37jP6V5aulR5tsceU4P2Mj+VTDcZFFhrknuhj0kfl/pVzNBGWB9e3b1+vFWrf83mBCSeI9TDAznkYx+mY3ioyzAg8GcT6TPp2I7VqN/jInVKsSwluO+fc/aKJfqKgAlpxwv8qzPUC1y6igPGQ1xFBQK3dgCD2BJjGaPPSo4vAn+JZPHsBGff1o0CrYyN57kEoAoyJncMRx3BBIIqx9BZf59PaY+pUT6HMTVaAqfT19D9Tx+VXXdSqLJJMfSf1qpi46U3OmWDzZSRxnMdwJ4xXXelgAbSwGZUEbR6EYyfqKWr1jx8CIPAmeOc+v+4ozTEqSCAA3EnIPr7jt61bZuKBrvQrUbggZ+wZQT7yEg49ec0i6j0e4cLcsKJkiWWR9FQma2LW9kGJ9wxj6f81Q+oG0kIG/rH2q8mFxwS6fo19gB+IXfiSEIEcgSzDcAD7R+VEt8PPbYk30ZzJMpEcxyx9fXihtR1YBjhQsgKNvfiJHOT+tMlS6wLXntrOQSy/ryR+VLkyKKFvVcmAyh4MsvBnt/mOOfSl9jRFbu4g+WAojuRgnGTk/cCn1xNOCN1+STxbQmY5zA989qjqOo2CfJYZj2NxoGTGAtF2+xpJBeie4ZH2+WM5Jz6cVada6xuyfYCfy9I5P1pR1brVxFC2iiu38Kx+pOfSuUsiq968BcPBYyPqYER3P29ahh11PqVtE33AfKY8vcjByDH2oWx1fTXZa3BiRlYP94NVaDR2yADe8RJ3QCDIOSrAyCuZj7elQ6n0SzbLXEbLAnaOflgQJHcSQcGBxWMT1XULcCQoPYj19OB7Gj+u3rAYvf8skSexwIInMx2rAdF6q124loA7naCTBGPMxgyZgTM1Z8bfEJOqKqAwUIrj91oE4PrBGfX1rGbRuNJq7LorIXKkYww9uDXV8ufrV4ny3ti9kAYbRxELj8q6sa0fSun9O8AbtQPEuH5La4UehLYz/AH70usSrneoknEZgf6V7XVZJIkWxbrNI7SSMCAcj+v2orTaaBEGYBicR2g/bvXV1RjXYb4W3G8+bAWMie4YQPzFeIhU7pJY4AY+WAPQT/QfXiurq1GZ16y3JM7ozJEjkRHETx/KhrFjwrhDf8kcmMiurqjEtoZNDd2j2xVttUE5z7ieK6uo+yyw69ZAJAn7GPX7DjtXWotxIIBzBM/qDXV1axJE7txsqrD2x+YOaHNoxtYGJHpAjvXV1ayNHmotGcGR3DZ/UQf1qvTW1YXMANkOIwR9zn1zxXV1Kzmi+58q+VRtH17xjtV964uyc9vaa6uo2KkBHVkgz5Qe45+3pQGvv8eIXILRtxkgEz7V1dVQn0A9K1qi47IuFAHPtOB98/QVobGrZlzC+hE+np/vmurqz7OEuhJofiS7dTaFTcpyM8Axg9mn61NeosylmPIMfTPYCurqRvRn9Pd8QwyyZBEGMDMflTq1rVIEDzMoz7nJmT7Hj0rq6szRKtS2wBjJIjv65/Wf5VLXuoCHIwDHMxu5nt/aurqgwC5riF8UEEYCKRIwAf5maS3uoNcuA3WMEgkLwPWATgxXV1YLHHTL0eLdTbacHxAqDBQCSmQRmD94NVaq5cI1A3NjbJLSe8mZn1H0A966uq2aiHw5dO69fYAG1ZO2AAJI8MGB3iSaU6uyXZmAwWJX12jA7+grq6qEqCDvmurq6oI//2Q==');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="me">
Im the content here
<div class="hover-bg-1"></div>
<div class="hover-bg-2"></div>
</div>
<button class="click">clickme</button>

You need to use :hover with animate, purly done with js and css no jquery.
#btn {
/* background-color: red; */
opacity: 0.6;
transition: 0.3s;
width: 150px;
height: 150px;
background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png);
background-repeat: no-repeat;
}
#btn:hover {
background-color: green;
opacity: 0.6;
transition: 0.3s;
background-image: url(https://s3.amazonaws.com/gazelle2.cdn.yolocare.com/sites/370/2015/05/line-art-icons-150x150-activity.png);
}
<button id="btn">Button</button>

Make play button display on hover 1 image at a time

Hi i'm trying to make it so when someone hovers on an image it makes the play button turn up only on that image, I have a few different effects on the image so I've had to make it so that when i hover one class it shows another one with it too using java, only problem is I have 9 images that need to show the play button on hover indivudally but when I hover over 1 image it shows the play icon on all of the images at once,
Is there an easier way to do this so that the play icon only shows when I'm hovering the one specific image?
Javascript:
$(".portbg1").hover( function () {
$(this).addClass("active");
$(".playbutton").addClass("active");
}, function (){
$(this).removeClass("active");
$(".playbutton").removeClass("active");
});
HTML:
<div class="port_item"><div class="playbutton"></div><div
class="portbg1"><div class="port_item_title" data-modal="#modalOne"> .
<h4>Showreel</h4></div></div></div>
There's also portbg2, portbg3, portbg4 etc... portbg9
CSS:
.playbutton {
position: absolute;
background-image: url(IMAGES/openicon.png);
background-size: 80px 80px;
background-repeat: no-repeat;
background-position: center center;
width: 80px;
height: 80px;
left: 50%;
margin-left: auto;
margin-right: auto;
top: 50%;
transform: translate(-50%,-50%);
z-index: 1;
opacity: 0;
overflow: hidden;
transition: all 0.2s;
}
.playbutton:hover {
opacity: 1;
}
.active {
opacity: 1;
}

Just doing :
$(this).siblings('.playbutton').addClass("active");
doing the same on remove class.
So finally would be:
$(this).addClass("active").siblings('.playbutton').addClass("active");

Showing Loading Animation on Image Button, when clicked

I have a image button:
<input type="image" src="https://en.opensuse.org/images/4/49/Amarok-logo-small.png">
and i want to show a loading animation on button(not whole page),when clicked.
i tried with a gif image, when clicked on button it showed but not exactly on button.

To show overlapping elements, a common approach is to use absolute (or fixed) positioning. To show the loader, placed above your img element, you can follow these steps:
Wrap your img element in a wrapper div and give this div position: relative. absolute position will also serve our purpose but that is more likely to affect your current layout.
Now, inside your wrapper div, add another div that will contain the loading animation (which may be a gif, or contain any other animation structure). Place this loader over your img element using absolute positioning and place it as per your requirements.
// bind click event
// you can use any event to trigger this
document.querySelector("#show-loader").onclick = function(){
document.querySelector(".loader-wrapper").className = "loader-wrapper loading";
};//
.loader-wrapper{
display: inline-block;
position: relative;
}
.loader-wrapper .loader{
display: none;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.loader-wrapper.loading .loader{
display: block;
}
.loader-wrapper .loader span{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: orange;
left: 50%;
top: 50%;
margin-left: -10px;
margin-top: -10px;
animation: zoom 1s ease infinite;
}
#keyframes zoom{
0%{ transform: scale(1);}
50%{ transform: scale(2);}
100%{ transform: scale(1);}
}
<div class="loader-wrapper">
<input type="image" src="https://en.opensuse.org/images/4/49/Amarok-logo-small.png">
<div class="loader">
<span></span>
</div>
</div><!--#wrapper-->
<br />
<button id="show-loader">Show loader</button>

make div bigger and animate bigger section upwards on hover

I am trying to animate a div upwards when a user hovers on the div.
I am able to animate the div making it bigger, however the animation happens downwards. I am trying to keep the bottom of the div remain in the same place, and have a smooth animating increasing the size of the div upwards.
See jsfiddle here which demonstrates what my code is currently doing.
Please see code below:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
}
.content:hover {
height: 110%;
}
<div class="box">
<div class="content">TEST</div>
</div>

You can do this using transform:scaleY() and set the transform-origin to bottom. I also put a margin-top:100px to see the effect better. Also you can use transition to make the scale smoother
You also need to scale back the text.
See here: jsfiddle
You need to scale the text back to it's original state in the same time that you scale the div. so if you scale the div 2 times. You need to scale back the text with 1/2 , same if you scale 3 times...scale back with 1/3
In this case you enlarge .content by 1.5 so you need to scale down the text inside by 1/1.5 = 0.66
Code:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
margin-top: 300px;
transition:0.3s;
}
.content:hover p {
transform: scaleY(0.66)
}
.content:hover {
transform: scaleY(1.5);
transform-origin: bottom;
}
<div class="box">
<div class="content">
<p>
TEST
</p>
</div>
</div>

Try it like this (I have no other idea...): You can give to the class "box" a bigger height (I put a red border around, so you can see it) than the class "content". After that, you can use flexbox, to put the class "content" on the bottom. After that, you can do it with hover to change your heigth upwards and fill it. With transition you can make a nice animation. I hope this is good enough. Perhaps there is also a way with jQUery at the moment I havn't got an idea. Let me know, if this helps you (I'm not sure if I understanded the question well) - Cheers. (Important: This heights and so on are just random values for testing)
.box {
display: flex;
justify-content: flex-end;
flex-direction: column;
height: 100px;
border: 1px solid red;
}
.content {
background-color: #e3e4e6;
height: 50px;
width: 100%;
text-align: center;
-webkit-transition: height 1s;
/* Safari */
transition: height 1s;
}
.content:hover {
height: 100%;
}
<div class="box">
<div class="content">TEST</div>
</div>

If you just want to use css, just use:
.content:hover {
margin-top: -50px;
height: 110%;
}
See jsFiddle

since there isn't any space at top to expand, you may give an extra margin initially and remove it on hover like this JsFiddle -
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
margin-top:25px;
}
.content:hover {
height: 110%;
margin-top:0;
}

Set top property with the value of height - 100 * -1
https://jsfiddle.net/x3cL1cpt/7/
.content:hover {
height: 110%;
top: -10%;
position: relative;
}
Why position relative? It's because I move the box, but without modifying the space that the box occuped. If you need to modify that space, change top with margin-top.

Replace this CSS with your current, needed to add transition:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
transition: 1s all ease;
}
.content:hover {
transform: scaleY(1.2);
transform-origin: bottom right;
}

zoom image when mouse hover

am trying to make more zoom when mouse hover on zoomed image. i mean when cusror hover on zoomed image, some part like square, rectangle, circle e.t.c part of image should zoom.
i have the following code. please suggest me how can i achieve more zoom after zooming the image by onclick.
<div id="overlay"></div>
<div id="overlayContent">
<img id="imgBig" src="" alt="" width="400" />
</div><div class="imgSmall"><img src="xyz"
id="ProductPhotoImg">
</div>
</div>
<script>
$("#ProductPhotoImg").click(function(){
$("#imgBig").attr("src",$(this).attr('src'));
$("#overlay").show();
$("#overlayContent").show();
});
$("#imgBig").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC
$("#overlay").hide();
$( "#overlayContent" ).hide();
}
});
</script>
<style>
#overlay{
position: fixed;
padding-right:10px;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity = 70) !important;
display: none;
z-index: 100;
}
#overlayContent{
position: fixed;
-webkit-transform: scale(1.7);
-moz-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
align-content:center;
width: 100%;
height: 100%;
display: none;
z-index: 100;
top: 100px;
padding-right: 24em;
padding-left: 14.3em;
top:16.2em;
}
#contentGallery{
margin: 0px auto;
}
#imgBig, .imgSmall, #ProductPhotoImg{
cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
}
</style>
This code is for onclick zoom.but i want further zoom on mouse hover for zoomed image(like when mouseover on image only hoverd part of image should be zoomed), please sort out my issue friends.
Thanks in advance :)

The best way to do that is with the :hover pseudo class. all you do is..
// Name class
.class {
height: 20px;
width: 20px;
}
.class:hover {
height: 25px;
width: 25px;
}
You can change those numbers to whatever you'd like but you should also look at other cool pseudo classes you can use in css! :) Hope this helps!

you can do it easier :
.normalpic {
width: 25px;
height: 25px;
}
.normalpic:hover {
width: 50px;
height: 50px;
}
This will make the image 2x larger on hover

why don't you try css hover?
like:
.myClass{
height: 100px;
transition: 1s;
}
.myClass:hover{
height: 200px;
}
at the click event you call a javascript function like:
function myFunc(object){
object.className += "myClass";
}

Categories

Resources