Pytanie od kod css i zmianę wielkości obrazka.

Question

Witam

Czy może mi ktoś z Was napisać i wytłumaczyć kod w css który powodował by lekkie powiększenie obrazka po najechaniu na niego kursorem albo jakiś inny efekt. Szukałem na forach ale nie mogę tego pojąć za bardzo jak użyć to w praktyce.

I druga sprawa jak dostosować wielkośc obrazka do diva. Załużmy żę div ma width: 1000px; height 800px a obrazek ma width: 2000px; height 1600px; jak zrobić by się obrazek zmniejszył i wpasował w diva. Niby <img src="http://../images/mapa.jpg" width="1000" height="800"> coś takiego wystarczy ale co zrobić jeżeli obrazek jest wpisany w diva czyli background-image:url(images/mapa); jak tu zmienić rozmiar. Mam nadzieje, że wytłumaczyłem to wmiarę prosto i nie zbłaźniłem się zadając jakieś elementarne pytanie.

 

Z góry wielkie dzięki.

Answer 1

1.

.obrazek:hover {

    transform scale(1.1);

}

https://css-tricks.com/snippets/css/scale-on-hover-with-webkit-transition/

 

2. div {

   background-size: 100%;

}

https://css-tricks.com/almanac/properties/b/background-size/

Answer 2

#obrazek

{

width:500px;

height:300px;

transition-duration:2s;

//To jest fajna komenda żeby spowolnić ten proces

}

#obrazek:hover

{

width:700px;

height:500px;

}