Cum se face chenar la thumbnail
-
Buna tuturor
Am un site cu retete http://www.retete-super.ro
Am facut thumbnail pe site dar vreau in momentul in care
pun cursorul de la mouse pe poza mica (thumbnail) sa apara un contur la imagine un patrat.Cine stie sa faca mouse over la imagine.Am inteles ca se poate din setare css sau javascript.Va multumesc astept un raspuns
-
cauta in ctyle.css
div.avatar img, div.avatar img.wp-post-image
si inlocuieste
padding:0;
cu
padding:10px;
apoi scri o noua regula css
div.avatar img, div.avatar img.wp-post-image:hover{ backgroung:#fec458;}Ciao
am gasit style.css urmatorul cod
div.avatar
{
position:relative;
margin: 7px;
border: 1px solid #aaa;
padding: 1px;
background: #fff;
float:left;
}div.avatar img, div.avatar img.wp-post-image
{
margin:0 !important;
padding:0;
border:none;
}span.page-navi-outer, span.page-navi-inner
{
position:relative;
display:block;
float:left;
margin:0;
padding:0;
}Am inlocuit
div.avatar img, div.avatar img.wp-post-image
{
margin:0 !important;
padding:10px;
border:none;
}
div.avatar img, div.avatar img.wp-post-image
{
hover{ backgroung:#fec458;}
}A aparut la o singura poza thumbnail un chenar
Eu vreau sa fac in momentul in care pun mouse-ul pe poza sa apara un chenar,contur la patrat iar cand iau mouse-ul sa dispara
Merci ca mi-ai scrisinlocuieste
div.avatar img, div.avatar img.wp-post-image { margin:0 !important; padding:0; border:none; }cu
div.avatar img, div.avatar img.wp-post-image { margin:0 !important; padding:10; border:none; }apoi, dupa paranteza inchisa „}”, inainte de „span.page-navi-outer, span.page-navi-inner” scrie
div.avatar img, div.avatar img.wp-post-image:hover { backgroung:#fec458; }am facut
div.avatar img, div.avatar img.wp-post-image
{
margin:0 !important;
padding:10px;
border:none;
}
div.avatar img, div.avatar img.wp-post-image:hover
{
backgroung:#fec458;
}
span.page-navi-outer, span.page-navi-inner
dar tot nu merge apare un chenar la imagine thumbnail
eu vreau sa fac asa http://www.cvwdesign.com/txp/article/395/css3-box-shadow-and-image-hover-effects
daca se pune mouse-ul pe poza sa apara un chenar sau shadow
Daca sti sa faci cum apare cand pui mouse-ul pe lamaie
Nu stiu daca se poate aplica la css-ul meu
Merci si scuze de deranjatunci pune cum a fost initial
div.avatar img, div.avatar img.wp-post-image { margin:0 !important; padding:0; // sau ex: 5px border:none; }si la
div.avatar img, div.avatar img.wp-post-image:hover ( care reprezinta poza atunci cane esti cu mouse-ul pe ea) scriediv.avatar img, div.avatar img.wp-post-image:hover{ border: solid 1px #CCC; -moz-box-shadow: 1px 1px 5px #999; -webkit-box-shadow: 1px 1px 5px #999; box-shadow: 1px 1px 5px #999; }exact ca la exeplul dat de tine
sa spui daca ti-a functionat sau nu
ciao
div.avatar img, div.avatar img.wp-post-image
{
margin:0 !important;
padding:0;
border:none;
}
div.avatar img, div.avatar img.wp-post-image:hover{
border: solid 2px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
Am reusit sa fac un chenar la imagine thumbnail exemplu http://www.retete-super.roProblema e acuma cum sa fac sa nu se deformeze si scrisul in momentul in care pun mouse-ul pe imagine sa apara doar chenarul dar sa nu se deformeze scrisul.
Daca se modifica padding:0; in loc de 0 sa fie alta valoare ex 2px nu se intampla nimic doar daca se modifica border solid 2px,3px….
Cuma sa fac sa nu se deformeze si scrisul sa apara chenar doar la imagine
Merci de sfatam gasit aici exemple http://css-tricks.com/image-rollover-borders-that-do-not-change-layout/ pentru chenar sa nu deformeze textul
zi-mi te rog cum ai reusit sa faci sa se schimbe imaginile de la header si cum ai facut optiunea aia de la „adauga o retea”?
Am folosit plugin contact form 7 iar pentru slide am folosit plugin nivo slider
nu prea reusesc sa-l inteleg pe nivo slider asta, oricum ms mult
Subiectul „Cum se face chenar la thumbnail” este închis pentru răspunsuri noi.