|
مجتمع uCoz العربي للدعم والمساعدة اصحاب المواقع والويب ماسترز اكواد وحلول HTML Display images hover circular & Images circular (اضافتين لعرض الصور المدرجه في الموقع) |
Display images hover circular & Images circular |
الاضافه الاولى لعرض الصور بشكلها الطبيعي العادي وتحويلها الى شكل دائري عند وضع مؤشر الماوس فوقها .
والاضافه الثانيه لعرض الصور بشكل مستدير . الشرح : نلصق اكواد الستايل css في القسم العلوي للموقع فوق علامة الاغلاق /head ثم نحفظ الاضافه. بعد ذلك عند قيامك باضافة صوره ندرج الكود الخاص بعمل الصوره في الروابط الخاصه بها . كود الاضافه الاولى "استدارة الصوره بمؤشر الماوس : <style> #container, #container img{ border: 1px;} #container img:hover{border: 2px gold solid;border-radius: 250em;opacity: 0.7;} </style> <a id="container" href="http://yemen-fact.ucoz.com/publ"><img src="http://yemen-fact.ucoz.com/malomat/Sam-City.jpg" height="100"width="100"/></a> =============================== كود الاضافه الثانيه لعرض الصوره بشكل دائري : <style> #img-container, #img-container img{ border-radius: 250em;} #img-container img:hover{opacity: 0.7;} </style> <a id="img-container" href="http://yemen-fact.ucoz.com/publ"><img src="http://yemen-fact.ucoz.com/malomat/Sam-City.jpg" height="500"width="500"/></a> ======================== مشاهده مباشره http://yemen-fact.ucoz.com/publ/display_images_hover_circular_images_circular/7-1-0-19 دمتم بخير |
| |||
| |||