Cum se face chenar la thumbnail

  • olariu daniel

    (@olariu-daniel)


    acum 12 ani, O lună

    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

Vizualizare 14 răspunsuri - 1 la 14 (din 14 în total)
  • Sebastian

    (@martanu)

    acum 12 ani, O lună

    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;}

    Inițiator fir de discuții olariu daniel

    (@olariu-daniel)

    acum 12 ani, O lună

    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;
    }

    Inițiator fir de discuții olariu daniel

    (@olariu-daniel)

    acum 12 ani, O lună

    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;}
    }

    Inițiator fir de discuții olariu daniel

    (@olariu-daniel)

    acum 12 ani, O lună

    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 scris

    Sebastian

    (@martanu)

    acum 12 ani, O lună

    inlocuieste

    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;
}

    Inițiator fir de discuții olariu daniel

    (@olariu-daniel)

    acum 12 ani, O lună

    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 deranj

    Sebastian

    (@martanu)

    acum 12 ani, O lună

    atunci 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) scrie

    div.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

    Sebastian

    (@martanu)

    acum 12 ani, O lună

    sa spui daca ti-a functionat sau nu

    Inițiator fir de discuții olariu daniel

    (@olariu-daniel)

    acum 12 ani, O lună

    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.ro

    Inițiator fir de discuții olariu daniel

    (@olariu-daniel)

    acum 12 ani, O lună

    Problema 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 sfat

    Inițiator fir de discuții olariu daniel

    (@olariu-daniel)

    acum 12 ani, O lună

    am gasit aici exemple http://css-tricks.com/image-rollover-borders-that-do-not-change-layout/ pentru chenar sa nu deformeze textul

    Ionutzz

    (@ionutzz)

    acum 12 ani

    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”?

    Inițiator fir de discuții olariu daniel

    (@olariu-daniel)

    acum 12 ani

    Am folosit plugin contact form 7 iar pentru slide am folosit plugin nivo slider

    Ionutzz

    (@ionutzz)

    acum 12 ani

    nu prea reusesc sa-l inteleg pe nivo slider asta, oricum ms mult

Vizualizare 14 răspunsuri - 1 la 14 (din 14 în total)
  • Subiectul „Cum se face chenar la thumbnail” este închis pentru răspunsuri noi.