html - Two Images Side by Side With Hover Effect in CSS -
i have 2 images want place side side hover effects. i've managed them side side...but i'd images centered under logo image.
css:
a.btn1 { display: inline-block; float: left; width: 332px; height: 85px; cursor: pointer; background-image: url(images/bttn_model.png); text-indent: -9999em; margin: } a.btn1:hover { background-image: url(images/bttn_model_over.png); } a.btn2{ display: inline-block; width: 332px; height: 85px; cursor: pointer; background-image: url(images/bttn_photographers.png); text-indent: -9999em; } a.btn2:hover { background-image: url(images/bttn_photographers_over.png); } } html:
<body> <div align="center"> <p> </p> <p><img src="images/logo.gif" width="618" height="85" /></p> </div> <p> </p> <div align="center"><a href="#" class="btn1">models</a> <div align="center"><a href="#" class="btn2">photographers</a> </div> </div> <p> </p> </body> </html>
you should wrap 2 images in 1 div, can center div next class
.centerdiv { width: 50%; margin: 0 auto; } html css
No comments:
Post a Comment